UIをアップデートしました。

こんばんは。icchyです。

前回の記事で、自分のサイトのUIを変えると言いましたが、

やっとこさ出来ました。

もともとHTML, CSSの知識がそんなになかったので、

1〜2日こちらの本で勉強しつつ、自分なりのアレンジを加えてやっとこさ見易いUIになりました。

もともとフリー素材を使っていたんですが、見た目は悪くないもののソースコードが汚くなっちゃってて

最初はそのまま直していこうかなと思ったんですが、大して必要ないjsファイルとか色々入ってたり、変更が煩雑になるようなjQueryが記述されていて発狂しそうでした。

これはもう最初から作るしかないと思ってコーディングしました。

一番やりたかったのが、モバイルのサイズでも見易いUIにすること。

どうやってやるかすらわかっていなかったのですが、

headに以下を追記して

<meta name="viewport" content="width=device-width">

cssで以下のようなタグで囲むことで

@media (max-width: 599px) {

このwidthの条件の時にcssが上書きされるんですね。

デバイスによってwidthが異なるので、各デバイスに適した大きさにするなら、3~4パターンにもなるようです。

前職でそこまでちゃんとやってたっけな..　と思ったりw

今回はPCサイズでコーディングしてからブラウザを縮めておかしいところを直して行ったのですが、

widthによって画像のカラム数とか変えたりする必要があるので、今後はそれを見越してコーディング出来るようになりたいと思いました。

次はUnit Testを書いていこうかなと思っています。

それでは