東京のWeb制作会社LIGLIGならできるおもしろいこと。フロントエンドシェアこんにちは。エンジニア特化型Q&Aサイト「teratail」のDevRelを担当している、DevRelライターの木下です。非エンジニア目線で書くWebプログラミング超入門記事、連載5回目です。これまでの連載ではHTMLで自己紹介ページをつくり、それをブラウザに表示したり、CSSで装飾したり、CSSのファイルを書き出したりしてきました。今回は「<div>タグ」というものと、CSSの「float」という命令を使って、CSSでレイアウトを調整するための第1歩を踏み込もうと思います。今回のゴール完成図は上記です。アイコン画像の周りに「水色の箱」ができていて、隣には名前やニックネームが入った「緑の箱」ができていますね。今回はこのように要素をグループ化する「箱を作る」というのと、「その箱を隣同士に並べる」というのをやっていこうと思います。これをマスターすれば、CSSでできることがかなり増えるので、楽しくなると思います。配色が気持ち悪いですが、これは後々消していきますのであしからず。毎度恒例ですが、前回分のコードとブラウザの表示を確認しておきます。コードは「profile.html」と「profile.css」の2つがありました。class="sub_detail">全力に真面目に、全力に不真面目に生きております。人生楽しくがモットーです。center;}divタグで囲って「箱作り」をしようスタートとゴールを確認したところで、さっそく始めましょう!まずは「箱作り」から。「箱作り」には<div>タグを使います。divとは「division(区分)」の略で、複数のHTMLタグを1つのグループにするもの。<div>〜</div>で囲ったところがグループ化します。そのグループ化した「箱」にidやclassの名前をつけて、CSSの指示を出すことができます。......ひとまず小難しいことは置いといて、さっそく始めてみましょう。<div>タグを使う&id名とclass名をつけるまずはprofile.htmlの方を書き換えていきます。後で詳しく説明するので、ひとまず手を動かしてやってみましょう。<p>タグを<div>に変更してみてください。-->に書き換えます。このように、profile.htmlの全部の<p>タグを<div>にします。ついでにインデント(字下げ)を入れて見やすくしておくのをおすすめします。インデントを入れたいところでTabキーを押すだけでOKです。ニックネーム:afroscript</div>インデントを整えたところで、<div>タグの中にさらに<div>タグを作っていきます。width="300px">を<div>タグで囲み、その<div>タグにid名「icon_img」とつけてください。「名前」と「ニックネーム」のところを<div>タグで囲み、その<div>タグに「name」というid名をつけます。下記のような感じです。class="sub_title">のところにid名「comment」を付け加えましょう。下記のようになります。id="comment">シレッと書きましたが、上記のように1つのタグに対して、class名とid名、どちらもつけられます。class="sub_title">でもOKです。全体のコードは下記のようになります。全力に真面目に、全力に不真面目に生きております。人生楽しくがモットーです。-->書き換えたらリロードしてみましょう。表示は上記のようにほとんど変わりませんが、各要素の間が若干広がったかと思います。(ブラウザや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に指定。コードは下記のようになります。LightGreen;}すると、ブラウザの表示は下記のようになるはずです。青い箱と緑の箱ができてますね。箱が2つとも左に寄っていますが、これはデフォルトが左寄せだからです。タグや「名前:木下雄策」「ニックネーム:afroscript」に対してはtext-align:centerの指示が出されているため中央寄りになっています。使っている画像のサイズ等によっては表示が違うと思います。height="300px">などに指定するなど、widthやheightをいろいろ変えてみてください。ちなみに今回の場合だと、青と緑の箱を中央寄せにするには、親要素(id=”icon_img”やid=”name”がついたdivタグ)にtext-align:centerと書いても中央寄せにはなりません。auto;」と書きますが、深く追求するのはやめておきます。気になる方は「インライン要素」や「ブロック要素」などで調べてみてください。この青い箱と緑の箱を横に並べてみましょう。floatを使って「箱を隣同士に並べる」さて後半戦です。<div>タグで「箱をつくる」というイメージがついてきたら、次は「箱を横に並べる」というのをやってみます。divで作った箱を横に並べるにはCSSのfloatという命令を使います。floatを使えば、divで作った箱を左右に寄せられます。float:left;で左寄せ、float:right;で右寄せです。今回はアイコン画像が入っている「img_icon」というid名がついた箱と、名前とニックネームが入っている「name」というid名がついた箱を横に並べたいので、その2つに対してCSSでfloat:leftの指示を出していきます。profile.cssに下記のように書き加えてください。*/}すると表示は、下記のようになると思います。確かに青い箱(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;を宣言しましょう。both;}すると表示は、このようになるはずです。id=”comment”以下が左寄せの呪縛から解き放たれていますね。いうことで今回はここまでにしておきましょう。次回はもう少しデザインを整えます。青と緑の箱が横に並んだのはいいのですが、これらを真ん中に寄せたいとか、名前やニックネームの文字が小さいとか、もろもろ気になるところがあります。そのあたりを整えていきたいと思います。まとめ今回は以下のことを学びました。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。