CSSメディアクエリ

2024/04/18

エンジニアインターン

今日は主にCSSでUXデザインをしていました。

昨日までは割とCSSのデフォルトにお任せして

デザインをしていたのですが、だんだん

具体的な要求が出てくるとそうもいかなくなってきます。

そこで登場するのがCSSのメディアクエリ。

皆さんはサイトの幅を徐々に変えていくと

いきなりガクンと文字の大きさや配置が変わる、

というサイトを見たことがありますか？

多分ありますが気づいてないと思います笑

かくいう私も今日初めて意識しました！

実際に見てみましょう。

▲この写真では「OWLet3つの活用パターン」

という文字がそんなに大きくないですが、

少しサイト幅を広げると、、

いきなり文字が大きくなりました。

(ついでに文字も出てきました)

これは私が「サイトの幅が○○px以上のときは

UXデザインをこう変更して」

とCSSで指示したからです。

コードはシンプルで、こんな感じです。

画面が1200ピクセル(px：ピクセル)

を下限としてフォントサイズを

style1というスタイルの文字は35ピクセルに、

style2というスタイルの文字は55ピクセルに、

という風に指示しています。

このように、UXデザインをする側になってみると

改めて世の中のサイトすげえな、って思います。

それでは！

参考文献：

https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Media_queries

https://www.htmq.com/csskihon/007.shtml

＊COMMENT＊

石川　航
更新日：2024-04-18 18:32
＊コメント＊

お疲れ様ですガーディアンのWebサイトのメディアクエリは、実は時期によって微妙に変わっていますスマホは機種によって横幅が変わるので、スマホサイト用のメディアクエリ設定をどうするか悩ましいですね
お疲れ様です
ガーディアンのWebサイトのメディアクエリは、
実は時期によって微妙に変わっています

スマホは機種によって横幅が変わるので、
スマホサイト用のメディアクエリ設定をどうするか悩ましいですね
＊コメント＊
下川　春樹
更新日：2024-04-18 18:33
＊コメント＊

お疲れ様です。メディアクエリも奥が深いですよねー。どんなデバイスでも綺麗に表示されるようにしないといけませんが、ブレイクポイントを沢山設定しても良くないので、なるべく2つぐらいでいけるように設定しないといけないんですが、中々難しいです＞＜もっと世の中のサイトを見て勉強してみます！
お疲れ様です。
メディアクエリも奥が深いですよねー。
どんなデバイスでも綺麗に表示されるようにしないといけませんが、ブレイクポイントを沢山設定しても良くないので、なるべく2つぐらいでいけるように設定しないといけないんですが、中々難しいです＞＜
もっと世の中のサイトを見て勉強してみます！
＊コメント＊
宮城　わか
更新日：2024-04-19 08:38
＊コメント＊

メディアクエリの設定は制作していてよく使いますが、いかに簡潔な記述であらゆるデバイス幅で見ても綺麗な見た目になっているかの調整が難しいです。スマホ横の時で崩れていたりとまだまだ私も勉強途中なので、綺麗なコードを書けるように心がけていきます。
メディアクエリの設定は制作していてよく使いますが、いかに簡潔な記述であらゆるデバイス幅で見ても綺麗な見た目になっているかの調整が難しいです。スマホ横の時で崩れていたりとまだまだ私も勉強途中なので、綺麗なコードを書けるように心がけていきます。
＊コメント＊