CSS レスポンシブデザイン

CSSのレスポンシブを試してみました。
レスポンシブというのはPCとスマホで文字サイズ、レイアウトを切り替えることのようです。

PC での画面

PCでは上のナビゲーションの部分が横一列になっています。
そして下の文字は1.3rem になっています。

スマホの画面

このように切り替わりました。
ナビゲーションは縦になり、文字サイズは0.75とちいさくなりました。

わかりやすいように、切り替わったときには背景がグリーンになるようにしています。

追加記入した部分

レスポンシブのために追加した部分です。
HTMLではmetaタグを書きました。
これでスマホ対応になります。

しかしこれだけではみにくい部分が出てくるので、CSSでナビゲーションの並び方を変え上下にしています。

文字も少し小さくして、スマホの画面にあうようにしました。

わかりにくかったこと

@media(max-width: 600px)

わかりにくかったことは、このかきかたです。
最大値が600pxのとき適用されるということです。

最大値が600pxということは、それ以下ということでスマホに限らずタブレットも含まれるかもしれません。

この600pxという部分を変更することによって、どのサイズに適用させるかを決めることができます。

また600pxという部分を、450pxとか700pxといったものにも適用させるように、複数書くこともできるようです。

CSSは機能的な部分とデザイン的な部分があると思っています。

ボックスの並べ方などは機能的だとおもいますし、グラデーションなどはデザイン的な要素が強いと思います。

CSSにはたくさんの種類があります。

これをすべて覚えておくことは難しいと思いますが、少しだけでもやっておくと、違う場面でもわかりやすいと感じました。

ここまでで簡単なチラシていどのものは書けると思いますので、CSSについてはこのあたりで終わりにしようと思います。

もし次を考えるとしたら、phpがおもしろそうだと思っています。

興味はなかったかと思いますが、ごらんいただいてありがとうございました。