Eyes, JAPAN Blog > CSSでお絵描き

CSSでお絵描き

Masato Yamamoto

この記事は1年以上前に書かれたもので、内容が古い可能性がありますのでご注意ください。

こんにちは. 若者のアルバイトの山本です.

突然ですが, みなさんはCSSが好きですか? 自分は嫌いです. CSSが苦手で嫌いになったという感じです. CSS自体よく分からないけど, DevelperToolをポチポチやって確認しながらやっていけばできる謎のモノという感じでした.

そんな時,  若者はどうやってCSSを覚えたのか という記事があったので読んでみました. するとこういう風に記事には書かれていました.

“BootstrapのようなCSSフレームワークからCSSを始めると、floatpositionのようなレイアウトに関わるプロパティがどういうものなのかを知らなくても、何となくでWebアプリのレイアウティングができる。
そしてブラックボックス化されたBootstrapのコードを読もうとしても、プロパティの意味がわからなかった。”

まさにこれです! 自分も同じ悩みをかかえていたので, この筆者がとったアプローチでCSSを学ぼうと思いました.

具体的には

  1. 本などでCSSを体系的に学ぶ
  2. 既存のCSS設計手法を学ぶ
  3. CSSフレームワークのコードを読む
  4. 仕様書読む

っていう感じです.

さっそく本を読んで, 体系的に知識を入れていくと今まであやふやだったところが, 解決されていきました.

CSSについて調べている最中にほとんどCSSだけで, 絵を描いているものを見かけました. 以前だったら, “すごいね” で終わっていたのですが, CSSをちょっと学んで調子にのった若者は自分でもやってみました.(Embedできるかと思ったらできなかったので, コードを見るには画像をクリックしてください)

パックマン (楽そうなので)

pacman

ドロイド君(他のサイトのやつをマネしながら描いた)

スクリーンショット_2015-11-12_16-24-57

CSSすごい!!! CSS楽しい!!

ようやく記事で言うところの, 本で体系的にCSSを学ぶところが終わったのでこれからはCSSの設計手法を学んでいきたいと思います.

Comments are closed.