以前に書いたHTMLの記事同様ですが、これはくだらない長話です。 文才のない私が自分の考えを殴り書きに近い形で書き出しているに過ぎません。 ご了承ください。
今回は「CSS」をフォーカスしています。 と言っても難し事とかは省いていますし、解説も簡略しますので必要と感じたら調べてくださいませ。 また、多少謝りもあると思いますが、目をつぶってください。 酷いものは直しますので各種SNSでお伝えくださいませmm
かれこれ十年近く「マークアップエンジニア」を名乗ってHTMLとCSSを書く仕事をしてきたものです。 近年はJavaScriptもやってます。
私がWebに足を踏み入れたのはまさに、テーブルレイアウトからCSSレイアウトへの移行期間でした。 テーブルレイアウトでの作り方にようやく慣れた頃に新たな課題として出会ったのがCSSでした。 海外のCSSレイアウトのモダンなデザインに心を揺さぶられ、CSS Zen Gardenでわくわくしたのを今でも覚えています。
その後、CSSをなんとか業務レベルで扱えるようになり、CSSレイアウトが組めるだけでお仕事を頂けるようになった私は、FireFoxとIE6のみ(他のブラウザはまぁそれなりに...)でレイアウトを崩さない事、そして正しいマークアップをする事が責務でした。
ダブルマージン、xml宣言での互換性モード化、画像のスペース問題、詳細度の曖昧さ.... これらの問題を解決するのに奮闘していたわけですが、DevToolなんてもちろんですが、Debugする方法が背景色を要素に与えたり程度のしか出来なかった時代でしたので大変ではありましたが今に比べれば楽なもんでした。余談ですがFireBugが登場しその使い方を知った時は気が狂うほど喜んだ事を覚えています。 そんな時代です。
そんな私がCSSをお仕事で使われる方には一度はやっていただきたい事を纏めてみました。 以前はHTMLから入った人なら誰も通る道だった気もしますが、今はそうでもないと言う話も聞きましたので纏めてみました。 ※ただし実際のお仕事でするには向いていない事ばかりなので、あくまで勉強用か自己責任でまかなえるお仕事のみでお願いします。
※コレは実践向けです。 「HTMLを制するものはCSSを制する」（個人的意見w） ナニワトモアレ、HTMLを正しく書きましょう。 レイアウトが上手くいか無い場合はHTMLをまず初めに疑う。 レイアウトが崩れると必ずCSSを疑ってしまいがちですが、HTMLの記述だったりが問題事も結構あると思います。
簡単にいうと「Normalize.css」などを一度使わずに、HTMLの用意されたデフォルトのStyleが適用されている状態から意図したレイアウトを組んでみるという事です。 これはとても重要です。 何がどうリセットされるのかを理解する事ができます。その上で「Normalize.css」などを使ってみるとなぜ「Normalize.css」が良いのかが分かると思います。
CSSプリプロセッサからCSSをはじめる方も多いと聞いた事があります。 ですが一度、CSSを直接触ってみましょう。 その上でプリプロセッサを使うとより活用出来ると思います。
かなり効率の悪い事のですが、一度はHTMLの要素にだけCSSを適用してレイアウトを組んでみましょう。 簡単なレイアウトで構いません。 どれだけ不効率かが体感できます。 その感覚を持つ事で近年の主流であるオブジェクト指向なCSS(OOCSS、BEM、SMACSSなど)の理解につながると思います。
HTMLに続いて、殴り書きを書いてみました。 CSSの未来はどうとかを本来は書くべきなのかなって思ったのですが。 CSS4とかそのあたりの話は他で扱っている記事にお任せして個人的に目を向けて欲しい内容に絞りました。 まだ纏めて切れていないままの強行投稿（？）ですが、気が向いたら加筆致しますので今回はこの辺で。