HTML テキストの幅に合わせてCSS（border、背景色）を適用させる。

〽️ brock要素とinline要素の使い分け。


▼ HTMLでこんなlabelを作りたい。

コードを書いてみましょう。

html

こんにちは

こんにちは

css

#sample1 { border:solid 1px; } #sample2 { background-color:yellow; }

プレビューしてみます。

ブラウザ（Chrome）






おやおや。

「こんにちは」のテキストの幅に合わせて枠線や背景色を適用したいのに、cssが画面の横幅いっぱいに反映されてしまいます。

それは<p>が「ブロックレベル要素」だからさ。

「ブロックレベル要素」とはなんぞや。ブラウザの横幅いっぱいに広がって縦系統に積み上げられていく要素です。
図で見たほうがイメージしやすいかと思います。

ブロックレベル要素はこのように、画面の横幅いっぱいに順に「積み上げられて」レイアウトされます。
ブロックレベル要素にCSSを設定した場合、やはり横幅いっぱいに反映されてしまいます。

css

p { color:yellow; }

ブラウザ

ほらね。

では中身だけをいじるにはどうすれば？

「ブロックレベル要素」に対して、その内部を構成する「インライン要素」なるものが存在します。 htmlにはブロックレベル要素となるタグ、インライン要素となるタグがそれぞれ存在します。

◼︎ ブロックレベル要素のタグ： 　div h1~h6 p img など
◼︎　インライン要素のタグ： 　span strong a など

先ほどの＜p＞のブロックにインラインの＜span＞を適用させると下のようになります。idを"hello"にしておきますね。

html

おはよう こんにちは

ブラウザ

span要素にだけCSSを施してみましょう。

CSS

#hello { background-color:yellow; }

はい。span要素（blockを構成する部品の一部）にのみCSSが適用されました。

扨（さて）、冒頭のミッションを実現させましょう。

ここまで学んできたものをふまえて、冒頭のミッション（▲こんなlabel）を完成させましょう。
「こんにちは」をinline要素としてhtmlに記述します。

html

こんにちは こんにちは

css

#sample1 { border:solid 1px; } #sample2 { background-color:yellow; }

これで勝ったも同然。プレビューしてみます。





ありゃ。

当然といえば当然ですな。span（inline要素）を２つ連続で記述した場合、同一のblocklevel要素の中に表示されてしまいます。

ほいじゃあブロックレベル要素<p>で囲みましょう。

html

こんにちは

こんにちは

ブラウザ

これで成功です。お疲れ様でした！

ブロックレベル要素とインライン要素を使い分ければ、デザインの幅もひろがっていきますね ♪

「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。

🐧 twitter 🐧