はじめに
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ページを作成してみてください。
