要素を横並びにする

もっと巧みにレイアウトをしたいというニーズにお応えして、要素を横並びにする色々な方法についてご説明しますので、試してみてください。

float

初心者がつまづきやすいと言われているfloatです。画像などを避けた形で文章が回り込み雑誌のようなレイアウトが可能になります。以下の例は青い資格を回り込んでテキストが配置される簡単な例です。floatは、右側に回り込ませる場合はleft、左側に回り込ませる場合はrightを指定します。

【CSS】
.container{
width: 300px;
}

.sample1 {
background-color: blue;
width: 150px; height: 100px;
float: left;
}

【HTML】

テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。

flexbox

Flexboxは、シンプルなコード記述でレイアウト調整がスムーズにできるのが特徴です。親要素に指定したflexプロパティにより、子要素の配置を自由に変更できます。flexboxには色々な種類のプロパティがあります。ここでは、「display: flex;」を使って子要素を横並びにする例をご紹介します。

【CSS】
.container {
display: flex;
}
.flexbox {
color: white;
font-size: 15px;
text-align: center;
margin-right: 5px;
padding: 20px;
width: 100px;
}
.sample1 { background: orange }
.sample2 { background: blue }
.sample3 { background: pink }
.sample4 { background: green }
.sample5 { background: aqua }

【HTML】

テスト1
テスト2
テスト3
テスト4
テスト5

grid

gridをマスターすると、面白いレイアウトが作れるようになります。floatとflexboxではできなかったコンテンツの細かい配置指定が可能になります。たとえば、以下のように「display: grid; 」を指定して、grid-template-columnsで分割する列を指定できます。例の場合、200pxとfrで指定するメインコンテンツスペース、150pxの3分割になります。gridは組み方により、複雑に見えるレイアウトも作れ、詳細は割愛しますが、覚えておくとかなり使えるものです。

.container{
display: grid;
grid-template-columns: 200px 1fr 150px;
}