読み込み中...

【3step】CSSでウィンドウサイズに合わせたレスポンシブなWebページを作る

CSSを使ってウィンドウサイズに合わせたレスポンシブなWebページを作る方法 CSS
2023.12.17
この記事は約4分で読めます。

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

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

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

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

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

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

はじめに

Webページを作成する際に、ユーザーの端末のウィンドウサイズに合わせて自動的にレイアウトが変化する「レスポンシブデザイン」が重要となってきました。

CSSを使えば、ウィンドウサイズに合わせたレスポンシブなWebページを簡単に作ることができます。

この記事では、CSSを使ってウィンドウサイズに合わせたレスポンシブなWebページを作る方法を初心者向けに解説します。

●CSSでウィンドウサイズに合わせたWebページを作る方法

CSSでウィンドウサイズに合わせたWebページを作るには、次の方法があります。

①ビューポート単位で指定する

ビューポート単位（vw、vh、vmin、vmax）を使って、ウィンドウサイズに合わせたサイズ指定を行います。

例えば、幅が画面幅の80%、高さが画面高さの50%の要素を作成する場合、次のようにCSSを記述します。

.element {
  width: 80vw;
  height: 50vh;
}

このようにビューポート単位を使えば、ウィンドウサイズに合わせた要素のサイズ指定が簡単にできます。

②メディアクエリを使ってスタイルを切り替える

メディアクエリを使って、ウィンドウサイズに応じてスタイルを切り替えることができます。

具体的には、ウィンドウサイズが一定の範囲内の場合にだけ適用されるスタイルを指定することができます。

例えば、次のように記述することで、ウィンドウ幅が600px以下の場合にだけ、背景色を変更することができます。

@media screen and (max-width: 600px) {
  body {
    background-color: #ccc;
  }
}

このようにメディアクエリを使えば、ウィンドウサイズに応じたスタイルの切り替えができます。

③Flexboxを使ってレイアウトを調整する

Flexboxは、要素のレイアウトを簡単に調整することができるCSSの機能です。

Flexboxを使えば、ウィンドウサイズに合わせたレイアウトの調整が簡単にできます。

Flexboxを使って、ウィンドウサイズに合わせて要素を横並びにする例です。

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

.item {
  flex: 1 0 200px;
}

このように、Flexboxを使えばウィンドウサイズに合わせたレイアウトの調整が簡単にできます。

●応用例

ウィンドウサイズに合わせたWebページの作成には、さまざまな応用例があります。

代表的な応用例を紹介します。

① メニューの切り替え

ウィンドウ幅が狭くなると、メニューが画面に収まらなくなることがあります。

この場合、メニューを開閉式にすることで、スペースを節約することができます。

メニューを開閉式にするためのサンプルコードです。

.menu-toggle {
  display: none;
}

@media screen and (max-width: 600px) {
  .menu {
    display: none;
  }
  .menu-toggle {
    display: block;
  }
}

.menu-toggle:checked ~ .menu {
  display: block;
}

このサンプルコードでは、ウィンドウ幅が600px以下の場合には、メニューを非表示にして、代わりに「メニューを開く」ボタンを表示します。

また、「メニューを開く」ボタンがクリックされると、メニューが表示されます。

② 画像のレスポンシブな表示

画像をレスポンシブに表示することも、ウィンドウサイズに合わせたWebページ作成の重要な要素の一つです。

画像をレスポンシブに表示するためのサンプルコードです。

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

このサンプルコードでは、画像の最大幅を100%に指定することで、ウィンドウサイズに合わせた自動調整ができます。

まとめ

CSSを使ってウィンドウサイズに合わせたレスポンシブなWebページを作る方法を初心者向けに解説しました。

ビューポート単位を使って要素のサイズを指定する方法、メディアクエリを使ってスタイルを切り替える方法、Flexboxを使ってレイアウトを調整する方法など、具体的なサンプルコードも紹介しました。


また、応用例として、メニューの開閉式表示や画像のレスポンシブ表示についても触れてきました。

ぜひ、この記事を参考にして、ウィンドウサイズに合わせたレスポンシブなWebページを作成してみてください。