長いリストがスッキリ２列に。「並び」を支配し、意のままに操るFlexboxの基礎編

CSS CSS

この記事はメインカラムで表示される長くなってしまったリストをPCでは２列に表示するCSSの解説と紹介をしています。今持ち合わせている技量にほんの少しの知識を加えるだけで可能な表現ですので、悩んでいる方は是非チャレンジしてください。

放置しがち、羅列されたリストの改善

リストと表現しますが、リンクの集合体を指してます。

Webサイトの主にブログでは記事エリアの下段あたりにそのリンクの集合体を多く見ます。
内容は関連記事、もしくは新着記事の羅列リスト。

内部リンクを意識すると、「これも読んで欲しい」、「あれも読んで欲しい」、と表示する件数を少し増えてしまうかもしれません。テーマの機能に表示方法のパターンが選択出来たら良いのですが、なかなかそうはうまくいきません、

羅列とは、整理されていないリスト化に使われる事が多い言葉の意味を含むようです。
しばらく放置された縦に長いリンクの集合体を、綺麗に２列に並べる事は整頓と言えますし、２列にした事で長さを縮小したことは、使用エリアの削減につながり、これは整理と言えるでしょう。

今回のサブテーマは整理・整頓かもしれません。

プロパティ：Flex

簡単に説明すると、HTMLの要素（タグ：a ul li …など）は上から下へ積み重なります。
display: flex;というプロパティは並びを自由自在に制御します。

リストのulにdisplay: flex;を書き込むだけで、上から下への挙動が横へ整列し始めます。

今回のテーマの２列の折り返しも、たった１行の追加で簡単に制御できます。

プロパティ：flex-wrap: wrap

display: flex;をただ使うだけでは、対象リストは横並びをするだけです。自分が存在する領域から飛び越えることもあります。
そこで自分が存在する領域の壁に当たると下の行に折り返してくれるのがflex-wrap: wrap;です。

このflex-wrap: wrap;こそが、整理整頓の第一歩です。これで、要素が横幅を使い切った瞬間に、自動で2行目へと流れる準備が整います。

プロパティ＆関数（最重要）：widht・calc

widhtは横幅を設定します。ここでは li に対して50%を指示し、 li 一つに対して１行の半分を使って良いという意味です。

そしてここで最重要となるcalcの登場です。li に50%だけを指示すると、一１行の余裕がなく左右が一杯になります。
しかしwidth: calc(50% – 10px); の設定をすると、左右のli(50%)から10pxずつ削り、間に合計20pxの余白を生みます。ここではwidhtとcalcを1セットとします。

これはCocoon：ページごとの「場（背景色）」と「GAP（余白）」を完全制御するCSS設計でも出てきたGAPが作る余白の様なものです。デベロッパーツール（開発者ツール）を開きながら対象の関数にマウスを当てるとＧＡＰと同じ余白を見る事が出来ます。

このcalcを使わない、もしくは知らない場合は涙ぐましい苦労をします。

関数：calcを使わない苦労

このcalcを使わない時代が自分にはありました。それはcalcの存在を知らなかったからです。その時はどうしていたかと、それはmarginを使います。外余白を作る事で表示バランスの調整をするのですが、２列に並べるので当然その中間の隙間を作るためにmargin-rightで指定してあげます。

しかしmargin-rightを全ての li を対象にすると、２列の右側の右に余白が出来てしまいます。
そこで今度は右側の li は対象から外すための解決策がnの計算式です。

calc を使わずに、あえて marginで解決するには、要素を指定するプロパティnth-child(n)などが役に立ちます。偶数や奇数だけにmarginを使い、右か左に余白を付けます。

しかし、余白を付けるとリストの50%が２つと余白分で100%を超えるので、widthに指示をした50%の数値を下げます。それをプレビューを見ながら時間をかけて納得ができる調整をするのです。

width: calc(50% – 10px); のように「 calc 」を使う事を強く勧めます。

プロパティ：justify-content

これに関してはあまり深く考えなくても良いと思います。結論から言うと、calcの作った余白をjustify-contentで制御できます。値（Value）は色々とあります。

justify-content の値（Value）一覧

  • center（中央寄せ）
  • end（末尾寄せ）
  • flex-end（Flexコンテナの末尾に寄せる）
  • flex-start（Flexコンテナの先頭に寄せる / 初期値）
  • left（左寄せ）
  • normal（デフォルトの状態）
  • right（右寄せ）
  • space-around（要素の「まわり」に均等な余白を作る）
  • space-between（要素の「間」だけに余白を作り、両端を揃える）
  • space-evenly（要素の「間」と「両端」すべてに均等な余白を作る）
  • start（先頭寄せ）
  • stretch（要素をコンテナいっぱいに広げる）
  • inherit（親要素の設定を引き継ぐ）
  • initial（ブラウザの初期値に戻す）
  • revert（ブラウザ独自のスタイルを破棄して戻す）
  • revert-layer（カスケードレイヤーでの値を戻す）
  • unset（設定をリセットする）

calcの作った余白をjustify-contentで制御できますが、注意する点はcalcの作った余白で要素（ここでは２列になった文章・リンクなど）を押し込みます。値は要素の結果であり、calcの設置場所ではありません。仮に値をcenterと指示した場合、左右にcalcの作った余白を設置して中央に要素を押し込みます。

書き方の例）justify-content: space-between;

プロパティ：flex-direction

これは応用で使えます。
flex-directionへ指示しようとする値を親要素とし、HTML上でその下の値を子要素とします。
flex-directionは親要素から見て、子要素の並びの進行方向を指示します。

flex-direction の値（Value）一覧

  • column（上から下へ：縦並び）
  • column-reverse（下から上へ：縦の逆順）
  • row（左から右へ：横並び / 初期値）
  • row-reverse（右から左へ：横の逆順）
  • inherit（親要素の設定を継承する）
  • initial（ブラウザの初期値に戻す）
  • revert（ブラウザ独自のスタイルまで戻す）
  • revert-layer（カスケードレイヤーの設定を戻す）
  • unset（設定をリセットする）

書き方の例）flex-direction: column;
※このプロパティは次回で使います。

リストを２列にするプロパティと関数の基本5点セット

flex、flex-wrap、widht・calc、justify-content、これらを１列だったリストを２列にする為に必要不可欠な基本5点セットとして実際にコードを見ていきます。

まずは普通の縦に並んだリストのHTMLです。

<ul class="mikoto-grid">
  <li><a href="#">記事タイトル10文字程度</a></li>
  <li><a href="#">20文字程度の少し長めのタイトルです</a></li>
  <li><a href="#">30文字。グリッドを意識した美しい設計図の書き方について</a></li>
  <li><a href="#">静謐な空間を構築するために必要な、余白とフォントサイズが織りなす比率の黄金律と設計思想について</a></li>
  <li><a href="#">余白と計算式が織りなす技術備忘録の新しい形</a></li>
  <li><a href="#">最後の6件目</a></li>
</ul>

これはごく普通のリストです。HTMLを書き込んだ順番どおりに上から下へ普通のリストとなります。

リストを２列にするプロパティと関数の基本5点セットを使い、指示を出していきます。

まず始めにmikoto-gridです。

  • display: flex
  • flex-wrap: wrap
  • justify-content: space-between

list-style: none これはリストの先頭の点を消します。paddingやmarginはおまかせです。ここではゼロです。

/* 親要素 */
.mikoto-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 左右の端を揃え、余白を中央へ */
  list-style: none;
  padding: 0;
  margin: 0;
}

次はmikoto-grid liです。

  • width: calc(50% – 10px)

margin-bottom: 20px;はリストの下の余白を調整しています。

/* 子要素 */
.mikoto-grid li {
  width: calc(50% - 10px); /* 50%から中央の隙間（20px） */
  margin: 10px 0;
  padding-bottom: 20px;
  border-bottom: 1px dotted #ccc; /* ドットの仕切り線 */          
}

次はmikoto-grid li a / mikoto-grid li a:hoverです。これはリンクの見た目です。

リンク色や罫線の削除、文字の太さ、それと行間です。行間の設定は文字の上下を簡単に調整できるので、設定していて損はありません。ついでにリンクホバー時に罫線を引く設定もしています。

/* リンク */
.mikoto-grid li a {
  color: #43577a;
  text-decoration: none; 
  font-weight: bold;
  line-height: 1.6;
}
.mikoto-grid li a:hover {
  text-decoration: underline;
}

3ブロックに分けて紹介したCSSを上から順に並べた結果が下のリストになります。縦１列だったリストが、２列になりました。

このリストのCSSは、実の所 @media screen and (min-width: 768px) { } で囲っています。そうする事でPC画面では２列。スマホ画面では１列となります。PCのブラウザで見ている方は、ブラウザを狭めたり、デベロッパーツールを使って、スマホ画面で見ると変化がはっきりと分かります。

だがし、これはPCとスマホの２つの設定がなければいけません。元々の設定があるので、見てられない程のデザイン崩れは起きませんが、PC用を作ればPC用、スマホ用を作ればスマホ用と、当たり前ですが、各種の設定が必要となります。

是非、Webサイトの模様替えに

２列に分けて、きちんとデザインを整えると見た目ガラッと変わりますからね。冒頭では整理整頓と言いましたが、たまの模様替えに使っても良いかもと思います。

今回は基礎編としました。次回は今回紹介だけのflex-directionと他を少しを交えて実用編としてFlexの使い方を紹介しようと思います。

コメント