こんにちは、システムチームのKです。
ここ数週間、部下のHTML、CSSコーディングを見る機会があったのですが、
なるほどこういうところで詰まるんだな。と思うことがあったので、
それらについて解説をしてみようと思います。
前提として、デザインカンプが存在し、
そのカンプ通りにコーディングするシーンを想定しています。
親要素から子要素へむかってコーディング
まずコーディングの大原則として、
親要素から子要素に向かって進めます。
デザインカンプを見て、
「ここの文字は黄色だ！」
だからまずcolorを黄色にして…
と、カンプから読み取りやすい部分からコーディングすると
地獄の始まりです。
htmlタグを除けば、bodyタグが一番の親要素になります。
ただ、bodyタグにスタイルをあてることはほとんどないので、
実質的には、body直下の要素が一番の親になることが多いですね。
まずスタイルをあてるべきは、そのbody直下の要素なんですね。
理由は次の項目で一緒に解説します。
着目するのは、親要素
コーディングの際、ページのHTML構造をすべて把握しておかないといけないのかというと
そうではありません。
基本的には、スタイルを当てている要素の、親要素まで把握していればOKです。
そもそも、ページ全体を把握しながらなんて、頭のメモリが足りません。
これは、影響を受けるのは、親要素のスタイルだからです。
CSSプロパティには親要素から継承するものとそうでないものがあります。
「自分は指定していないのに、なんでこんなスタイルが当たるんだ？」
と思ったときは、まず親要素を見ましょう。
前述したように、親要素からスタイルを当てていかないと
後から継承が発生して、
せっかくコーディングした箇所が親の影響を受けて崩れる。
という問題が発生します。
ChromeやEdgeを使って開発しているなら、
検証ツールの「計算済み」タブから、各CSSプロパティがどの要素に指定されたものかを
確認することができます。
要素をすべて「長方形」に置き換える
CSSの指定の仕方によっては、
border-radiusをつけて丸にできたり、
borderを駆使して、三角を作ることもできます。
ですが、それらもすべて、HTML的には長方形です。
丸でも、三角でも、人型に切り抜かれた形でもありません。
HTML、CSSコーディングは、
長方形を上から隙間なく並べていく
作業です。
デザインカンプがあるなら、
まず、要素を全部長方形に置き換えて、紙に書いてみましょう。
紙に書くのは大事な工程です。
HTMLから自分で書く場合は、必要なHTML要素の指針になりますし、
HTMLが決まっている場合は、どの要素にスタイルをあてれば良いか見当がつきます。
スタイルを当てている要素はインライン要素か、ブロックレベル要素かを正確に把握する
いまこのブログを読んでいる方は、
インライン要素、ブロックレベル要素という言葉を知っている。という前提でお話しします。
もし知らない場合は、この辺りを読んで理解するようにしましょう。
さて、ブロック要素はわりと問題なく扱えるのですが、
インライン要素の扱いに苦戦する人が多い印象です。
インライン要素では以下のことができません。
・width、heightの指定
・上下のmarginの指定
厄介ですね。
また、paddingをつけても、
上の要素に被りながらpaddingがつきます。
インライン要素か、ブロックレベル要素かを把握しないままだと
この部分の性質の違いで、思った通りにコーディングできないことがあります。
paddingとmarginの使い分け
自分は background をどのようにつけたいかによって使い分けます。
padding で確保した余白には background で指定した background がつきます。
margin で確保した余白には background で指定した background がつきません。
これだけは覚えておいてください。
今回５つ、初心者が詰まりやすい箇所について解説と対応方法を書いてみました。
HTML、CSSコーディングがうまくいかない時に
思い出してもらえれば幸いです。
