俺がHTML&CSSを覚えた方法
[web] CSSを「ちゃんと」書けるようになりたい - Greenbear Diary (2009-05-06)
はてなブックマーク - Greenbear Diary - CSSを「ちゃんと」書けるようになりたい
今日こんな記事をブクマしたので、参考になるかどうか分からないけど俺のマークアップの勉強したての頃を思い出しながらエントリ。
俺はこの業界に入るまで、HTMLの構造さえ全く知らなかったんですが、独学+αで何とか今サイトのマークアップが普通に出来る位までは使えるようになりました。と、言っても別に特別な物は何も無いんですが。
Step1は、まあ基礎的な事が何もわからない文字通り「ずぶの素人」だったので、書籍で「1週間でHTML&CSSを覚える」系の目標が分かりやすい本を買って首っ引きで手を動かして、サイトを作りました。基本の基本（絶対リンクと相対リンクの違いとか、DOCTYPE宣言の書き方とか、htmlの書き方の約束とか。マジでそれすら知らなかった）をこれで押さえる事が出来ました。
それでも2回位繰り返して習作したけど。
この時に何でネットでの情報では無く、書籍にしたかと言うと「何が分からないから、分からない」という状態だったので調べるにも調べられないという体たらくだったので、一覧性に優れた書籍を使ったというのが一点。本を自腹で買った方が勉強に身が入るだろうというのが一点。あとは書籍だとコピペが無理なので、自分を追い込む為に全て手打ちにしたいというのが一点でした。これは自分でもアナクロだなあと思ってるんですが、今でも（RubyとかJavascriptを勉強してるので）比較的守ってる事です。
Step2として、その後にブコメでも書いたけどWeb標準の教科書―XHTMLとCSSでつくる“正しい”Webサイトと実践Web Standards Design―Web標準の基本とCSSレイアウト&Tipsの2冊を（無理して）購入して本格的に勉強に入りました。まあ、それまで基礎も分からない状態だったのでこの2冊を読んでも最初は何が何やら…日本語でおkという状態だったんですが、（眠気を我慢して）取り敢えず最後まで通読しました。この時も実際に書いてあるコードを自分で打ってみては、ブラウザで確認という作業をしました。
Step3は良いマークアップしてるサイトを真似して作るという作業に入ります。最初はHTMLとCSSを丸移ししてみてから、今度はブラウザの表示だけを頼りにして、自分なりにマークアップしていきました。これの良い点は自分はデザイナーじゃないので画像とかをオリジナルで作れなかったんですが（今でも作れるとは言い難い）参考のサイトから画像を全部落して使えるという点です。俺はこれで画像の切り方とかを覚えていきました。
Step3とか実務とかこなしつつ、有名なマークアップの人のブログとか、はてブの記事を参考にCSSやらHTMLのTipsやらを収集していくのが、俺も現在進行してるStep4ですかねえ。これで精度を高めるようにして行くように努力してます。後はW3Cの通読ですか…。俺もまだそこまで読み込んで無いんですが。恥かしい。
Step3までで、多分普通のサイトのページは作れるようになるんじゃないかと思います。でも、CSSのテクニックとかも大事ですけど、それよりもHTMLの文章の構造化をちゃんと出来るようになれば、CSSのクロスブラウザ対策の時間も最低限に押さえられるかと。なので、Step3では「どんな風に構造化するとこんな見た目にできる」みたいなのを意識してると良いかもしれません。俺もまだまだ甘いですが。
最後に注意点として習作にはDreamWeaverは絶対使っちゃダメ！って事ですかね。いや、ホームページビルダーも駄目ですけど。練習の時点でタグの自動補完とか、デザインビューでの操作でソースも変わるとかの便利機能を使うと確実に覚えられないと思います。良いエディタで手打ちが一番なんじゃないでしょうか。
ちなみに元ネタに書かれてる
marginやpaddingはとりあえず0にするものなのか
文字のサイズはem, px, pt, %のどれで指定すべきなのか
divを3カラムに並べる方法
ブラウザの非互換を踏まないために気をつけること
ですが、私見ではこんな感じかと。
marginやpaddingはとりあえず0にするものなのか
とりあえず0にします。ブラウザのデフォルトのCSSが原因で表示が崩れる可能性があるので。やり方は必要なタグにそれぞれ設定するのが良いかなと。
文字のサイズはem, px, pt, %のどれで指定すべきなのか
文字サイズは案件によるんじゃないかと…というのは置いておいて。最近ではやっぱりアクセシビリティを確保という事でemか%が多いと思います。
divを3カラムに並べる方法
3カラムを囲むようにdivを作ってwidthを設定して、それぞれのカラムにもwidth設定。そんでfloatなんかが簡単でしょうかねえ。
こんな感じ？5月21日追記：ごめんなさい。idのnameが適切では無いです。詳細は脚注*1
HTML*2
<div id="wrapper"> <div id="1st">foo</div> <div id="2nd">bar</div> <div id="3rd">baz</div> <div>
<div id="wrapper"> <div id="left">foo</div> <div id="center">bar</div> <div id="right">baz</div> <div>
#wrapper { width: 150px; } #1st, #2nd, #3rd { width: 50px; float: left; }
#wrapper { width: 150px; } #left, #center, #right { width: 50px; float: left; }
ブラウザの非互換を踏まないために気をつけること
さっき書いたようにまずHTMLをきちんと記述。CSSは出来るだけボックスにwidthかheightを設定する。marginとpaddingを上手く使い分けるって感じですかねえ。あとはボックスのサイズに気を配る事か。ハックは奥の手で。
さっき気付いたんですが、元ネタのブロガーの方はRubyで作る奇妙なプログラミング言語 ~Esoteric Language~の著者さんのようですね…。俺は逆にRubyが使いこなせる勉強法を教えて欲しいです。（お
