プログラミング
 Computer >> コンピューター >  >> プログラミング >> プログラミング

Flexboxで作るレスポンシブWebサイトレイアウト完全ガイド【初心者向けステップ解説】

Flexbox（フレックスボックス）は、比較的新しいフロントエンドの機能で、Webサイトのレイアウト構築、そしてレスポンシブ対応を、従来よりも格段に簡単にしてくれるものです。

かつてWebサイトを作るには、floatを使ったグリッドや、さらにはテーブルレイアウトを駆使して、思い通りの見た目を実現する必要がありました。しかし、これらの手法はレスポンシブデザイン、つまりデスクトップ・タブレット・モバイルなど、あらゆるデバイスで美しく表示させることにはあまり向いていません。

最新のWeb開発トレンドにキャッチアップしたいのであれば、Flexboxの使い方は必ずマスターしておきましょう。floatグリッドは急速に過去のものになりつつあります。

この記事では、シンプルなレスポンシブWebサイトレイアウトを構築する手順を、ステップバイステップで解説していきます。

このチュートリアルで行うこと

  1. モバイル・タブレット・デスクトップそれぞれのレイアウトをワイヤーフレームでスケッチする
  2. セマンティックなHTMLとCSSで基本レイアウトのコーディングを開始する
  3. セクションごとに残りのレイアウトを組み上げていく
  4. CSSではモバイルファーストのアプローチを採用し、小さい画面幅から順にスタイルを作成し、徐々に大きい幅へと対応させていく

作業の進め方とともに思考プロセスも丁寧に説明し、実践で役立つベストプラクティスも紹介します。それでは始めましょう！

ステップ1：Webサイトレイアウトのワイヤーフレームを作成する

ワイヤーフレームとは、Webサイトの構成要素を図式化したものです。デザインに近いほど詳細なものもあれば、主要なポイントだけを記したシンプルなものもあります。

今回は非常にシンプルなワイヤーフレームを使用します。Webサイトをコアとなるセクションに分解し、各セクションがモバイル・タブレット・デスクトップでどのように表示されるかを決めていきます。

構築するセクションは、ヘッダー（Header）、ヒーロー（Hero）、コンテンツ（Content）、サイドバー（Sidebar）、フッター（Footer）です。

筆者はMockFlowというオンラインツールを使って基本的なワイヤーフレームを作成しています。

モバイルのレイアウト

Flexboxで作るレスポンシブWebサイトレイアウト完全ガイド【初心者向けステップ解説】

ご覧のとおり、サイドバーを含むすべてのセクションが、1本の縦長カラムに積み重なる形になっています。

この「スタッキング（積み重ね）」は、スマートフォンのような狭い画面にコンテンツを効率よく収めるための最も基本的な方法です。スマホの画面幅では、サイドバーをメインコンテンツの横に並べるのは現実的ではありません。横に並べるスペースがそもそもないからです。

タブレットのレイアウト

Flexboxで作るレスポンシブWebサイトレイアウト完全ガイド【初心者向けステップ解説】

画面幅が広がると、大きな違いが現れます。タブレットはスマホよりはるかに幅があるため、サイドバーをメインコンテンツの隣に配置できるようになります。すべてのセクションはタブレットの全幅を使用します。

デスクトップのレイアウト

Flexboxで作るレスポンシブWebサイトレイアウト完全ガイド【初心者向けステップ解説】

最も幅が広いデスクトップでは、非常にワイドなモニターでの見え方を考慮する必要があります。特に近年はウルトラワイド画面の普及が進んでいます。

もし大画面モニターでコンテンツを全幅に広げてしまうと、文章を読んだり視覚的に走査したりするのが難しくなります。左端から右端まで視線を強制的に移動させることを想像してみてください。負担が大きすぎて、ユーザーは離れてしまいます。

そこで、ワイドスクリーンでも読みやすさを保つために、コンテンツの最大幅を設定し、中央揃えにします。こうすることで、モニターがどれだけ大きくても、直感的に読みやすいレイアウトになります。

サイトの完成像が明確になったところで、いよいよ楽しいパート、HTMLとCSSでの構築に入りましょう！

ステップ2：基本構造とスタイルを構築する

HTML要素でレイアウトをマッピングする

作成したワイヤーフレームをもとに、各セクションに対応するHTML要素を作成します。

<body>内の最初のマークアップは以下のとおりです：

<!-- メインコンテンツ -->
<main>
    Main

    <!-- ヘッダー -->
    <header>
        Header
    </header>

    <!-- ヒーロー -->
    <section>
        Hero
    </section>

    <!-- コンテンツ -->
    <section>
        Content
    </section>

    <!-- サイドバー -->
    <aside>
        Sidebar
    </aside>
    
    <!-- フッター -->
    <footer>
        Footer
    </footer>

</main>

ワイヤーフレーム上の各要素が、HTML上の対応する要素になっているのがわかりますね。ここではまだ中身はプレースホルダーのテキストだけで、実際のコンテンツは入っていません。

基本的なCSSプロパティを追加する

次に、ごく基本的なCSSを追加して、レイアウトの見た目を整えていきましょう。

main, header, section, aside, footer {
    margin: 0;
    padding: 20px;
    border: 1px solid #000000;
    color: #ffffff;
}

main {
    background: #000000;
}

.header {
    background: #03a9f4;
}

.hero {
    background: #d22b1f;
}

.content {
    background: #129a22;
}

.sidebar {
    border: 1px solid #000000;
    background: #673ab7;
}

.footer {
    border: 1px solid #000000;
    background: #616161;
}

ここには示していませんが、box-sizing: border-box の設定やフォントスタイルといった汎用的なスタイルも必要です。ただ、この記事の目的上、意識すべきは上記のスタイルだけです。

筆者は要素にボーダーを付けるのが好きです。そうすると各要素の位置が把握しやすくなり、奇妙な問題のトラブルシューティングもしやすくなるからです。また、先ほどのワイヤーフレームに合わせて背景色も設定しています。

HTMLファイルをブラウザで開くと、次のように表示されます！

Flexboxで作るレスポンシブWebサイトレイアウト完全ガイド【初心者向けステップ解説】

お気づきかもしれませんが、この時点でサイトはモバイルのワイヤーフレームとほぼ同じ見た目になっています。デフォルトではすべての要素が縦に積み重なるからです。

プレースホルダーコンテンツを追加する

HTML要素を作成したら、プレースホルダーのコンテンツも追加しておくと良いでしょう。完成時に近い見た目を確認できるようになります。

凝る必要はありません。Lorem ipsum（ダミーテキスト）を各要素にコピー＆ペーストするだけでOKです。例えば、Hero要素の中身は以下のようになります：

<section class="hero">
    Hero
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sumenda potius quam expetenda. Nihil opus est exemplis hoc facere longius.
    </p>
</section>

すべての要素にLorem ipsumを追加すると、サイトは次のような見た目になります：

Flexboxで作るレスポンシブWebサイトレイアウト完全ガイド【初心者向けステップ解説】

いい感じですね！

ここで、各要素に異なる長さのダミーテキストを入れていることに注目してください。これは最終的なコンテンツのボリューム感を再現するためです。

モバイル向けにCSSを最適化する

これでモバイル向けレイアウトはほぼ完成です！

モバイルでサイトを見栄え良くするもうひとつのコツは、左右に均一なパディングを設けることです（必要なら上下にも）。

これによりユーザーにわずかな余白（呼吸のスペース）を与えられます。パディングもマージンもゼロだと、コンテンツが画面の端に密着して窮屈な印象になってしまいます。

とはいえ、読みやすさを保つために余白を入れすぎないように注意しましょう。今回は全体に20pxのパディングを設定しましたが、10pxや15pxなど、見た目が良いと思う値を設定すればOKです。

ステップ3：タブレット向けの2カラムレイアウトを作成する

タブレットのワイヤーフレームに戻ってみると、ContentとSidebarが横並びになっています。その他のセクションはモバイルと同様に縦に積み重ねられたままです。

ContentとSidebarを2カラムに整形するためのスタイルを追加しましょう。CSS Gridではなく、ここではFlexboxを使用します。

まず、HTMLを変更して、ContentとSidebarを「flex-container」というクラス名を持つ親の <div> で囲みます。（省略記号は、今は重要ではない追加のマークアップを表しています）

<div class="flex-container">

   <!-- コンテンツ -->
   <section class="content">
      Content
      ... 
   </section>

   <!-- サイドバー -->
   <aside class="sidebar">
      Sidebar 
      ...
   </aside>

</div>

CSSを書く前に、2カラムレイアウトにおいてContentとSidebarをどう振る舞わせたいかを決めておく必要があります。選択肢はいくつかあり、「正解」は状況によって異なります。

今回の方針は、「Sidebarは常に300pxの幅を保ち、Contentが残りのスペースを埋める」というものです。

これを実現するために、CSSにFlexboxのスタイルを追加します（同様に省略記号で追加コードを省略しています）：

@media screen and (min-width: 640px){
    .flex-container {
        display: flex;
    }    
}

メディアクエリを使うことで、デバイス幅が640px以上の場合にのみFlexboxを有効にします。つまり、それより狭いスマホの画面幅では引き続き縦積みレイアウトが維持され、640pxを超えた時点でFlexboxレイアウトに切り替わります。

.content {
    flex: 1;
    ...
}

.sidebar {
    flex: 0 1 300px;
    ...
}

ContentとSidebarの要素には、flexプロパティを追加しました。

Contentの幅はFlexboxに計算させたいので、flex: 1 を設定します。これは flex-grow: 1、flex-shrink: 1、flex-basis: 0% のショートハンドです。

これはFlexboxの「デフォルト」とも言える設定です。すべての子要素に flex: 1 を設定すると、それぞれの幅が計算され、できるだけ均等に分配されます。

Sidebarの幅を300pxに固定するには、flex: 0 1 300px を使用します。CSS-Tricksによれば、最後の値であるflex-basisは「残りのスペースが分配される前の、要素のデフォルトサイズを定義する」ものです。

これにより、Sidebarは常に300pxに保たれ、残りのスペースはすべてContentセクションに分配されることになります。

結果はこちらです！

Flexboxで作るレスポンシブWebサイトレイアウト完全ガイド【初心者向けステップ解説】

続いて、デスクトップ向けのスタイルを追加しましょう。

ステップ4：デスクトップ向けにコンテンツ幅の上限を設定する

タブレットとデスクトップのワイヤーフレームを見比べると、かなり似ていることがわかります。どちらもコンテンツがサイドバーの隣に配置されています。

デスクトップでの主な違いは、前述のとおりメインコンテンツにmax-width（最大幅）を設定することです。これにより、ウルトラワイドモニターでもサイトの読みやすさが保証されます。

CSSのヘルパークラスを活用する

この一連のスタイルは複数の要素で使う可能性が高いので、再利用しやすいヘルパークラスとして作成しておきましょう。

CSSに新しいクラスとスタイルを以下のように追加します：

.wrapper {
    margin: auto;
    max-width: 75rem;
}

これにより、要素の最大幅が1200px（rem単位に変換）に設定され、1200pxを超える画面幅では中央揃えになります。

HTML側では、ContentとSidebarのコンテナの幅を制限したいので、flex-containerのラッパーにwrapperクラスを追加します。

マークアップは次のようになります：

<div class="flex-container wrapper">
   …
</div>

より広い画面幅でサイトを確認すると、Content/Sidebarラッパーの周囲に余白ができているのがわかります。まさに狙いどおりです 😁

Flexboxで作るレスポンシブWebサイトレイアウト完全ガイド【初心者向けステップ解説】

まとめ

以上で完成です！モバイル・タブレット・デスクトップのどこできれいに表示される、シンプルなレスポンシブレイアウトができあがりました。

実際に動作するサイトを確認したい方は、デモをご覧ください。また、このプロジェクトのコード一式はGitHubからダウンロードできます。

※注意：このプロジェクトではGulpとSassを使用しています。Gulpのインストール方法については、別途シンプルなGulpチュートリアルを参照してください。

最後までお読みいただきありがとうございました！このチュートリアルへのご感想があれば、ぜひコメント欄でお聞かせください 😊

  1. CSSでレスポンシブなブログレイアウトを作成する方法【完全なコード例付き】

    CSSを使ってレスポンシブなブログレイアウトを作成するには、viewportメタタグの設定と、デバイスの画面幅に応じて柔軟に調整されるレイアウト構造の定義がポイントになります。以下に、ナビゲーションバー・ブログ本文・サイドリンク・フッターを備えた、ブログサイトの完全なコード例を紹介します。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <

  2. CSSでレスポンシブなジグザグ（交互）レイアウトを作成する方法

    CSSを使用すれば、テキストと画像を左右交互に配置した「ジグザグ（交互）レイアウト」を簡単に実装できます。ジグザグレイアウトは、コンテンツに視覚的なリズムと変化を与え、閲覧者の視線を自然に誘導できる人気のデザイン手法で、ランディングページやサービス紹介ページなどでよく活用されています。 実装のポイントは大きく分けて2つあります。1つ目はfloatプロパティで要素を左右に振り分けること、2つ目はメディアクエリを使って画面幅に応じてレイアウトを切り替えることです。以下に具体的なコード例を示します。 実装例 <!DOCTYPE html> <html> <head>