こんばんは!今日は昨日のレスポンシブデザインのサイトを作るにあたって必要なCSSでのメディアクエリの事を説明します!

メディアクエリとはメディアのタイプや特性によって表示を変えるレスポンスデザインを利用する設定です。

要はパソコンやタブレットで同じサイトを見る時その端末のに合わせたサイズで表示させるという事です!

書き方としては、CSSに

@media (条件) { …. }という様に書きます。
指定された条件が当てはまるときにのみ{ }内のCSSが適用されます。

わかりますか?

条件のところは、max-width:〇〇pxという形で〇〇のところに指定するサイトを入力って感じですね!

@media(max-width:1000px )みたいな形です!

ここで大事なのがpxのあとにセミコロンはいらないのを覚えておいてください!

あとは最小サイズも同じように記述すればそれに対応した形で表示してくれます。

今からホームページ作成やブログ作成する方など覚えておくと便利だと思いますよ!

ちょっと説明わからなかったりするかたの為に動画の記事を見つけたので載せときます!

k