見出しテキストに蛍光マーカーを引いたデザインを作りたかったが、横全体にCSSが適用されてしまう

6396 ワード
HTML Udemy学習応援 udemy CSS HTML テキストリンク

はじめに

こちらは、エンジニアの新たな学びキャンペーンに向けた記事となります。

ざっくり理解するHTML5・CSS3　｜ HTML5とCSS3を使って、お店のホームページ（HP）を作ってみよう！を含む、いくつかのコンテンツを参考にしながら、
ブロックレベルとインライン要素の違いについて、学習したことを記事にします。

今回、問題になったこと

次の画像で示すような、まるで蛍光マーカーを引いたかのようなデザインの見出しを作成しようとしました。

しかし私が書いたHTMLとCSSでは、そうはいきませんでした。
テキスト部分だけ強調されるはず！という想定とは異なり、
次のように、横全体へと蛍光マーカーが飛び出てしまっていました。

こちらの問題を解決した様子を下記に示します。

実行環境

  • Google Chrome 87.0.4280.141

解決への道のり

結論から述べると、ブロックレベルとインライン要素に対する理解が浅いために、
意図しない挙動が発生しました。

ブロックレベルとインライン要素を考える

ブロックレベルとは

一行全て（横幅いっぱい）のボックになるので、その後の要素は横並びにはできない。
ブロックレベル要素の中にブロックレベル要素を入れられる。

ざっくり理解するHTML5・CSS3　｜ HTML5とCSS3を使って、お店のホームページ（HP）を作ってみよう！

インライン要素とは

基本、文字の装飾などで使われる要素。文字幅分のボックスになるので、横並びにすることができる。
インライン要素の中にブロックレベル要素は入れられない。

ざっくり理解するHTML5・CSS3　｜ HTML5とCSS3を使って、お店のホームページ（HP）を作ってみよう！

実行していたソースコードと原因の特定

まずは実行していたソースコードの一部を示します。

index.html
<h1>
  <div class="lightup">
    アイデアブック（仮）
  <div/>
</h1>
main.css

h1 {
  text-align: center;
  margin: 0;
  padding: 10px;
}

.lightup {
  background: linear-gradient(transparent 60%, yellow 40%);
}

『ブロックレベルは一行すべて』、『インライン要素は文字幅ぶんのボックスになる』とのことなので、
今回使われている要素はどちらにあたるのか調べてみます。

ブロックレベル：h1, div
インライン要素：なし

従ってインライン要素がないために、このテキストは"一行すべて"というブロックレベルでの実装となり、
横全体にマーカーが引かれてしまうのは当然の結果でした。

従って、テキストをインライン要素に変更する方法を考えます。

CSS適用の優先順位を考えながら改善する

テキストに紐付けられている要素やクラス（h1, div, lightup）のすべてに、
インライン要素を付与(display: inline;)すれば、とりあえず解決しそうな気もします。
しかし、要素やクラスを使い回すことを想定すると、実用的ではありません。

従って、1つだけインライン要素を付与するだけで済むように、CSSの適用優先順位を調べます。

セレクタの種類によって優先順位が決定づけられるようなのですが、
今回はh1、divという要素セレクタに加え、lightupというクラスセレクタがあります。
次の引用から、クラスに対してインライン要素を適用すれば良いことがわかります。


CSSの適用優先度の考え方

そこで、lightupクラスにインライン要素を付与しました。
次がソースコードと、その実行結果です。

main.css
h1 {
  text-align: center;
  margin: 0;
  padding: 10px;
}

.lightup {
  background: linear-gradient(transparent 60%, yellow 40%);
  display:inline
}

テキスト部分だけ蛍光マーカーで引いたようなデザインにしたい！という意図が反映できました！

参考