CSS Advent Calendarが17日だけ空いていたので書いてみます。

TL;DR

食わず嫌いだったCSSに入門してみたら思ったよりも理解できた
わかりやすいサイトで入門して、写経して、なんか作ってみた
CSSを避けてきた人もやってみると案外いけるかもしれません

はじめに

サーバーサイドとかなんでもやるけどCSSだけは触りたくないし勉強もしたくないというエンジニアの方は割と多いんじゃないでしょうか。僕もそんな感じだったのですが、あるきっかけでCSSもできるようになろうと思い勉強してみると思ってたよりも理解できた気持ちでなったので、やったことについて書いてみます。

やったこと

入門する

サルワカ HTML&CSS入門：イチからWebデザインを習得する講座

すげーーわかりやすいです。電車の中で1週間くらいで一通り読んでこれまで疑問だったとこが解決しまくりました。inline/blockの概念をわかってなかったレベルだったのでそこのなるほど感すごかったです。

Webクリエイターボックス日本語対応！CSS Flexboxのチートシートを作ったので配布します

CSSって特にモノを中央に置く・右に寄せるみたいなことがしたいときにわけわからないイメージがあったのですが、このサイトを見てFlexbox使えば大体のやりたいことはできるのではという気持ちになっています。要するにモノが縦か横に並んでいて、並び方向の設定(justify-content)と並びと垂直方向の設定(align-items)をすれば思ってるレイアウトになるよね的なイメージ

HTML5 Experts.jp これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！

Webサイトって大体はヘッダーとフッターがあって、Flexboxよりももっと枠線引いたみたいにレイアウトできるとわかりやすいのかなと思ってたらGridレイアウトというのがあり、使ってみるとそれはそれは分かりやすかったです。IEがGridレイアウトの古い仕様を実装しているという辛みがあるみたいです。 https://caniuse.com/#search=grid

写経する

HTML5&CSS3デザインブック

一からHTML/CSSを書いてWebサイトを構築していく内容の本やWebサイトを見て写経していきました。この本はモノを中央や右に寄せたりするのにfloatを使っているのですが、そこをFlexboxに置き換えて本の半分くらいまで写経しました。写経するときの定番としてちょっと値変えてみたりしていちいちなるほどーとなっていました。この本がすげーオススメというわけではなく他に何かいい本があればそれでいいと思います。

なんかつくってみる

dev.toっぽいレイアウトのQiita
https://qiita-to.herokuapp.com
https://github.com/adwd/qiita-to

QiitaのAPIから記事とタグを取得してdev.toっぽい雰囲気で表示するNuxt.jsアプリを作ってみました。画面は一つだけで、記事とタグ以外の箇所は全部ダミーです。アプリケーションのヘッダー、左右・中央の配置、フッターはGridレイアウトを使っています。dev.toのレイアウトをにらみつつ、わからないところはDevtoolsでCSSを拝見させてもらったりすると色々発見がありました。もうちょっと手をかければそれっぽくなるかも？Nuxt.jsとVue.jsを初めて触ったのですがなんか良かった気がします。
一応レスポンシブにしてみました。

まとめ

食わず嫌いですごい苦手意識があったCSSですが、わかりやすいサイトがあってそこから写経となんかつくってみたら勉強になって(今のところ)CSS怖くないという話でした。
これでCSS初心者くらいにはなったんでしょうか？めちゃくちゃ凝ったランディングページとかは作れる気がしないですが、ふつうのWebページのレイアウトを整えるくらいはできるようになりたいなあと思っております。