第4章で viewport、media query、フルードグリッド、モバイルファーストって色々学んだけど、実際に組み合わせるとなると自信がないです。
それぞれを理解していても、統合するとなると迷うよね。今回は第4章の技術を全部使って、完全なレスポンシブサイトを実装してみよう。
スマホで見やすくて、PCでも崩れない。それを自分で確認しながら作れるようになりたいです。
まずはクイズで知識を確認してから、実践課題で手を動かそう。
第4章まとめクイズ
第4章の核心ポイントを12問に凝縮したクイズだよ。基礎から応用まで、レスポンシブ設計に必要な考え方を確認していこう。
第4章 レスポンシブデザイン総合クイズ（12問）
/* 選択肢A */
@media (max-width: 768px) {
.container { width: 100%; }
}
/* 選択肢B */
@media (min-width: 768px) {
.container { width: 750px; }
}
/* 選択肢C */
@media screen and (768px) {
.container { width: 750px; }
}
/* 選択肢D */
@media only (width: 768px) {
.container { width: 750px; }
}/* 選択肢A */
img {
width: 800px;
}
/* 選択肢B */
img {
max-width: 100%;
height: auto;
}
/* 選択肢C */
img {
width: 100vw;
height: 100vh;
}
/* 選択肢D */
img {
position: absolute;
}/* 方法A */
.container {
width: 100%;
}
@media (max-width: 768px) {
.container { width: 750px; }
}
/* 方法B */
.container {
width: 100%;
}
@media (min-width: 768px) {
.container { width: 750px; }
}.nav {
display: flex;
flex-direction: row;
}
@media (max-width: 600px) {
.nav {
/* ここで縦並びに変更 */
}
}/* 選択肢A */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
/* 選択肢B */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}<!-- 選択肢A -->
<img src="large.jpg" alt="画像">
<!-- 選択肢B -->
<img src="large.jpg"
srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
alt="画像">けっこう細かいところまで問われましたね。でも基本は理解できました。
いいね。クイズで理論を確認できたら、今度は手を動かして確認しよう。ダウンロードファイルを使って実際に実装してみてね。
実践：完全レスポンシブサイトを作ろう
クイズお疲れ様！今度は第4章で学んだviewport・media query・CSS grid・flexbox・CSS変数を全部使って、完全にレスポンシブなポートフォリオサイトを作ってみよう。
ポートフォリオ構成なら、実際のWebサイトで使えるレイアウトが身につきそうですね。
そうだよ。スマホ・タブレット・PCの3段階でレイアウトが変わる、実務に近い構成だ。完成例を確認してから、自分でも実装してみよう。
以下のリンクからファイルをダウンロードし、VS Codeで開いて内容を確認することもできます。
ただし、実際に自分でコードを書いてみることが最も効果的な学習方法なので、以下の手順を参考にぜひ自分で実装してみてください。
ファイルの作成手順
「css-practice」フォルダーをVS Codeで開いて、chapter4用のフォルダーとファイルを用意しよう。
- VS Codeで「css-practice」フォルダーを開く
- 「ファイル」→「フォルダーを開く」でデスクトップの「css-practice」フォルダーを選択する
- 「chapter4」フォルダーを作成する
- サイドバーのフォルダーアイコンから「新しいフォルダー」を選び、名前を「chapter4」にする
- 「index.html」ファイルを作成する
- 「chapter4」フォルダーを右クリック →「新しいファイル」→「index.html」と入力する
- 「style.css」ファイルを作成する
- 同じく「chapter4」フォルダーに「style.css」を作成する
第4章で学んだ全技術を使ったポートフォリオサイト
完成例を確認してから、自分で実装してみよう。viewport・media query・CSS grid・flexbox・CSS変数が全部使われているから、第4章の総復習になるよ。
ナビゲーションがスマホでは縦並びになって、PCでは横並びになってる！
そうそう。flexboxの flex-direction を切り替えるだけで実現できるんだよ。
実装手順
- HTMLファイルの基本構造を作成する
- DOCTYPE宣言、
lang="ja"属性、head セクションで charset・viewport・title を設定する - viewport meta:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- DOCTYPE宣言、
- 外部CSSファイルのリンクを追加する
- head内に
<link rel="stylesheet" href="style.css">を追加する
- head内に
- HTMLコンテンツを作成する
.header+.navでナビゲーションを作成する（各ページへのリンク）.heroにヒーローセクションを作成する（タイトル・サブタイトル）.works-section+.works-cardsでカードグリッドを作成する（3枚のカード）.footerでフッターを作成する
- CSSリセットとCSS変数を設定する
- 全称セレクター
*で margin・padding を 0、box-sizing を border-box に設定する :rootに--color-primary、--spacing-large、--font-size-headingなどを定義する
- 全称セレクター
- モバイルファーストでベーススタイルを書く（スマホ向け）
- body にフォント・カラーを設定し、
imgにmax-width: 100%; height: auto;を設定する .navにdisplay: flex; flex-direction: column;でナビを縦並びにする.works-cardsにdisplay: grid; grid-template-columns: 1fr;で1列レイアウトにする
- body にフォント・カラーを設定し、
- タブレット向けのメディアクエリを追加する（601px〜）
.navをflex-direction: row;で横並びに変更する.works-cardsをgrid-template-columns: repeat(2, 1fr);で2列に変更する
- PC向けのメディアクエリを追加する（1025px〜）
.works-cardsをgrid-template-columns: repeat(3, 1fr);で3列に変更する:rootの CSS変数を上書きしてフォントサイズと余白を大きくする
- ブラウザで動作を確認する
- ファイルを保存してブラウザで開き、DevToolsのDevice Toolbarで360〜1440pxまで確認する
コーディング時の注意点
- viewport設定を忘れない
<meta name="viewport" content="width=device-width, initial-scale=1.0">がないと、スマホでPC幅のまま縮小表示される - モバイルファーストの順序
@media (min-width: ...)を使う。max-widthで後から狭い画面を上書きするのは逆方向なので避ける - 画像のmax-width設定
img { max-width: 100%; height: auto; }をリセット段階で入れておくと、あふれ防止になる - ブレークポイントは最小限に 端末名ではなくコンテンツが崩れる幅で設定する。2〜3箇所に絞るのが保守しやすい
- CSS変数で一元管理 色やサイズを変数化しておくと、ブレークポイントごとの上書きが少ない変更で済む
実装完了後のチェックリスト
- viewport設定
<meta name="viewport" content="width=device-width, initial-scale=1.0">が入っている - モバイルファースト 基本スタイルがスマホ向け、
@media (min-width: ...)で拡張している - 画像最適化
max-width: 100%; height: auto;が設定されている - ナビゲーション スマホで縦並び、タブレット以上で横並びに切り替わる
- カードグリッド スマホ1列・タブレット2列・PC3列と段階的に変化する
- CSS変数 色やサイズが
:rootで定義され、繰り返し使われている - 全幅で崩れなし DevToolsで360〜1440pxまで横スクロールが発生しない
- ブラウザ表示確認 各ブレークポイントで崩れや文字切れがないことを確認している
まとめ
viewport、media query、grid、flexbox、CSS変数を全部使うと、こんなにきれいなレスポンシブサイトができるんですね。
ステップ通りに進めたら、スマホ幅からPC幅まで全部崩れなくなりました！
モバイルファーストで書いて、@mediaで段階的に拡張する。この流れが身についたら、第4章はマスターだよ。
- viewport設定 width=device-widthとinitial-scale=1.0で、スマホでも正しくレンダリングできる
- media query min-widthを使ったモバイルファーストの段階的拡張ができる
- フルードグリッド grid-template-columnsをメディアクエリで切り替え、1〜3列のレスポンシブレイアウトが作れる
- フレキシブルナビ flexboxのflex-directionを切り替えてナビゲーションのレスポンシブ化ができる
- CSS変数 :rootで定義してメディアクエリで上書きする管理パターンが使える
- 崩れ検証 DevToolsのDevice Toolbarで連続的に幅を変えて崩れを発見できる
第5章では、CSSアニメーションとトランジションを学びます。ページに動きをつけて、よりリッチなUIを実現しましょう。