スマホの画面を横にすると見え方が変わる、不思議な現象...!?

Hello World!
おくするなです!

今日はウェブページの不思議なお話について!


ブログをする上で、テンプレート(ブログのデザイン)をWooblyっていうのにしたんだけど、

samplee.jpg
↑元のデザインが水色で、ルナっぽくない...
ルナのカラーっていうと、ピンクだよね!

ということで....





samplee2.jpg
ルナがこんなふうにピンクにカスタマイズしちゃいました!!どうどう?( ✌︎'ω')✌︎

実は色を変えるのもそんな簡単じゃなくて、

世の中のウェブページは、HTMLとCSSとその他いろいろで出来てて、今回はCSSをいじって見た目を変えたんだ!


あと、ヘッダー(上に表示される、おくするなblog)って部分がスマホの画面を占めすぎてて見にくかったから、そこも変えてみたの!

その結果...

IMG_1687.jpg
↑スマホ縦画面で見た時



IMG_1688.jpg
↑スマホ横画面、タブレット端末で見た時



こんな感じで、縦幅とデザインを変えた❣️
これでとっても見やすくなったよ♡


こんな風に端末ごとに見た目を変えることをメディアクエリって言って、
「表示された画面環境に応じて適用するスタイルを切り替える機能」のことを言うんだけど、


「表示サイズの幅がこれ以上ならこのスタイルを適用」みたいに、幅によって見た目を指定できるんだ!!

今見ているサイトも、このメディアクエリによって、スマホ、タブレット端末、パソコンなど

どの端末から見ても見やすいものになっているんだ、と思うとなんだか奥深いですね!!


以上、おくするなでした☆
関連記事

おくするな (@GIRL_AFR)

Hello world! #御楠ルナ当選 実績、見てね〜💕永遠の17歳👼🏻エルルナでVket4でますっ✨
相方ちゃん🍀@kusahaelv

@GIRL_AFR

FC2 ブログランキング

検索

QRコード

QR

Twitter