どうもこんにちは、時計の針を眺めていたら視力が下がった気のするさいほうへいきです！
僕はこちらの以前の記事で初心者向けのHTMLタグをご紹介しましたね。読んでくださった方もいるかもしれません。
でも、この中で紹介した『色付け』の方法、実は禁じ手のような危険な代物だったんです！
今回は、プロのエンジニアがなぜそんなコードを嫌うのか、じゃあどうすればいいのかをご紹介していこうと思います！
禁じ手ってどういうこと？
突然『禁じ手』なんて言われて、困惑しているかもしれませんね。
<span style="color: red;">実際、こちらのコードでも問題なく動きはするんです。
「じゃあ動くならいいじゃん？」と思うかもしれませんが、なんとこの方法……保守性やSEO対策において、あまりにも大きすぎるデメリットを持っていたんです！
それらについて、ひとつひとつ解説していこうと思います。
「一斉変更」が地獄になる
想像してみてください。
あなたが100記事くらい書いて、そのすべてに「ここが大事だ！」と赤色のコードを直接書き込んだとします。
それからまたしばらくして、ブログのデザインをリニューアルしたとしましょう。
「赤じゃなくて、雰囲気に合う水色に変えたいな～」と思ったらどうなるか？
100記事すべてを開いて、何百箇所もあるredを一つずつ手作業で書き換える必要が出てくるんです！
これ、到底やってられませんよね。
ページ数が少ないならまあいいでしょうが、それでも赤色の箇所を探して書き直して、終わったと思ったらまた見つかって……のクレイジーループに突入する危険があるわけですね。
こちらの手段は、剥がしやすい壁紙を貼らないで、わざわざ落とせないペンキで塗り潰すようなものです。
塗り直すには、壁を全部削るしかなくなってしまうんですね。
「見た目」と「中身」がゴチャ混ぜになる
HTMLの本来の役割は、「ここは見出し」「ここは段落」という「文書の構造」を伝えることです。
そこに「ここは赤」「ここは18px」という「見た目の指示」を詰め込みすぎると、コードがどんどん複雑になり読みづらくなります。
<span style="color: red; font-weight: bold; font-size: 20px; background-color: yellow; border: 1px solid black;">
ここが大事な文です！
</span>
<span class="important-text">
ここが大事な文です！
</span>
スッキリさせておいたほうが、後から自分で修正するときも楽ですし、何より検索エンジン（Google）にとっても優しい作りになります。
せっかく書いた記事ですから、多くの人に読んでもらいたくないでしょうか？
SEO対策の観点からも、スッキリさせるのは重要なんですね。
WordPressの機能とケンカすることも？
WordPressのテーマには、最初から「この場所はこの色にする」というルールが決まっています。
しかしインラインスタイルは「最強の優先順位」を持ってしまうため、テーマ側で色を変えようとしても、あなたの書いたstyle="..."がそれを無視して居座り続けます。
「テーマを変えたのに、一部だけ色が変なまま残っちゃった……」というトラブルの正体が起きかねません。
見ている側からすると、猛烈な違和感に襲われてしまうわけですね。
対処法
「じゃあ色をつけちゃダメなの？」と思うかもしれませんが、そうではありません。
WordPressの標準機能を使い、いい感じに色付けを行うことができるんです！
もしあなたが権限を持っていれば全ページ共通のスタイルを変更することもできるのですが、普通のコントリビューターの場合で紹介していきます。
ざっくり基本の色付け
まず記事編集画面を開き、下の方にスクロールしていきます。
すると『カスタムCSS』という欄があるんですね。
ここに、次のようなコードを追加してみましょう！ コピペで大丈夫です。
.highlight {
color: red;
}
そしてもとの記事欄へ戻り、赤くしたい文字をこんなふうにしてみます。
<span class="highlight">赤文字の部分</span>
すると……ちゃんと赤文字になるんですね！
もしこの文字を赤から青にしたい場合、『カスタムCSS』に戻ってredをblueにするとよいでしょう。
そうすればいちいちちまちまやらずとも、そのページは一括で書き換えれるんですよ。
応用
というわけで、次は複数の色を使えるようにしたいですよね。
その前に、少し理解をしておくと飲み込みやすくなります。
.highlight {
color: red;
}
さきほども挙げたこのコードですが、いま特に重要なのは『highlight』と『red』の部分。
『highlight』は『クラス』と呼ばれるもので、機械が理解しやすい目印のような役割をしてくれます。
そして『red』はいわずもがな、色名ですね。
#ffffffのような形式にしても大丈夫です。
では、次はこちらも見てみましょう。
<span class="highlight">赤文字の部分</span>
こちらにも『highlight』と書いてありますね！
実は、こうやってspanspanで囲んでいる文字にクラスの目印をつけているんです。
その後、色付けするコードが目印部分を探し、上手に色を付けてくれるわけですね。
つまり、目印を複数作れば色を同時に複数使えます！
カスタムCSSに、次のコードを上書きしてみましょう。
.highlight-1 {
color: red;
}
.highlight-2 {
color: blue;
}
.highlight-3 {
color: green;
}
コードの内容は理解できましたか？
『highlight-1』という目印には赤、『highlight-2』には青、そして『highlight-3』には緑を付けよう、というコード。
そしてこのHTMLと組み合わせてみましょう！
<span class="highlight-1">赤文字の部分</span> <span class="highlight-2">青文字の部分</span> <span class="highlight-3">緑文字の部分</span>
これを応用すれば、禁じ手を比較的避けつつ色をうまく付けれるんですね。
（まあ欲を言えばCSSファイルを一個作って都度読み込みたいですが、権限がないので妥協です）
クラス名について
さてさきほど、目印としてクラス名にhighlight-1やhighlight-2という名前を使いましたね。
これはなんでこんな長ったらしい名前になっているんでしょう？
そのまま『red』とか『blue』とかではまずいのでしょうか？
実は、分かりやすさを追求するために、ほんのひとてま加えるだけで段違いにレベルアップできる重要な方法なんです！
後で CSS を書き換えてred（赤色にしていたもの）を「やっぱり青色にしよう！」としたとき、「名前はredなのに色は青」という、いろいろ混乱を招きかねない事態に。
そこで、クラス名には「色」ではなく「役割」で名前をつけるのが鉄則です！
たとえば……
- .important（重要！）
- .highlight（目立たせたい！）
- .caution（注意して！）
こうしておけば、後から「重要箇所の色を赤からオレンジに変えよう」と思ったときも、名前と見た目が矛盾しません。
クラス名は機械が見るだけでなく、あなた自身が後で迷子にならないための「未来の自分のための目印」でもあるんですね。
まとめ
いかがでしたか？
今回の記事では、『なぜHTMLに直接色を組み込むのが禁じ手なのか、そしてその対処法』をご紹介しました！
なお、こちらは僕が最近作っているYouTube用掲示板の紹介です！
では、またお会いしましょう。
さいほうへいきでした！
コメント