css

以前に僕のブログを見たことがある人にはわかると思いますが、サムネイル画像がなかったり、文字のサイズ、余白などが違ったりとデザインをガラッと変えました！ デザインについて考えると、どんどん深みにはまって正解がまったくわからなかったです。（笑） CSSで@mediaを使ってデバイスの大きさごとに表示を調整したので、その記事を書きます。 @mediaとは @mediaを使うことで、各デバイスや画面サイズごとに適用するCSSを指定できます。 レスポンシブにする場合は必須みたいです。（CSSは本当によくわからない。。） 使い方 以下のような感じで使うことができます。 @media (max-width: 767px){ img { width: 100%; height: auto; } } @media (min-width: 768px){ img { width: 277px; height: 145px; } } (max-width: 767px)はデバイスの画面幅が767px以下だったら、{}のCSSを適用します。 (min-width: 768px)はデバイスの画面幅が768px以上だったら、{}のCSSを適用します。 これは例としてあげていて、レスポンシブ対応させるときは画像サイズを%やautoを使って指定することでいい感じにできます。 767pxを画面幅の境目にしている理由として、今のパソコンやスマホ、タブレットのサイズを考えると、767pxのサイズに合わせる見やすくできるそうです。 @media screen and (max-width: 767px)のような書き方をしているサイトが多数ありますが、screenとはスクリーン画面ではなく、プリンターまたは音声機器以外のデバイスすべてなので、わざわざscreenをつける必要はないです。 まとめ レスポンシブ対応させるときは@mediaを使って、デバイス毎にCSSを変更させましょう。