いっしー@Webエンジニア
Webツールプログラミング言語プログラミング学習ITニュースIT用語辞典ポートフォリオ

【HTML/CSS】レスポンシブ対応（ナビゲーションメニュー・メインビジュアル）｜簡単なポートフォリオサイトの作成

CSSのメディアクエリを使ったレスポンシブデザインの基本を学びます。この記事では、PCでは横並びのナビゲーションやメインビジュアルを、スマホなどの画面幅が狭いデバイスで見た際に、縦並びに変更したり文字サイズを調整したりする方法を、具体的なコードでわかりやすく解説します。

作成日: 更新日:

開発環境

  • OS: Windows10
  • Editor: Visual Studio Code
  • HTML: 5
  • CSS: 3
  • JavaScript: ES6以降

サンプルコード

/assets/css/style.css

/assets/css/style.css
1   font-size: 14px;
2   color: #ccc;
3   margin: 0;
4+}
5+
6+@media (max-width: 768px) {
7+  /* ヘッダー：ナビを縦並びに */
8+  header .container {
9+    flex-direction: column;
10+    gap: 10px;
11+  }
12+
13+  .nav-list {
14+    flex-direction: column;
15+    align-items: center;
16+  }
17+
18+  /* メインビジュアル：テキストサイズ調整 */
19+  .main-text h2 {
20+    font-size: 24px;
21+  }
22+
23+  .main-text p {
24+    font-size: 14px;
25+  }
26+
27+  /* About：縦並びに */
28+  .about-content {
29+    flex-direction: column;
30+    text-align: center;
31+  }
32+
33+  .about-image img {
34+    width: 80%;
35+    max-width: 300px;
36+    margin: 0 auto;
37+  }
38+
39+  /* Skills：1カラムに */
40+  .skills-list {
41+    grid-template-columns: 1fr;
42+  }
43+
44+  /* Works：1〜2カラムに */
45+  .works-grid {
46+    grid-template-columns: 1fr;
47+  }
48+
49+  /* Contact：フォーム幅調整（不要な場合は省略） */
50+  .contact-form {
51+    width: 100%;
52+  }
53+
54+  /* フッター：すでに中央揃えなら変更不要 */
55 }
56

コード解説

変更点: レスポンシブ対応の基本設定

/assets/css/style.css
1+}
2+
3+@media (max-width: 768px) {
4+  /* ヘッダー：ナビを縦並びに */
5+  header .container {
6+    flex-direction: column;
7+    gap: 10px;
8+  }
9+
10   /* ... 省略 ... */
11+
12+  /* フッター：すでに中央揃えなら変更不要 */
13 }

@media (max-width: 768px) { ... }は、CSSのメディアクエリという機能です。これは「もし画面の横幅が768ピクセル以下ならば、この波括弧{}の中のCSSを適用してください」という条件分岐の命令になります。この仕組みを使うことで、PCのような広い画面と、スマートフォンのような狭い画面で、それぞれ異なるスタイルを適用でき、レスポンシブデザインを実現する基本となります。今回は、画面幅が768px以下（タブレットやスマートフォンなど）の場合のスタイルを、この中にまとめて記述していきます。

変更点: ヘッダーのレイアウトを縦並びに変更

/assets/css/style.css
1+@media (max-width: 768px) {
2+  /* ヘッダー：ナビを縦並びに */
3+  header .container {
4+    flex-direction: column;
5+    gap: 10px;
6+  }

ヘッダー内のロゴとナビゲーションを囲む.container要素にflex-direction: column;を指定しています。PC表示では、flexboxによってロゴとナビゲーションは横並び（rowが初期値）になっていましたが、この指定により要素が縦に並ぶようになります。gap: 10px;は、縦に並んだ要素（ロゴとナビゲーション）の間に10ピクセルの間隔を空けるための指定です。これにより、スマートフォンで見たときに窮屈にならず、見やすいレイアウトになります。

変更点: ナビゲーションリストを縦並びに変更

/assets/css/style.css
1+  .nav-list {
2+    flex-direction: column;
3+    align-items: center;
4+  }

ナビゲーションの各項目（「HOME」や「ABOUT」など）をリスト表示している.nav-listに対してスタイルを適用しています。ここでもflex-direction: column;を使い、横に並んでいたナビゲーション項目を縦一列に並べ替えています。さらにalign-items: center;を指定することで、縦に並んだ各項目が中央揃えになり、見た目が整います。

変更点: メインビジュアルの見出し文字サイズを調整

/assets/css/style.css
1+  /* メインビジュアル：テキストサイズ調整 */
2+  .main-text h2 {
3+    font-size: 24px;
4+  }

メインビジュアル部分の見出し（h2タグ）の文字サイズを調整しています。PC用の大きな文字サイズのままだと、スマートフォンの狭い画面では文字が大きすぎて改行が多くなったり、画面からはみ出したりすることがあります。そこで、font-size: 24px;と指定することで、画面幅が狭いデバイスに適した、より小さな文字サイズに変更しています。

変更点: メインビジュアルの段落文字サイズを調整

/assets/css/style.css
1+  .main-text p {
2+    font-size: 14px;
3+  }

メインビジュアルの見出しの下にある説明文（pタグ）の文字サイズを調整します。見出しと同様に、PC用の文字サイズではスマートフォンで読みにくくなる可能性があるため、font-size: 14px;と指定して、画面サイズに合った適切な大きさに変更しています。

変更点: Aboutセクションを縦並びに変更

/assets/css/style.css
1+  /* About：縦並びに */
2+  .about-content {
3+    flex-direction: column;
4+    text-align: center;
5+  }

画像とテキストが横に並んでいるAboutセクション（.about-content）に対して、flex-direction: column;を指定し、画像を上、テキストを下に配置する縦並びのレイアウトに変更しています。text-align: center;は、縦並びになったテキスト部分を中央揃えにするための指定で、スマートフォンでの見やすさを向上させます。

変更点: Aboutセクションの画像サイズを調整

/assets/css/style.css
1+  .about-image img {
2+    width: 80%;
3+    max-width: 300px;
4+    margin: 0 auto;
5+  }

Aboutセクションの画像（imgタグ）の表示を調整しています。width: 80%;は、画像の横幅を親要素（この場合は.about-image）の80%に設定する指定で、画面幅に応じて画像の大きさが変わるようになります。max-width: 300px;は、画像の横幅が最大でも300ピクセル以上にはならないようにする制限です。これにより、画像が不必要に大きくなるのを防ぎます。margin: 0 auto;は、ブロック要素を中央に配置する定番のテクニックで、画像をコンテナの中央に表示させます。

変更点: Skillsセクションを1カラムレイアウトに変更

/assets/css/style.css
1+  /* Skills：1カラムに */
2+  .skills-list {
3+    grid-template-columns: 1fr;
4+  }

PCでは複数カラムで表示されていたSkillsセクション（.skills-list）を、スマートフォンでは1カラムで表示するように変更しています。これはgrid-template-columns: 1fr;という指定で行います。grid-template-columnsはCSS Gridレイアウトのカラム構成を定義するプロパティで、1frと指定することで「利用可能な幅全体を1つのカラムとして使う」という意味になります。結果として、各スキル項目が縦に1つずつ並ぶレイアウトになります。

変更点: Worksセクションを1カラムレイアウトに変更

/assets/css/style.css
1+  /* Works：1〜2カラムに */
2+  .works-grid {
3+    grid-template-columns: 1fr;
4+  }

Skillsセクションと同様に、複数カラムで作品が並んでいたWorksセクション（.works-grid）も1カラムのレイアウトに変更します。grid-template-columns: 1fr;を指定することで、各作品が画面幅いっぱいに広がり、縦に並んで表示されるようになります。これにより、小さな画面でも各作品を大きく、見やすく表示することができます。

変更点: Contactセクションのフォーム幅を調整

/assets/css/style.css
1+  /* Contact：フォーム幅調整（不要な場合は省略） */
2+  .contact-form {
3+    width: 100%;
4+  }

PC表示で幅が固定されていた可能性のあるお問い合わせフォーム（.contact-form）の横幅をwidth: 100%;に設定しています。これにより、フォームが親要素の幅いっぱいに広がり、スマートフォンの画面幅にぴったり収まるようになります。入力欄が画面からはみ出すことなく、ユーザーが入力しやすくなります。

おわりに

今回は、@mediaクエリを使い、画面幅に応じてCSSを切り替えるレスポンシブデザインの基本を学びました。flex-direction: column;で要素を縦並びに変更したり、grid-template-columns: 1fr;で1カラムレイアウトにしたりする方法を実践しました。さらに、font-sizeを調整して、スマートフォンでもテキストが読みやすいように最適化しました。これらの基礎をマスターすることが、あらゆるデバイスに対応したWebサイト制作の第一歩となります。

【HTML/CSS】レスポンシブ対応（ナビゲーションメニュー・メインビジュアル）｜簡単なポートフォリオサイトの作成 | いっしー@Webエンジニア