HTMLでウィンドウサイズに合わせる方法｜画面幅にフィットさせるレスポンシブデザインの基本

html

ホームページやブログを作っていて、

「パソコンで見るとちゃんと表示されるのに、スマホで見たら崩れてしまう」
「ブラウザの大きさを変えるとレイアウトが飛んでしまう」

と悩んだことはありませんか？

それを解決するのがウィンドウサイズ（画面幅）に合わせて自動で調整する方法です。

この記事では、

  • 画像や要素をウィンドウ幅に合わせる方法
  • レスポンシブ対応の基本から応用まで

を初心者向けにわかりやすく紹介します。

これを読めば、パソコンでもスマホでも崩れないホームページが作れますよ。

スポンサーリンク
  1. レスポンシブデザインとは？
    1. レスポンシブデザインの概念
    2. なぜレスポンシブデザインが重要？
  2. 基本設定：viewportメタタグ
    1. 必須のviewportタグ
    2. viewportタグの各設定値
    3. 実際のHTMLでの設定例
  3. 幅をウィンドウサイズに合わせる基本テクニック
    1. 画像をレスポンシブにする
    2. コンテナをレスポンシブにする
    3. width: 100% vs max-width: 100%
  4. レスポンシブ単位の活用
    1. パーセント（%）
    2. ビューポート単位（vw, vh, vmin, vmax）
    3. em と rem
  5. メディアクエリによる画面サイズ別対応
    1. 基本的なメディアクエリ
    2. モバイルファーストアプローチ
    3. 実用的なブレークポイント
  6. Flexboxを使ったレスポンシブレイアウト
    1. 基本的なFlexboxレイアウト
    2. レスポンシブカードレイアウト
  7. CSS Gridを使ったレスポンシブレイアウト
    1. 基本的なGridレイアウト
    2. 複雑なGridレイアウト
  8. 実用的なレスポンシブコンポーネント
    1. レスポンシブナビゲーション
    2. レスポンシブテーブル
  9. 画像のレスポンシブ対応
    1. レスポンシブ画像の基本
    2. picture要素を使った条件分岐
    3. srcset属性によるDPI対応
  10. パフォーマンス最適化
    1. 効率的なCSSの書き方
    2. CSSの最適化テクニック
    3. 遅延読み込みの実装
  11. よくある問題と解決法
    1. 水平スクロールが発生する問題
    2. 画像の縦横比が崩れる問題
    3. フォントサイズの調整問題
  12. 実践的なレスポンシブサイト例
    1. シンプルなランディングページ
  13. まとめ
    1. 重要なポイント
    2. ベストプラクティス
    3. 次のステップ

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

レスポンシブデザインの概念

レスポンシブデザインとは、画面サイズに応じて自動的にレイアウトが変化するWebデザイン手法です。

デバイス画面幅の目安特徴
スマートフォン320px〜480px縦持ち、タッチ操作
タブレット768px〜1024px横持ち対応、タッチ操作
ノートPC1024px〜1366pxマウス操作、中程度の画面
デスクトップPC1366px以上大画面、マウス操作

なぜレスポンシブデザインが重要？

  • ユーザビリティ向上：どのデバイスでも快適に閲覧可能
  • SEO効果：Googleがモバイルファーストインデックスを採用
  • 保守性向上：一つのHTMLで複数デバイスに対応
  • コスト削減：別々にサイトを作る必要がない

基本設定：viewportメタタグ

必須のviewportタグ

レスポンシブデザインの第一歩は、HTMLの<head>に以下のタグを入れることです：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

viewportタグの各設定値

プロパティ説明推奨値
widthビューポートの幅device-width
initial-scale初期ズーム倍率1.0
minimum-scale最小ズーム倍率1.0
maximum-scale最大ズーム倍率5.0
user-scalableユーザーズーム可否yes

実際のHTMLでの設定例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>レスポンシブサイト</title>
  <style>
    /* ここにCSS */
  </style>
</head>
<body>
  <!-- ここにコンテンツ */
</body>
</html>

幅をウィンドウサイズに合わせる基本テクニック

画像をレスポンシブにする

/* 基本的な画像のレスポンシブ設定 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* より詳細な設定 */
.responsive-image {
  width: 100%;
  height: auto;
  object-fit: cover; /* 画像の表示方法を指定 */
}

コンテナをレスポンシブにする

/* 基本的なコンテナ */
.container {
  width: 100%;
  max-width: 1200px; /* 最大幅を制限 */
  margin: 0 auto;    /* 中央寄せ */
  padding: 0 15px;   /* 左右に余白 */
}

/* フルード（流動的）なコンテナ */
.fluid-container {
  width: 100%;
  padding: 0 20px;
}

width: 100% vs max-width: 100%

プロパティ効果使用場面
width: 100%親要素の幅いっぱいに拡張確実に幅を埋めたい場合
max-width: 100%元のサイズを上限に親要素内に収める画像などの元サイズを超えたくない場合

レスポンシブ単位の活用

パーセント（%）

親要素に対する相対的な指定：

.sidebar {
  width: 25%;  /* 親要素の25% */
}

.main-content {
  width: 75%;  /* 親要素の75% */
}

ビューポート単位（vw, vh, vmin, vmax）

/* ビューポート幅に対する割合 */
.full-width {
  width: 100vw;  /* 画面幅の100% */
}

.hero-section {
  height: 100vh; /* 画面高さの100% */
  width: 100vw;
}

/* ビューポートの短辺を基準 */
.square-element {
  width: 50vmin;
  height: 50vmin;
}

/* ビューポートの長辺を基準 */
.wide-element {
  width: 80vmax;
}

em と rem

/* em: 親要素のフォントサイズを基準 */
.em-based {
  font-size: 1.2em;    /* 親の1.2倍 */
  margin: 0.5em 1em;   /* フォントサイズ基準の余白 */
}

/* rem: ルート要素のフォントサイズを基準 */
.rem-based {
  font-size: 1.5rem;   /* ルートの1.5倍 */
  padding: 1rem 2rem;  /* 一定の余白 */
}

メディアクエリによる画面サイズ別対応

基本的なメディアクエリ

/* デスクトップファースト */
.container {
  width: 1200px;
  margin: 0 auto;
}

/* タブレット */
@media (max-width: 1024px) {
  .container {
    width: 95%;
    padding: 0 20px;
  }
}

/* スマートフォン */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 15px;
  }
}

モバイルファーストアプローチ

/* モバイルファースト（推奨） */
.container {
  width: 100%;
  padding: 0 15px;
}

/* タブレット以上 */
@media (min-width: 768px) {
  .container {
    width: 95%;
    padding: 0 20px;
  }
}

/* デスクトップ以上 */
@media (min-width: 1024px) {
  .container {
    width: 1200px;
    margin: 0 auto;
  }
}

実用的なブレークポイント

/* 一般的なブレークポイント */

/* Extra small devices (phones) */
@media (max-width: 575.98px) { }

/* Small devices (landscape phones) */
@media (min-width: 576px) and (max-width: 767.98px) { }

/* Medium devices (tablets) */
@media (min-width: 768px) and (max-width: 991.98px) { }

/* Large devices (desktops) */
@media (min-width: 992px) and (max-width: 1199.98px) { }

/* Extra large devices (large desktops) */
@media (min-width: 1200px) { }

Flexboxを使ったレスポンシブレイアウト

基本的なFlexboxレイアウト

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.flex-item {
  flex: 1 1 300px; /* 伸縮可能、最小幅300px */
  min-width: 0;    /* 文字の溢れを防ぐ */
}

レスポンシブカードレイアウト

<style>
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}

.card {
  flex: 1 1 calc(33.333% - 20px); /* 3列レイアウト */
  min-width: 280px;
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

@media (max-width: 1024px) {
  .card {
    flex: 1 1 calc(50% - 20px); /* 2列レイアウト */
  }
}

@media (max-width: 768px) {
  .card {
    flex: 1 1 100%; /* 1列レイアウト */
  }
}
</style>

<div class="card-container">
  <div class="card">カード1</div>
  <div class="card">カード2</div>
  <div class="card">カード3</div>
  <div class="card">カード4</div>
</div>

CSS Gridを使ったレスポンシブレイアウト

基本的なGridレイアウト

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.grid-item {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

複雑なGridレイアウト

.advanced-grid {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

@media (max-width: 768px) {
  .advanced-grid {
    grid-template-areas: 
      "header"
      "main"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

実用的なレスポンシブコンポーネント

レスポンシブナビゲーション

<style>
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #333;
  color: white;
}

.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2rem;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.hamburger {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 3px 0;
  transition: 0.3s;
}

@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }
  
  .nav-menu {
    position: fixed;
    left: -100%;
    top: 70px;
    flex-direction: column;
    background-color: #333;
    width: 100%;
    text-align: center;
    transition: 0.3s;
    padding: 2rem 0;
  }
  
  .nav-menu.active {
    left: 0;
  }
}
</style>

<nav class="navbar">
  <div class="nav-brand">
    <h2>Brand</h2>
  </div>
  <ul class="nav-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <div class="nav-toggle">
    <span class="hamburger"></span>
    <span class="hamburger"></span>
    <span class="hamburger"></span>
  </div>
</nav>

レスポンシブテーブル

<style>
.responsive-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.responsive-table th,
.responsive-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.responsive-table th {
  background-color: #f2f2f2;
  font-weight: bold;
}

@media (max-width: 768px) {
  .responsive-table,
  .responsive-table thead,
  .responsive-table tbody,
  .responsive-table th,
  .responsive-table td,
  .responsive-table tr {
    display: block;
  }
  
  .responsive-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .responsive-table tr {
    border: 1px solid #ccc;
    margin-bottom: 10px;
    padding: 10px;
  }
  
  .responsive-table td {
    border: none;
    position: relative;
    padding-left: 50%;
  }
  
  .responsive-table td:before {
    content: attr(data-label) ": ";
    position: absolute;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    font-weight: bold;
  }
}
</style>

<table class="responsive-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
      <th>Job</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Name">田中太郎</td>
      <td data-label="Age">30</td>
      <td data-label="City">東京</td>
      <td data-label="Job">エンジニア</td>
    </tr>
  </tbody>
</table>

画像のレスポンシブ対応

レスポンシブ画像の基本

/* 基本設定 */
.responsive-img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* アスペクト比を保持 */
.aspect-ratio-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9の比率 */
  overflow: hidden;
}

.aspect-ratio-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

picture要素を使った条件分岐

<picture>
  <source 
    media="(min-width: 1024px)" 
    srcset="large-image.jpg"
  >
  <source 
    media="(min-width: 768px)" 
    srcset="medium-image.jpg"
  >
  <img 
    src="small-image.jpg" 
    alt="レスポンシブ画像"
    style="max-width: 100%; height: auto;"
  >
</picture>

srcset属性によるDPI対応

<img 
  src="image-1x.jpg"
  srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x"
  alt="高解像度対応画像"
  style="max-width: 100%; height: auto;"
>

パフォーマンス最適化

効率的なCSSの書き方

/* モバイルファーストで記述 */
.component {
  /* モバイル用スタイル */
  font-size: 14px;
  padding: 10px;
}

/* 必要な場合のみメディアクエリを使用 */
@media (min-width: 768px) {
  .component {
    font-size: 16px;
    padding: 20px;
  }
}

CSSの最適化テクニック

/* CSS変数を使った効率的な管理 */
:root {
  --container-padding: 15px;
  --max-width: 1200px;
}

@media (min-width: 768px) {
  :root {
    --container-padding: 30px;
  }
}

.container {
  max-width: var(--max-width);
  padding: 0 var(--container-padding);
  margin: 0 auto;
}

遅延読み込みの実装

<img 
  src="placeholder.jpg"
  data-src="actual-image.jpg"
  alt="遅延読み込み画像"
  loading="lazy"
  style="max-width: 100%; height: auto;"
>

よくある問題と解決法

水平スクロールが発生する問題

/* 問題のあるコード */
.problem {
  width: 100vw; /* ビューポート幅いっぱい */
  padding: 20px; /* パディングが加算されて溢れる */
}

/* 解決方法1: box-sizingを変更 */
.solution1 {
  box-sizing: border-box;
  width: 100vw;
  padding: 20px;
}

/* 解決方法2: calc()を使用 */
.solution2 {
  width: calc(100vw - 40px);
  padding: 20px;
}

/* 解決方法3: コンテナを使用 */
.solution3 {
  width: 100%;
  max-width: 100%;
  padding: 20px;
}

画像の縦横比が崩れる問題

/* 問題：縦横比が崩れる */
.broken-aspect {
  width: 100%;
  height: 200px; /* 固定高さで縦横比が崩れる */
}

/* 解決：object-fitを使用 */
.fixed-aspect {
  width: 100%;
  height: 200px;
  object-fit: cover; /* 縦横比を保持してトリミング */
}

/* より良い解決：アスペクト比コンテナ */
.aspect-container {
  aspect-ratio: 16 / 9; /* CSS新機能 */
  overflow: hidden;
}

.aspect-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

フォントサイズの調整問題

/* 問題：固定フォントサイズ */
.fixed-font {
  font-size: 16px;
}

/* 解決：clamp()を使用 */
.responsive-font {
  font-size: clamp(14px, 4vw, 24px);
  /* 最小14px、最大24px、基準は4vw */
}

/* 段階的な調整 */
.stepped-font {
  font-size: 14px;
}

@media (min-width: 768px) {
  .stepped-font {
    font-size: 16px;
  }
}

@media (min-width: 1024px) {
  .stepped-font {
    font-size: 18px;
  }
}

実践的なレスポンシブサイト例

シンプルなランディングページ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>レスポンシブランディングページ</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }
    
    .hero {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      text-align: center;
      padding: 100px 0;
    }
    
    .hero h1 {
      font-size: clamp(2rem, 5vw, 4rem);
      margin-bottom: 1rem;
    }
    
    .hero p {
      font-size: clamp(1rem, 2.5vw, 1.5rem);
      margin-bottom: 2rem;
    }
    
    .btn {
      display: inline-block;
      background: white;
      color: #333;
      padding: 15px 30px;
      text-decoration: none;
      border-radius: 5px;
      font-weight: bold;
      transition: transform 0.3s;
    }
    
    .btn:hover {
      transform: translateY(-2px);
    }
    
    .features {
      padding: 80px 0;
    }
    
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 40px;
      margin-top: 40px;
    }
    
    .feature {
      text-align: center;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    @media (max-width: 768px) {
      .hero {
        padding: 60px 0;
      }
      
      .features {
        padding: 40px 0;
      }
    }
  </style>
</head>
<body>
  <section class="hero">
    <div class="container">
      <h1>レスポンシブデザイン</h1>
      <p>あらゆるデバイスで美しく表示されるWebサイトを作成</p>
      <a href="#" class="btn">詳しく見る</a>
    </div>
  </section>
  
  <section class="features">
    <div class="container">
      <h2 style="text-align: center; margin-bottom: 20px;">特徴</h2>
      <div class="feature-grid">
        <div class="feature">
          <h3>モバイル対応</h3>
          <p>スマートフォンでの表示に最適化</p>
        </div>
        <div class="feature">
          <h3>高速表示</h3>
          <p>軽量で高速なレスポンス</p>
        </div>
        <div class="feature">
          <h3>SEO最適化</h3>
          <p>検索エンジンに優しい構造</p>
        </div>
      </div>
    </div>
  </section>
</body>
</html>

まとめ

ウィンドウサイズに合わせたレスポンシブデザインの実装は、現代のWeb開発において必須のスキルです。

重要なポイント

  1. viewport メタタグ：必ず設定する
  2. モバイルファースト：小さい画面から設計
  3. 柔軟な単位：%, vw, vh, rem を活用
  4. メディアクエリ：画面サイズ別の最適化
  5. Flexbox・Grid：モダンなレイアウト手法

ベストプラクティス

  • パフォーマンス重視：不要なCSSを避ける
  • アクセシビリティ配慮：タッチ操作を考慮
  • テスト重要：実機での確認を怠らない
  • 段階的改善：基本から応用へ

次のステップ

レスポンシブデザインをマスターしたら：

  • CSS フレームワーク（Bootstrap、Tailwind CSS）の活用
  • JavaScriptを使った動的なレスポンシブ機能
  • PWA（プログレッシブWebアプリ）への発展
  • パフォーマンス最適化のさらなる追求

適切なレスポンシブデザインにより、すべてのユーザーにとって快適で美しいWebサイトを提供しましょう！

さらに詳しく知りたい方へ

  • CSS Grid・Flexboxの高度な活用法
  • JavaScript を使った動的レスポンシブ機能
  • WebP やAVIF など次世代画像フォーマットの活用
  • Core Web Vitals を意識したパフォーマンス最適化

これらのテーマについて詳しく知りたい方は、ぜひコメントで教えてください！より高度で実践的な記事をお届けします。

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました