はじめに

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

今回、問題になったこと

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

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

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

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

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

ざっくり理解する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
インライン要素：なし

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

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

テキストに紐付けられている要素やクラス（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
}

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