こんにちは、「なゆた」です!
突然ですが皆さん、サイトやHTMLファイルなどをスマホ独自のサイズで表示できるようにする方法があるのをご存知ですか?
今回はそれができるという「max-width」の基本をお教えします!
こんな人に読んで欲しい!
「自分のサイトをスマホサイズで表示できるようにしたい」という人
使い方
例えば、HTMLファイルとCSSファイルがこんな風に表示されているとしましょう。
![](https://nayuta-win.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-09-16.07.18.png)
![](https://nayuta-win.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-09-16.08.05.png)
![](https://nayuta-win.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-09-16.09.16.png)
スマホサイズでも表示できるようにするには、CSSファイルにこう打ちます。
@media screen and (max-width: ???px) {(※この中にどう表示したいかを打ち出す)}
![](https://nayuta-win.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-09-16.12.59.png)
するとどうでしょう、ブラウザーを縮小すると項目の並び方や文字の大きさも変わりました!!
これが「max-width」の魅力です!!
最後に
いかがでしたか?
皆さんもこのようにサイトがスマホサイズならどう表示を変えようかを考えながら、
「max-width」をぜひ使ってみてください!
以上です、ありがとうございました!
コメント