Help us understand the problem. What is going on with this article?

CSSに入門してみたら怖くなかった

More than 1 year has passed since last update.

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

TL;DR

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

はじめに

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

やったこと

入門する

スクリーンショット 2017-12-20 22.04.26.png

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

スクリーンショット 2017-12-20 22.12.42.png

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

スクリーンショット 2017-12-20 22.16.33.png

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

スクリーンショット 2017-12-20 22.42.35.png

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

スクリーンショット 2017-12-20 22.43.19.png

スクリーンショット 2017-12-20 22.43.38.png

まとめ

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away