divタグとレイアウト

HTMLにはレイアウトするためのdivタグが用意されています。この記事ではCSS初心者向けにdivタグの使い方とレイアウトを変える方法を説明しています。

divタグの使い方
中央揃えにする方法
1. 余白を均等に左右に分ける
2. 表示の確認
レイアウトに便利なFlexbox
まとめ

divタグの使い方

このようなページがあったとして、 header領域にある要素を中央寄せにしたいとします。divタグを使う方法は沢山ありますが、このようにレイアウトを変えたい時にもdivタグを使います。

heade内HTMLの見本

今回はheader内の全ての要素を中央寄せにするので、header内をdivタグで囲います。

スタイリングの為の識別子 class属性

divタグは文書の中でも使う場所が多いので、どのdivタグか分かるようにclass属性を付けます。また、class属性の名前は自由に決めることができるので、その場所が分かるような名前をアルファベットで決めます。

書き方

今回はまとめて動かす意味で container と名前を付けましたが自由に決めて大丈夫です。今ソースコードは以下のようになっています。

class属性を指定してレイアウトを変更

スタイルシートの方で、.（ドット）と付けた名前でセレクターとして指定することができます。

今回はcontainerと名前を付けていたので、.containerでセレクターとして指定が可能になります。

試しに背景色を黄色に設定し、横幅を400pxにしてみます。コードは以下の通りです。

.container {
  background: yellow;
  width: 400px;
}

表示の確認

上手くいっていると、背景色が変わり width（横幅）も400pxになって表示されています。

中央揃えにする方法

headerの今の状態を簡単に表すとこのようになっています。divタグで囲った部分が左寄せになって、右にmargin（外側の余白） がある状態です。

余白を均等に左右に分ける

中央揃えにする方法はいくつかありますが、このように余った余白を均等に左右に振り分ける方法が良く使われています。

考え方としてはdivタグに左右同じ分の margin（外側の余白）を与える感じになります。書き方は以下のようになります。

書き方

divタグは container で指定しているので、プロパティは margin、値は上下必要ないので 0 左右は auto と書くと均等にしてくれます。

margin: 0 auto;

プロパティに対して値の書き方はいくつかあり、上記の指定の方法が良く分からないという方は以下の記事を参考にできます。

プロパティと値の書き方

ある程度出来上がったHTML文書にCSSを使い、プロパティと値の書き方を中心に文字の色やフォント、背景色の変え方を説明した記事です。

表示の確認

このように中央表示されるようになります。

レイアウトに便利なFlexbox

今度は中央表示させたdivの中身をレイアウトしたいと思います。プロフィール写真を左側に、名前とその他を右側に表示させます。

方法はいくつかありますが、今回は Flexbox を使いたいと思います。

分けたい部分をdivで囲う

containerという名前を付けたdivの中で、分けたい要素をまたdivで囲います。復習になりますが、どのdivか分かるようにclass属性で名前を付けます。今回は、左側に表示するプロフィール写真をmy-picture、その他右側に表示したいものをmy-infoという名前を付けました。

<header>
  <div class="container">

    <div class="my-picture">
      <!--左側のプロフィール写真-->
    </div>

    <div class="my-info">
       <!--右側に表示させるその他-->   
    </div>

  </div>
</header>