こんにちは。エンジニア特化型Q&Aサイト「teratail」のDevRelを担当している、DevRelライターの木下です。非エンジニア目線で書くWebプログラミング超入門記事、連載5回目です。 さて、これまでの連載ではHTMLで自己紹介ページをつくり、それをブラウザに表示したり、CSSで装飾したり、CSSのファイルを書き出したりしてきました。今回は「<div>タグ」というものと、CSSの「float」という命令を使って、CSSでレイアウトを調整するための第1歩を踏み込もうと思います。 今回のゴール 完成図は上記です。アイコン画像の周りに「水色の箱」ができていて、隣には名前やニックネームが入った「緑の箱」ができていますね。今回はこのように要素をグループ化する「箱を作る」というのと、「その箱を隣同士に並べる」というのをやっていこうと思います。これをマスターすれば、CSSでできることがかなり増え
![CSSでレイアウトを調整する第1歩!divタグで箱を作り、floatで横に並べてみよう | 株式会社LIG(リグ)|DX支援・システム開発・Web制作](https://cdn-ak-scissors.b.st-hatena.com/image/square/51d73fcdd6c84b5f6fc9771a219cf772c967a696/height=288;version=1;width=512/https%3A%2F%2Fliginc.co.jp%2Fwp-content%2Fuploads%2F2016%2F04%2Feyecatch111-1.png)