flexboxを使って要素を横並びにする【CSSの書き方入門】

赤線で囲った部分は、横並びで表示されるように設定します。

要素を横並びにする方法の一つに、Flexboxという仕組みがあります。
今回はこのFlexboxを使ってみましょう。

Flexboxとは

Flexboxは正式名称「Flexible Box Layout Module」というレイアウトモジュールです。
簡単に言ってしまえば、Webページ内の要素を並べるためのキットのようなものです。

基本的な使い方は簡単。
Flexレイアウトで並べたい要素の親要素にdisplay: flex; と指定するだけです。
ulタグで試してみましょう。

ul {
  display: flex;
}

ちょっと重なっていて見にくいですが、これだけでulタグの中身が横並に並びましたね。

Flexboxの仕組み

Flexboxは、親要素のflexコンテナ、子要素のflexアイテムで構成されています。
デフォルトでは、flexコンテナ内の要素は横に並べられます。

先程書いたdisplay: flex;は「この要素をflexコンテナにする」という指示です。
flexコンテナ内の要素は、自動的にflexアイテムとして扱わます。
このため、<li>タグの項目が横に並べられたのです。

mainとasideを横並びにする

index.htmlでもう一箇所、横並びにしたい箇所<main>と<aside>があります。

Flexコンテナは、中の要素を全てflexアイテムにしてしまいます。
footerなども横並びになると面等なので、<main>と<aside>だけを囲うdivを作りましょう。

<div class="row">
  <main>
    ...
  </main>
  <aside>
    ...
  </aside>
</div>

Flexコンテナ用のdivには「row」というクラス名を付けました。
rowは“行”を意味する言葉なので、横並びにしたい箇所の囲いによく使います。

先ほどと同じようにcssでdisplay: flex;を指定して、Flexコンテナ化してみましょう。

.row{
  display: flex;
}

mainとasideが横に並びました。

Flexアイテムの幅を指定する

このままでは、asideの方が狭いですね。
どのくらいの幅にするかを指定してあげましょう。

.row{
  display: flex;
}

main {
  flex: 3;
}

aside {
  flex: 1;
}

使用した「flex」というCSSプロパティは、フレックスアイテム専用のプロパティです。
その要素をどのくらいの大きさで、Flexコンテナ内に配置するかを決めることができます。

今回のように数字を1つだけ書くと、Flexコンテナ内に占める比率として扱ってくれます。

style.cssを上書き保存。
ブラウザを再読込すると、aside部分が少し広がります。

Flexboxについて詳しく知りたい方は動画講座がオススメです

ページのスタイルを整える

ここまでで、index.htmlの大まかなレイアウトは出来ました。
サイトが見ている人が見やすいように、表示を綺麗にしていけば完成です!

ヘッダーのリンク部分

黒丸「・」が重なってしまっている、ヘッダーのli項目を綺麗に並べます。

リストの項目前に表示されているマークをリストマークと呼びます。

デフォルトでのリストマークは、ulは黒丸(・)、olなら数字。
ですが、CSSの「list-style」プロパティを使えばを変更することも、表示を無くすことも出来ます。今回は無くしたいのでnoneと指定してみましょう。

style.cssを書き足していくときには、要素(セレクタ)の親子関係を意識しながら書くようにすると分かりやすいです。

list-style: none;を指定すると、黒丸「・」が消えました。

せっかくですから、もう少し見やすくにしましょう。

①はulのpaddingをゼロに
②はliに対してmargin-rightを追加
すると実現できます。

ul {
  display: flex;
  padding: 0;
}

li {
  list-style: none;
  margin-right: 1rem;
}

mainとasideの間隔

FlexBoxを使って横並びにしたmainとaside。
2つの間に少し間隔があったほうが、左右が別パートだと分かりやすそうですね。

<main>の右側にmarginを加えましょう。

main {
  flex: 3;
  margin-right: 3rem;
}

赤の点線部分が追加したmarginです。
間が空いたことで、見やすさがアップしたのではないでしょうか?

これでindex.htmlは完成です!

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る

×