Web制作者必見！よく使うレスポンシブコード

eyecatch130 WEB制作

こんにちは、SouDogです。

投稿頻度が落ちてしまいごめんなさい。

本業が思いのほか忙しくなり中々．．．

今回はこれからWeb制作を始める方向けにスマホ表示に使える万能コードをいくつか紹介します。

はじめに

近年、スマートフォンやタブレットでWebサイトを見るユーザーが急増しています。そのため、レスポンシブデザイン（Responsive Design）はWeb制作において欠かせない考え方になっています。本記事では、初心者でもすぐに使える “よく使うレスポンシブ対応コード” を実践的な内容とともに解説していきます。

1. レスポンシブデザインとは？

レスポンシブデザインとは、Webページを閲覧する端末に合わせて、レイアウトやデザインが自動調整される仕組みです。

メリット

  • ユーザー体験（UX）の向上
  • SEO評価の向上
  • 一元管理が可能

2. メディアクエリの基本と書き方

@media (max-width: 768px) {
  body {
    background-color: #f0f0f0;
  }
}

min-width, max-width, orientation などの条件を組み合わせて使用できます。

3. よく使うブレイクポイント一覧

/* スマホ */
@media (max-width: 599px) {}

/* タブレット縦 */
@media (min-width: 600px) and (max-width: 899px) {}

/* タブレット横〜PC */
@media (min-width: 900px) {}

4. レスポンシブなレイアウトの作り方

Flexbox や Grid を活用してデバイスごとの配置を変えます。

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 100%;
}

@media (min-width: 768px) {
  .item {
    flex: 1 1 50%;
  }
}

5. レスポンシブ対応のナビゲーションバー

ハンバーガーメニューを使った実装例：

<div class="nav">
  <button class="toggle">☰</button>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>
</div>

.menu {
  display: none;
}

@media (min-width: 768px) {
  .menu {
    display: block;
  }
}

6. 画像のレスポンシブ対応

<img src="image.jpg" alt="" style="max-width:100%; height:auto;" />

または <picture> タグを使う：

<picture>
  <source media="(min-width: 768px)" srcset="large.jpg">
  <img src="small.jpg" alt="レスポンシブ画像">
</picture>

7. フォントサイズや余白の調整方法

body {
  font-size: 16px;
  padding: 20px;
}

@media (max-width: 768px) {
  body {
    font-size: 14px;
    padding: 10px;
  }
}

8. 表（table）をレスポンシブにするテクニック

.table-wrapper {
  overflow-x: auto;
}

.table-wrapper table {
  width: 100%;
  min-width: 600px;
}

<div class="table-wrapper">
  <table>
    <tr><th>名前</th><th>年齢</th></tr>
    <tr><td>太郎</td><td>30</td></tr>
  </table>
</div>

9. スマホで見やすいボタンの設計法

.button {
  padding: 12px 20px;
  font-size: 18px;
  width: 100%;
  box-sizing: border-box;
}

10. JavaScriptで画面サイズに応じて切り替える方法

if (window.innerWidth < 768) {
  // スマホ表示用の処理
}

window.addEventListener('resize', () => {
  // リサイズ対応
});

11. レスポンシブチェックに役立つツール

12. よくあるトラブルとその対処法

  • スクロールバーが出る → 要素の幅の指定に注意
  • 要素が重なる → z-index の見直し、Flexboxの理解
  • メニューが開かない → JavaScriptのイベントが効いているか確認

13. SEOに強いレスポンシブ設計のポイント

  • モバイルフレンドリーにする
  • 読み込み速度の最適化（画像圧縮、lazyload）
  • 見出しタグ（h1〜h3）の正しい使用
  • パンくずリスト、meta情報の整備

14. おすすめのレスポンシブ対応フレームワーク

  • Bootstrap：迅速なUI構築に便利
  • Tailwind CSS：ユーティリティベースの柔軟な設計
  • Foundation：高度なカスタマイズに強い

15. まとめ：今すぐ使えるテンプレートコード集

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">

<div class="container">
  <header>Header</header>
  <main>Main</main>
  <footer>Footer</footer>
</div>

.container {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}

これで、すぐに使えるレスポンシブ対応コードを一通り網羅しました。初心者の方も、このテンプレートを元に実践的なレスポンシブ対応を進めてみてください！

コメント

スポンサーリンク