これだけは身に付けてほしい、6つのCSSレイアウトパターン

ウェブデザイナーとして現場でコーディング業務をするまでに、これだけはきちんと書けるようになっていてほしい、6つのレイアウトパターンを優先度順に紹介します。

各パターンの解説も順次公開しますので、書いたらリンクを追加します。そちらではCSSの書き方だけではなく、どのようなパーツに使うのか、設計上の注意点、デザイナーに聞いておくべきことなども解説する予定です。

※ここでは初学者向けに単位をpxにしていますが、PC、モバイルとも柔軟に表示できるよう、remや%やvwを使用することも多いです

はじめての方はお読みください↓↓

1. 最大幅を制限して中央寄せ

スマートフォン

デスクトップ

技術用語で「コンテナ(container)」と呼ばれているパターンです。私がウェブ制作をはじめた20年ほど前からあるCSSレイアウトの基本であり、ほぼすべてのサイトで使用されています。

ウィンドウの左右に最低限の余白を設け、かつ左右marginをautoにして中央に寄せます。

.sample {
    width: calc( 100% - ( 20px * 2 ) );
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

詳しい解説はこちらをご覧ください。

2. 幅・高さ固定＋上下左右中央寄せ

ボタン

ページタイトル

幅と高さ（または高さのみ）が固定されている枠の中に、文字や画像が配置されているレイアウトです。大きなボタンを作成するために必須で、他にもページタイトルなどの背景が入った見出しなどで頻繁に書きます。

文字数や行数に関わらず中央を維持させるので、paddingではだめです。flexboxを使用します。昔はline-heightとか使っていましたねえ。

.sample01 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 480px;
    height: 70px;
    color: #fff;
    background-color: #f88800;
}

詳しい解説はこちらをご覧ください。

3. 左右の一方が固定、一方が可変＋上揃え

左右二段組になっていて、どちらか一方が固定幅、もう一方が残りの範囲を埋め、上揃えとなります。
ブログ記事、少し長い文章がある場所に使用されます。固定している側が画像ではなく、ブログの公開日やカテゴリーアイコンになっているパターンもあります。

サンプルの画像の場合、画像の上の辺と一行目の上がきれいに揃っています。画像加工ソフトでは上端揃えが簡単にできるので、よくこのようなカンプが来ますが、ウェブ制作では「行高さ」を考慮しなくては実現できません。詳しくは別記事で解説します。

.sample {
    display: flex;
}

.sample > * {
    flex: 1;
}

.sample__image {
    max-width: 150px;
}

.sample__contents {
    padding-left: 30px;
}

３と４の詳しい解説は、こちらをご覧ください。

4. 左右の一方が固定、一方が可変＋中央揃え

3と似ていますが、左と右が中央寄せになっています。下層ページ一覧など、あまり長いタイトルにならない記事一覧によく使用されます。

.sample {
    display: flex;
    align-items: center;
}

.sample > * {
    flex: 1;
}

.sample__image {
    max-width: 100px;
}

.sample__contents {
    padding-left: 30px;
}

5. 要素をマス目状に敷き詰める

スマートフォン

タブレット

デスクトップ

「マス目状に敷き詰める」と表現しましたが、技術用語で「グリッドレイアウト」と言います。
同じ形をした、いくつになるか予測できない要素（div, articleなど）を、画面内に均等に整列させます。それぞれの幅は端末ごとに変わり、一般にはスマートフォン2列、タブレット縦3列、タブレット横以上4列が定番です。

flexboxを使用する方法と、CSS Gridを使用する方法の2通りがありますが、サンプル画像のように高さも揃っていることがほとんどなので、CSS Gridを勧めます。

2023/02/04追記：
実際に使用されている主要サイトをみたところ、flexboxの採用が多いようなのでflexboxでの解説に変更しました。

「ウィンドウサイズを変えたときにどのように幅が変わるか」の解釈がデザイナーさんの意図と違って手戻りになることが、たまにあります。それについても別記事で書きます。

2023/02/04追記：
レアケースであり、この記事が必要な方には難しい内容なので割愛しました。

詳しい解説はこちらをご覧ください。

6. 要素を特定の場所に貼り付ける

サンプル画像が多いのでちょっとスクロール長いです…

スマートフォン

タブレット縦

タブレット横

デスクトップ

凝ったデザインになることが多い、メインビジュアルで必須のレイアウトです。技術用語では「絶対配置」などと呼ばれます。

要素を、HTMLで書いてある順番を無視して画面内の「どこか」にシールのように貼り付けます。サンプルでは「暮らしのコンシェルジュ」という見出しと女性のイラストが固定されています。要素同士が重なることがあり、その場合は重なり順も考慮しなくてはなりません。

calc()のおかげで、以前より短いコードで書けるようになりました。それも別記事で紹介します。

.sample {
    background-image: url(sample_bg.jpg);
    background-size: cover;
}

.sample__inner {
    position: relative;
}

.sample__title {
    position: absolute;
    bottom: 50%;
    left: 0;
}

.sample__image {
    position: absolute;
    bottom: 0;
    left: 0;
    /* ちょっと下にはみ出すデザインがよくある */
    transform: translateY(15%);
}

まとめ

これだけは身に付けてほしい、と言いますか、ぶっちゃけウェブサイトの8割くらいはこの6つだけでできています。
一見複雑なデザインであっても、1と5の組み合わせとか、3の中に2や4が入っているパターンだったりします。

どのパターンを使ったら良いかを書き始める前に判断できるようになれば、思うように作れなくてやり直し…という手戻りが減り、フリーランスであれば収益につながっていきます。

CSSの学習はボリュームが多く、何から手を付けたらよいかわからないと思いますが、少なくともここで紹介した6つはすぐ書けることを目指してください。
なお「すぐ書ける」とは「暗記する」という意味ではありません。世の中には「スニペットツール」という素晴らしい文明の利器があります。頻繁に使うことがわかっているなら、コマンド一発で呼び出せるようにして、他のことに脳の容量を使いましょう。

今回はここまで。
このブログが、皆さんに必要なくなることを願っています。