《CSS》スマホでも表示したい時に!「max-width」について

HTMLのこと

こんにちは、「なゆた」です!

突然ですが皆さん、サイトやHTMLファイルなどをスマホ独自のサイズで表示できるようにする方法があるのをご存知ですか?

今回はそれができるという「max-width」の基本をお教えします!

こんな人に読んで欲しい!

「自分のサイトをスマホサイズで表示できるようにしたい」という人

使い方

例えば、HTMLファイルとCSSファイルがこんな風に表示されているとしましょう。

下の項目が、3つとも横並びしていますね!

スマホサイズでも表示できるようにするには、CSSファイルにこう打ちます。
@media screen and (max-width: ???px) {(※この中にどう表示したいかを打ち出す)}

僕の場合、例としてパソコンとスマホの間のサイズである《768px》にしておきます。

するとどうでしょう、ブラウザーを縮小すると項目の並び方や文字の大きさも変わりました!!
これが「max-width」の魅力です!!

最後に

いかがでしたか?

皆さんもこのようにサイトがスマホサイズならどう表示を変えようかを考えながら、
「max-width」をぜひ使ってみてください!

以上です、ありがとうございました!

コメント

タイトルとURLをコピーしました