急ですが本投稿が100本目となります!
ご愛読いただいている皆様のおかげです。プレゼントを企画していますので、後日発表させていただきます!(編集部)。さて、以下から今日の投稿 ー

——————————————————————————————
こんにちは!

朝は元気に挨拶するだけで一日のモチベーションも作業効率もぐ~んと上がる気がするので、いつでも明るい挨拶を心がけている、どうもカオツです。

そんなこんなで今回は、CSSの書きやすさもぐ~んと上がるHTMLの書き方について伝授したいと思います。

1にも2にも「ID」と「Class」を付けるそれだけっ!

世の中には色々なHTMLが存在します。

わたくしカオツは、CMSで作られたサイトや手書きで作られたサイト、新しいサイト、そして古いサイトなど、今までたくさんのサイトを見てきましたが、HTMLの書き方はサイト毎に全然違いました。

そんな中でも、「このPCサイトは運用・管理・修正が簡単だ!」と思えるサイトは、いつも決まって「ID」や「Class」が適切に付与されていました

具体的な例として下記の画像を御覧ください。

【普通のHTML】
efo-waruirei_s

【美しいHTML】
efo-iirei_s

一目瞭然ですね!?

【普通のHTML】は、その項目が何を目的としているのか分からなかったり、どこからどこまでが同一カテゴリなのかが分からないような記述になっています。

一方、【美しいHTML】では、カテゴリ毎に「ID」が付与され、繰り返す項目毎に「Class」が付与されています。結果的に誰が見ても理解できるHTMLになっていることがグッドポイントですね。

CSSを書く際に、HTML上の「ID」や「Class」がとても重要になります。極端な話、対象になる「ID」「Class」が多いに越したことはありません。

ちなみに上記画像のHTMLに対して、同様の見た目になるようにそれぞれCSSを設定してみました。

efo-kannseikei

なんとCSSの記述量に210文字も差がありました!
「なにがそんなに違うの?」と思われるでしょうが、1つの項目を指定するだけで下の画像の様に記述方法、記述量がまったく違います。

【ID,Classがない場合のCSS】
waruicss

【ID,Classがある場合のCSS】
efo-iicss

上記の例は文字量の少ないHTMLで検証していますが、それでも210文字の差!これが通常のページだったとしたら何十倍、更にそれが数ページともなれば……

(゚A゚;)ゴクリ

先を見据えたHTMLを作ろう!

また「ID」や「Class」がしっかりと付与されていれば、サイトに項目が追加された時のメンテナンスが容易になります。

さらには、既存のHTMLを用いてスマートフォンページを作成する際にも、非常に設定が楽になるといった利点があります。

サイト更新やスマホ対応を行う度に、「ID」「Class」が無いからという理由で、「無駄」な工数と出費が発生してしまうのは好ましくないですよね。

今ブラウザにちゃんと表示されているから「これで良し!」ではなく、今後の運用も考慮することが重要です。つまり、HTMLは誰が見ても分かるものであるとグッドだと思います。

今からでも遅くありません。今一度、HTMLに「ID」「Class」がしっかりと、そして分かりやすい形で付与されているかをチェックしてみはいかがでしょうか。