読み込み中...

CSSビューポート完全ガイド！初心者でも簡単5ステップ

CSSビューポートの概念図, CSSビューポートの基本構文, サンプルコードの説明, 応用例のデモンストレーション CSS
2024.02.19
この記事は約5分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

あなたもウェブサイトやアプリのデザインにおいて、様々なデバイスや画面サイズに対応するレスポンシブデザインの重要性を感じていることでしょう。

そんな時、CSSビューポートが役立ちます。

この記事では、CSSビューポートの作り方や使い方、対処法を初心者目線で丁寧に解説し、サンプルコードや応用例も紹介します。

これを読めば、あなたもCSSビューポートのマスターになれることでしょう！

●ビューポートとは？

ビューポートとは、ウェブページが表示されるブラウザの可視領域のことを指します。

CSSビューポートは、この可視領域に対応するスタイルを適用するために使用されます。

●CSSビューポートの基本

CSSビューポートを利用するには、まずビューポートメタタグをHTMLのhead要素内に記述します。

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

このタグは、ブラウザに画面幅をデバイスの幅に合わせ、初期のズームレベルを1に設定するよう指示します。

●CSSビューポートの使い方

CSSビューポートを使用して、デバイスや画面サイズに応じたレスポンシブデザインを実現するには、メディアクエリを使用します。

/* スマートフォン向けスタイル */
@media (max-width: 767px) {
  body {
    font-size: 14px;
  }

  h1 {
    font-size: 24px;
  }
}

/* タブレット向けスタイル */
@media (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 16px;
  }

  h1 {
    font-size: 28px;
  }
}

/* デスクトップ向けスタイル */
@media (min-width: 1024px) {
  body {
    font-size: 18px;
  }

  h1 {
    font-size: 32px;
  }
}

このサンプルコードでは、画面幅が767px以下のスマートフォン、768px以上1023px以下のタブレット、1024px以上のデスクトップにそれぞれ異なるスタイルが適用されます。

●CSSビューポートの対処法

CSSビューポートを使用する際に遭遇する問題に対処する方法を紹介します。

○画像のリサイズ

画像がデバイス幅に応じてリサイズされるように、以下のようにCSSを記述します。

img {
  max-width: 100%;
  height: auto;
}

○テキストの折り返し

デバイス幅が狭い場合にテキストが折り返されるように、以下のようにCSSを記述します。

p {
  word-wrap: break-word;
}

●応用例とサンプルコード

CSSビューポートを応用して、より複雑なレスポンシブデザインを実現する例を紹介します。

○グリッドレイアウトの切り替え

画面サイズに応じてグリッドレイアウトを切り替える方法です。以下は、サンプルコードです。

/* スマートフォン向けスタイル */
@media (max-width: 767px) {
  .grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
  }
}

/* タブレット向けスタイル */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
  }
}

/* デスクトップ向けスタイル */
@media (min-width: 1024px) {
  .grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 30px;
  }
}

このサンプルコードでは、画面サイズが767px以下のスマートフォンでは2列、768px以上1023px以下のタブレットでは3列、1024px以上のデスクトップでは4列のグリッドレイアウトが適用されます。

○ナビゲーションメニューの切り替え

画面サイズに応じてナビゲーションメニューを切り替える方法です。

<!-- HTML -->
<header>
  <nav class="desktop-nav">
    <!-- デスクトップ向けナビゲーションメニュー -->
  </nav>
  <nav class="mobile-nav">
    <!-- モバイル向けナビゲーションメニュー -->
  </nav>
</header>
/* スマートフォン向けスタイル */
@media (max-width: 767px) {
  .desktop-nav {
    display: none;
  }

  .mobile-nav {
    display: block;
  }
}

/* デスクトップ向けスタイル */
@media (min-width: 768px) {
  .desktop-nav {
    display: block;
  }

  .mobile-nav {
    display: none;
  }
}

このサンプルコードでは、画面サイズが767px以下のスマートフォンではモバイル向けのナビゲーションメニューが表示され、

768px以上のデスクトップではデスクトップ向けのナビゲーションメニューが表示されます。

まとめ

この記事では、CSSビューポートの基本的な作り方や使い方、対処法を初心者目線で解説しました。

また、実践的なサンプルコードや応用例も紹介しました。この記事が参考になれば幸いです。