🗼

レスポンシブ対応

2023/03/02に公開

レスポンシブ対応とは、WebページやアプリケーションなどのUI（ユーザーインターフェイス）が、
閲覧する端末の画面サイズや解像度に合わせて最適な表示ができるようにすること！！

メディアクエリ

メディアクエリとは、Webページを表示する画面のサイズや解像度、向きなど、
特定の条件を満たした場合にのみ適用するCSSのスタイルを指定するための方法

例えば、スマートフォンでの表示とPCでの表示で、
レイアウトやフォントサイズなどを変えたい場合に、
メディアクエリを使ってスタイルを切り替えることができる！

画面幅が600px以下の場合に適用されるCSSスタイルを指定するメディアクエリの例

@media screen and (max-width: 600px) {
  /* 画面幅が600px以下の場合に適用されるCSSスタイル */
}

このように、@mediaキーワードを使って条件を指定し、
{}内に適用するスタイルを記述する！
条件は、andやnotを使って組み合わせることができる。

また、max-widthやmin-widthなどのプロパティを使って、
画面のサイズや向きなどの条件を指定する。

viewportとは、ブラウザの表示領域のこと。
つまり、ウェブページが表示される領域のことを指す。

viewportのサイズは、デバイスの画面サイズに依存する。
ただし、ウェブページはデバイスの画面サイズに依存せず、
一定の幅や高さを持っている場合がある。

このような場合、viewportとウェブページのサイズの不一致が発生し、
スクロールバーが表示されたり、ウェブページが拡大されたりすることがある。

viewportのサイズを指定することで、
ウェブページとviewportのサイズを一致させることができる。
これにより、スクロールバーの表示や、ウェブページの拡大縮小を制御できる。
viewportのサイズを指定する方法は、metaタグを使う方法が一般的！

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

content="width=device-width
と指定することでデバイスの画面幅サイズを使うという意味

initial-scaleは初期倍率を指定する

サイト作り進めてるけど、レスポンシブ対応がうまく反応しない、、😂
時間かけても進める量が全然で焦る、、

あと、今日DMMの事前学習もらえた！
明日は休みだからどんどん進めてくぞ〜