CSSでレイアウトを調整する第1歩！divタグで箱を作り、floatで横に並べてみよう

こんにちは。エンジニア特化型Q&Aサイト「teratail」のDevRelを担当している、DevRelライターの木下です。非エンジニア目線で書くWebプログラミング超入門記事、連載5回目です。

さて、これまでの連載ではHTMLで自己紹介ページをつくり、それをブラウザに表示したり、CSSで装飾したり、CSSのファイルを書き出したりしてきました。今回は「<div>タグ」というものと、CSSの「float」という命令を使って、CSSでレイアウトを調整するための第1歩を踏み込もうと思います。

今回のゴール

完成図は上記です。アイコン画像の周りに「水色の箱」ができていて、隣には名前やニックネームが入った「緑の箱」ができていますね。今回はこのように要素をグループ化する「箱を作る」というのと、「その箱を隣同士に並べる」というのをやっていこうと思います。これをマスターすれば、CSSでできることがかなり増えるので、楽しくなると思います。

ちょっと配色が気持ち悪いですが、これは後々消していきますのであしからず。

前回のコードと画像

毎度恒例ですが、前回分のコードとブラウザの表示を確認しておきます。ここがスタートです。コードは「profile.html」と「profile.css」の2つがありました。

profile.html

<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="profile.css">

<h1 id="main_title">Who am I !?</h1>
<p class="sub_detail">
<img src="afroscript.png" width="300px"><br>
名前:木下雄策<br>
ニックネーム:afroscript
</p>

<h2 class="sub_title">コメント</h2>
<p class="sub_detail">
全力に真面目に、全力に不真面目に生きております。人生楽しくがモットーです。
</p>

<h2 class="sub_title">base_data</h2>
<p class="sub_detail">
誕生日: 1988.10.10<br>
性別: 男<br>
趣味: スノボ(グラトリ専門),バスケ<br>
特技: ビートボックス,フリースタイルバスケットボール<br>
</p>

<h2 class="sub_title">work</h2>
<p class="sub_detail">
今の仕事: teratailの広報<br>
できること: 広報,営業,プロモーション企画/ディレクデョン,プログラミング(少々)<br>
職歴: エンジニア業界の営業(約2年)、teratail広報(約10ヶ月)
</p>

profile.css

#main_title {
    text-align:center;
    color:white;
    background-color:black;
}

.sub_title {
    text-align: center;
    background-color: LightGrey;
    color: white;
}

.sub_detail {
    text-align: center;
}

divタグで囲って「箱作り」をしよう

スタートとゴールを確認したところで、さっそく始めましょう！

まずは「箱作り」から。「箱作り」には<div>タグを使います。divとは「division（区分）」の略で、複数のHTMLタグを1つのグループにするもの。<div>〜</div>で囲ったところがグループ化します。

そのグループ化した「箱」にidやclassの名前をつけて、CSSの指示を出すことができます。……ひとまず小難しいことは置いといて、さっそく始めてみましょう。

<div>タグを使う&id名とclass名をつける

まずはprofile.htmlの方を書き換えていきます。後で詳しく説明するので、ひとまず手を動かしてやってみましょう。まずは<p>タグを<div>に変更してみてください。

<p class="sub_detail">
<img src="afroscript.png" width="300px"><br>
名前:木下雄策<br>
ニックネーム:afroscript
</p>

上記のコードを、

<div class="sub_detail">　<!-- <p>を<div>に変更 -->
<img src="afroscript.png" width="300px"><br>
名前:木下雄策<br>
ニックネーム:afroscript
</div>　<!-- </p>を</div>に変更 -->

に書き換えます。このように、profile.htmlの全部の<p>タグを<div>にします。

ついでにインデント（字下げ）を入れて見やすくしておくのをおすすめします。インデントを入れたいところでTabキーを押すだけでOKです。（後々複雑になってくると見づらくなるので、今のうちにインデントで見やすくするクセを付けておきましょう）

<div class="sub_detail">　<!-- 以下にインデントを入れて見やすくする -->
    <img src="afroscript.png" width="300px">
    名前:木下雄策<br>
    ニックネーム:afroscript
</div>

インデントを整えたところで、<div>タグの中にさらに<div>タグを作っていきます。<img src="afroscript.png" width="300px">を<div>タグで囲み、その<div>タグにid名「icon_img」とつけてください。

さらに「名前」と「ニックネーム」のところを<div>タグで囲み、その<div>タグに「name」というid名をつけます。下記のような感じです。

<div class="sub_detail">
    <div id="icon_img"> <!-- ここに<div>タグとid名を追加 -->
        <img src="afroscript.png" width="300px">
    </div>　<!-- ここに</div>を追加 -->
    <div id="name"> <!-- ここに<div>タグとid名を追加 -->
        名前:木下雄策<br>
        ニックネーム:afroscript
    </div>　<!-- ここに</div>を追加 -->
</div>

また、<h2 class="sub_title">のところにid名「comment」を付け加えましょう。のちほど使います。下記のようになります。

<h2 class="sub_title" id="comment">

シレッと書きましたが、上記のように1つのタグに対して、class名とid名、どちらもつけられます。class名とid名を書く順番はどちらでもいいので、<h2 id="comment" class="sub_title">でもOKです。全体のコードは下記のようになります。

<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="profile.css">

<h1 id="main_title">Who am I !?</h1>
<div class="sub_detail">　<!-- <p>を<div>に変更 -->
    <div id="icon_img"> <!-- ここに<div>タグとid名を追加 -->
        <img src="afroscript.png" width="300px">　
    </div>　<!-- ここに</div>を追加 -->
    <div id="name"> <!-- ここに<div>タグとid名を追加 -->
        名前:木下雄策<br>
        ニックネーム:afroscript
    </div>　<!-- ここに</div>を追加 -->
</div>　<!-- </p>を</div>に変更 -->

<h2 class="sub_title" id="comment">コメント</h2> <!-- ここにid名を追加 -->
<div class="sub_detail"> <!-- <p>を<div>に変更 -->
    全力に真面目に、全力に不真面目に生きております。人生楽しくがモットーです。
</div>　<!-- </p>を</div>に変更 -->

<h2 class="sub_title">base_data</h2>
<div class="sub_detail"> <!-- <p>を<div>に変更 -->
    誕生日: 1988.10.10<br>
    性別: 男<br>
    趣味: スノボ(グラトリ専門),バスケ<br>
    特技: ビートボックス,フリースタイルバスケットボール<br>
</div> <!-- </p>を</div>に変更 -->

<h2 class="sub_title">work</h2>
<div class="sub_detail"> <!-- <p>を<div>に変更 -->
    今の仕事: teratailの広報<br>
    できること: 広報,営業,プロモーション企画/ディレクデョン,プログラミング(少々)<br>
    職歴: エンジニア業界の営業(約2年)、teratail広報(約10ヶ月)
</div>　<!-- </p>を</div>に変更 -->

書き換えたらリロードしてみましょう。

表示は上記のようにほとんど変わりませんが、各要素の間が若干広がったかと思います。（ブラウザやOSによって挙動が少しだけ変わります）

<div>タグの”箱”感を分かりやすくする

<div>タグで「箱を作る」と言っていましたが、箱感が全然分かりづらいので少し加工してみます。さきほど追加した「#icon_img」と「#name」にwidth（横幅）、height（縦幅）、background-color（背景色）を指定してみましょう。profile.cssに下記の指示を書き加えてみてください。

• 「#icon_img」のwidthを300px、heightを300px、background-colorをLightBlueに指定。
• 「#name」のwidthを680px、heightを300px、background-colorをLightGreenに指定。

コードは下記のようになります。

#main_title {
    text-align:center;
    color:white;
    background-color:black;
}

.sub_title {
    text-align: center;
    background-color: LightGrey;
    color: white;
}

.sub_detail {
    text-align: center;
}
/* ここを書き加える */
#icon_img {
    width: 300px;
    height: 300px;
    background-color: LightBlue;
}

#name {
    width: 680px;
    height: 300px;
    background-color: LightGreen;
}

すると、ブラウザの表示は下記のようになるはずです。

青い箱と緑の箱ができてますね。箱が2つとも左に寄っていますが、これはデフォルトが左寄せだからです。箱の中身のタグや「名前：木下雄策」「ニックネーム：afroscript」に対してはtext-align:centerの指示が出されているため中央寄りになっています。

※補足

使っている画像のサイズ等によっては表示が違うと思います。そのときは画像を<img src="afroscript.png" width="300px" height="300px">などに指定するなど、widthやheightをいろいろ変えてみてください。ちなみに今回の場合だと、青と緑の箱を中央寄せにするには、親要素（id=”icon_img”やid=”name”がついたdivタグ）にtext-align:centerと書いても中央寄せにはなりません。この場合は「margin: 0 auto;」と書きますが、深く追求するのはやめておきます。気になる方は「インライン要素」や「ブロック要素」などで調べてみてください。

ひとまず箱ができるイメージはつきましたか？　では、この青い箱と緑の箱を横に並べてみましょう。

floatを使って「箱を隣同士に並べる」

さて後半戦です。<div>タグで「箱をつくる」というイメージがついてきたら、次は「箱を横に並べる」というのをやってみます。

divで作った箱を横に並べるにはCSSのfloatという命令を使います。floatを使えば、divで作った箱を左右に寄せられます。float:left;で左寄せ、float:right;で右寄せです。

今回はアイコン画像が入っている「img_icon」というid名がついた箱と、名前とニックネームが入っている「name」というid名がついた箱を横に並べたいので、その2つに対してCSSでfloat:leftの指示を出していきます。profile.cssに下記のように書き加えてください。

#main_title {
    text-align:center;
    color:white;
    background-color:black;
}

.sub_title {
    text-align: center;
    background-color: LightGrey;
    color: white;
}

.sub_detail {
    text-align: center;
}

#icon_img {
    width: 300px;
    height: 300px;
    background-color: LightBlue;
    float: left; /* ここを書き加える */
}

#name {
    width: 680px;
    height: 300px;
    background-color: LightGreen;
    float: left; /* ここを書き加える */
}

すると表示は、下記のようになると思います。

確かに青い箱（id=”icon_img”）と緑の箱（id=”name”）は左寄せされていますが、それにつられてそのあとの要素まで隣に入り込んでしまっています。

なぜかというと、ある要素にfloatの指示を出すと、それ以降のものも全てがつられて左寄せになるからです。詰められるだけどんどん詰めてきます。なので、どこかで「左寄せ（float:left;）はここまでだよ」と宣言をしてあげないといけません。

clear:both;でfloatの終わりを宣言する

floatの終わりを宣言するためには、左寄せをしない要素に対して、「ここからはfloat必要ありません」と宣言をします。宣言は、CSSでclear:both;と書けばOKです。

今回はid=”icon_img”の箱と、id=”name”の箱だけを左寄せすればOKなので、その次の要素であるid=”commennt”をつけた箱に対してclear:both;を宣言しましょう。

#main_title {
    text-align:center;
    color:white;
    background-color:black;
}

.sub_title {
    text-align: center;
    background-color: LightGrey;
    color: white;
}

.sub_detail {
    text-align: center;
}

#icon_img {
    width: 300px;
    height: 300px;
    background-color: LightBlue;
    float: left;
}

#name {
    width: 680px;
    height: 300px;
    background-color: LightGreen;
    float: left;
}
/* ここを書き加える */
#comment {
    clear: both;
}

すると表示は、このようになるはずです。

ちゃんとid=”comment”以下が左寄せの呪縛から解き放たれていますね。

ということで今回はここまでにしておきましょう。次回はもう少しデザインを整えます。青と緑の箱が横に並んだのはいいのですが、これらを真ん中に寄せたいとか、名前やニックネームの文字が小さいとか、もろもろ気になるところがあります。そのあたりを整えていきたいと思います。

まとめ

今回は以下のことを学びました。

• 複数のHTMLタグを一つのグループにしたい時は<div>タグで囲む
• 「<div>タグで囲む」というのは箱を作るイメージ
• <div>タグにもクラス名やid名をつけることができ、CSSの指示を出せる
• 左寄せを指示するCSSは、float:left;
• 左寄せの終わりを宣言するには、左寄せをしない要素にclear:both;という指示を出す

では、次回もお楽しみに！

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。