CSS RWD - メディアクエリ

ウェブ開発志望者诸位、おめでとうございます！今日は、Responsive Web Design（RWD）のエキサイティングな世界に飛び込み、その最も強力なツールの一つであるメディアクエリについて焦点を当てます。美しい絵を描いていると想像してくださいが、小さなはがきから巨大な看板まで、どこでも素晴しく見える必要があります。これがウェブサイトでやることですし、メディアクエリが私たちの魔法の絵筆です！

CSS RWD - Media Queries

メディアクエリとは？

メディアクエリはCSSの世界のカメレオンです。ウェブサイトがどのデバイスで表示されているかによって、その外観を適応させ、変更することができます。スマートフォン、タブレット、デスクトップコンピュータに関わらず、メディアクエリがあなたのサイトがどこでも素晴しく見えるのを助けます。

基本例から始めましょう：

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

このコードでは、「画面の幅が600ピクセル以下の場合、背景色をライトブルーに」と浏览器に指示しています。小さな画面ではウェブサイトに涼しい、新鮮な見た目を与える thing です。

CSS RWD メディアクエリ - widthプロパティ

widthプロパティは、レスポンシブデザインを制作する際の最良の友です。デバイスの画面幅に基づいて異なるスタイルを設定することができます。

より包括的な例を見てみましょう：

/* 大きな画面用のデフォルトスタイル */
.container {
width: 80%;
margin: 0 auto;
}

/* 768px以下の画面用のスタイル */
@media screen and (max-width: 768px) {
.container {
width: 95%;
}
}

/* 480px以下の画面用のスタイル */
@media screen and (max-width: 480px) {
.container {
width: 100%;
}
}

以下のことが起こります：

デフォルトでは、コンテナは80%の幅で両側に余白があります。
画面が768px以下に縮小すると、幅を95%に増やします。
非常に小さな画面（480px以下）では、コンテナを全幅にします。

ウェブサイトがヨガをしているかのようで、どんな画面にも完璧にフィットするために伸び縮みします！

CSS RWD メディアクエリ - 複数のブレイクポイント

次に、ブレイクポイントについて話しましょう。これらは、ウェブサイトのレイアウトが最良のユーザーエクスペリエンスを提供するために変更するポイントです。これらを「ブレイクポイント」と呼びます。

複数のブレイクポイントを使用した例を見てみましょう：

/* ベーススタイル */
body {
font-size: 16px;
}

/* 大きな画面用 */
@media screen and (min-width: 1200px) {
body {
font-size: 18px;
}
}

/* 中程度の画面用 */
@media screen and (min-width: 992px) and (max-width: 1199px) {
body {
font-size: 17px;
}
}

/* 小さな画面用 */
@media screen and (max-width: 991px) {
body {
font-size: 15px;
}
}

この例では、異なる画面サイズに基づいてフォントサイズを調整しています：

大きな画面（1200px以上）では、フォントサイズを18pxに増やします。
中程度の画面（992pxから1199px）では、フォントサイズを17pxにします。
小さな画面（991px以下）では、フォントサイズを15pxに少し減らします。

ウェブサイトが responsive な衣装を常に完璧にフィットするかのようです！

CSS RWD メディアクエリ - 向きを使用する

デバイスが縦向きであったり横向きであったりすることをウェブサイトが知ることができることをご存知ですか？その通りで、この情報を使ってさらにカスタマイズされたデザインを作成することができます。

向きの機能を使用する方法を見てみましょう：

/* 縦向き用のスタイル */
@media screen and (orientation: portrait) {
.sidebar {
width: 100%;
float: none;
}
.main-content {
margin-left: 0;
}
}

/* 横向き用のスタイル */
@media screen and (orientation: landscape) {
.sidebar {
width: 25%;
float: left;
}
.main-content {
margin-left: 26%;
}
}

この例では：

デバイスが縦向きの場合、サイドバーを全幅にし、フロートを解除します。
デバイスが横向きの場合、サイドバーを幅25%にし、横並びにします。

ウェブサイトがアクロバットをしているかのようで、縦向きと横向きの間でスタイリッシュに切り替わります！

すべてを合わせて

基本を学んだところで、すべてを合わせたより複雑な例を見てみましょう：

/* ベーススタイル */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}

.container {
width: 80%;
margin: 0 auto;
}

/* 大きな画面用 */
@media screen and (min-width: 1200px) {
body {
font-size: 18px;
}
.container {
max-width: 1140px;
}
}

/* 中程度の画面用 */
@media screen and (min-width: 992px) and (max-width: 1199px) {
body {
font-size: 17px;
}
.container {
max-width: 960px;
}
}

/* 小さな画面用 */
@media screen and (max-width: 991px) {
body {
font-size: 16px;
}
.container {
width: 95%;
}
}

/* 非常に小さな画面用 */
@media screen and (max-width: 576px) {
body {
font-size: 15px;
}
.container {
width: 100%;
padding: 0 15px;
}
}

/* 横向き用のスタイル */
@media screen and (orientation: landscape) and (max-height: 500px) {
.header {
position: static;
}
.main-content {
margin-top: 20px;
}
}

この包括的な例は、異なる画面サイズと向きに基づいて、フォントサイズ、コンテナの幅、そしてレイアウトを調整する方法を示しています。

結論

おめでとうございます！メディアクエリを通じて、レスポンシブウェブデザインの第一歩を踏み出しました。レスポンシブなウェブサイトを作成するのは、デジタルな変身をすることのようで、どんな形態でも素晴らかに見えるべきです。

メディアクエリを練習し、実験を続けることで、すべてのデバイスでスムーズに動作するデザインを作成する直感を養うことができます。探求を続け、コードを書き続け、最も重要なのは、楽しむことです！あなたのウェブサイトは、どこにでも素晴らしく見えることで感謝してくれるでしょう。

メソッド	説明
`@media screen`	すべてのスクリーンタイプをターゲットに
`max-width`	最大幅の条件を設定
`min-width`	最小幅の条件を設定
`orientation: portrait`	縦向きのデバイスをターゲットに
`orientation: landscape`	横向きのデバイスをターゲットに

ハッピーコーディング、そしてあなたのウェブサイトが常にレスポンシブであることを祈っています！

Credits: Image by storyset