CSS3 備忘録

Flexboxを使った2カラム・マルチレイアウトの基本

2カラムの基本パターン

一番基本的なWebサイトの2カラムのレイアウト。まずはこのレイアウト制作を身につけたいですね。下記の黄色（メイン）とピンク（サイド）の部分をFlexboxで組んでいます。レスポンシブデザインに対応させるため、基本的なコーディングではすべて1カラムにし、メディアクエリーでデスクトップ用に2カラムのスタイルを適応させます。1カラムと2カラムに変わるブレイクポイントは801pxに設定しました。また、黄色（メイン）とピンク（サイド）の比率を 2 : 1 にしています。

Flexboxって何？ 便利なの？

Flexboxとは、Flexible Box Layout Module （フレキシブル ボックス レイアウト モジュール）のことです。なんだか横文字ばかりで、よくわからないですが、要するにその名の通り柔軟性があり簡単にレイアウトが組めちゃうという、とても優れものなんですョ。

もともとFlexboxはCSS3で採用されたもので、ボックスレイアウトの進化系とでも言うべきものなんです。ところが草稿段階で大幅な仕様変更が２度もあったせいで、これまでは使いづらい機能であったのも事実です。

今はもうすっかり定着した感がありますから、これからは積極的に使っていけそうです。

Flexboxでできること

  1. 簡単な指定で要素を横並びにできる。
  2. 要素を並べる順番に指定できる。
  3. どちらに向かって要素を並べるか決められる。
  4. ボックス内の要素のサイズを自由に指定できる。
  5. 要素の上下中央揃えを指定できる。

html

<div class="flexbox">
　　　<section class="main">
　　　　<h1>Flexboxって便利なの？</h1>
　　　　<p>Flexboxとは、Flexible Box Layout Module （フレキシブル ボックス レイアウト モジュール）のことで……</p>
　　　</section>
　　　<section class="side">
　　　　<h2>Flexboxでできること</h2>
　　　　<ol>
　　　　　　<li>簡単な指定で要素を横並びにできる。</li>
　　　　　　<li>要素を並べる順番に……</li>
　　　　</ol>
　　　</section>
</div>

CSS

.main {
　　　background: #fcc;
　　　margin-bottom: 10px;
}
.side {
　　　background: #fea;
}
.main,
.side {
　　　padding: 2%;
　　　border-radius: 10px;
}

@media screen and (min-width: 801px){
　　　.flexbox {
　　　　　　-webkit-display: flex;
　　　　　　display: flex;
　　　}
　　　.main {
　　　　　　margin: 0 16px 0 0;
　　　　　　-webkit-flex: 2;
　　　　　　flex: 2;
　　　}
　　　.side {
　　　　　　-webkit-flex: 1;
　　　　　　flex: 1;
　　　}
}

同じhtmlで表示の順番を変えて、サイドを固定、メインを可変に

基本的なhtmlは上と同じものを使用しています。SEO的に見てもこのメリットは大きいと思います。
下記はサイドのサイズを300pxに固定し、メインは可変のレイアウトにしました。

Flexboxって何？ 便利なの？

Flexboxとは、Flexible Box Layout Module （フレキシブル ボックス レイアウト モジュール）のことです。なんだか横文字ばかりで、よくわからないですが、要するにその名の通り柔軟性があり簡単にレイアウトが組めちゃうという、とても優れものなんですョ。

もともとFlexboxはCSS3で採用されたもので、ボックスレイアウトの進化系とでも言うべきものなんです。ところが草稿段階で大幅な仕様変更が２度もあったせいで、これまでは使いづらい機能であったのも事実です。

今はもうすっかり定着した感がありますから、これからは積極的に使っていけそうです。

Flexboxでできること

  1. 簡単な指定で要素を横並びにできる。
  2. 要素を並べる順番に指定できる。
  3. どちらに向かって要素を並べるか決められる。
  4. ボックス内の要素のサイズを自由に指定できる。
  5. 要素の上下中央揃えを指定できる。

html

<div class="flexbox">
　　　<section class="main2">
　　　　<h1>Flexboxって便利なの？</h1>
　　　　<p>Flexboxとは、Flexible Box Layout Module （フレキシブル ボックス レイアウト モジュール）のことで……</p>
　　　</section>
　　　<section class="side2">
　　　　<h2>Flexboxでできること</h2>
　　　　<ol>
　　　　　　<li>簡単な指定で要素を横並びにできる。</li>
　　　　　　<li>要素を並べる順番に……</li>
　　　　</ol>
　　　</section>
</div>

CSS

.main2 {
　　　background: #fcc;
　　　margin-bottom: 10px;
}
.side2 {
　　　background: #fea;
}
.main2,
.side2 {
　　　padding: 2%;
　　　border-radius: 10px;
}

@media screen and (min-width: 801px){
　　　.flexbox {
　　　　　　-webkit-display: flex;
　　　　　　display: flex;
　　　}
　　　.main2 {
　　　　　　margin: 0 16px 0 0;
　　　　　　-webkit-flex: 1;
　　　　　　flex: 1;
　　　　　　-webkit-order: 2;
　　　　　　order: 2;
　　　}
　　　.side2 {
　　　　　　width: 300px;
　　　　　　-webkit-order: 1;
　　　　　　order: 1;
　　　}
}

これまでのところを簡単におさらいしてみると、親要素のdisplayプロパティに「flex」を指定するだけで flexboxレイアウトが組める。子要素の flexアイテムでサイズを指定したり、順番を決めることができる。

その他にも flexアイテムではボックスを右から流したり、等間隔に均等割りしたり、縦に積み上げるなど…いろいろな指定があります。