はじめに
あなたもウェブサイトやアプリのデザインにおいて、様々なデバイスや画面サイズに対応するレスポンシブデザインの重要性を感じていることでしょう。
そんな時、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ビューポートの基本的な作り方や使い方、対処法を初心者目線で解説しました。
また、実践的なサンプルコードや応用例も紹介しました。この記事が参考になれば幸いです。