初めてカスタマイズするとき、divとspanの違いって何だろうって初心者は思ってしまうものです。これはブロックレベル要素とインライン要素の違いを知ることで、解決できます。
HTMLタグを知り始めたカスタマイズ初心者向けに感覚的に理解できるような簡単な内容にして、極力混乱することのない基本的なものや、入れ子にできる例を多数あげてるので、比較的わかりやすい内容です。
最終的に、spanとdivの違いや改行がはいるタグと入らないタグがあるってことを、これから意識していける状態になればパーフェクト！！HTMLタグやカスタマイズ超入門から覚えていきましょう＾＾
ブロックレベル要素のHTMLタグは、前後に改行が入る要素
改行が前後に必ず入る要素が『ブロックレベル要素』です。例えば、目次に使われる『見出し』や『リスト』『段落』『引用』で使われるタグの前後には、必ず改行がはいります。そのほか下記のタグがブロックレベル要素です。
| HTMLタグ | タグの意味 |
|---|---|
| <h1>～<h6> | 見出し |
| <ul> | 番号なしのリスト |
| <ol> | 番号つきのリスト |
| <li> | ulタグ、olタグ内のリスト |
| <p> | 段落 |
| <br> | 改行 |
| <blockquote> | 引用文 |
| <div> | 改行して使う塊の範囲 |
| <table> | テーブル（表） |
前後に改行が入るタグと、そのタグの意味がそれぞれあるってことが解ります。
似たような見た目でも、タグによって意味が変わる例
HTMLタグとその意味をみたら、タグによって意味が違いますよね。例えばリストに似てる形で段落<p>や改行<br>のあたまに・を使ってリスト風にしてみます。見た目は同じでもタグの意味が違う例を見てみましょう。
- 例１、段落と改行
・でもリストではない。
・pタグにbrタグを使ってる。
・ブロックレベルの要素です。
- 例２、番号なしのリスト
- 番号なしリストul
- その中にリストliを使用
- タグがpと違う
- 改行が前後に必ず入る要素
上のリストに似てるけど、段落<p>に改行<br>を使ってリストではないと、要素の検証でHTMLを見ればわかります。検索エンジンもおなじです。文章のまとまりの内容である『段落p』と『改行br』を使った文章ということです。
これらは段落と改行を使ったものと、番号なしのリストを似せるようにCSSを触ったものですけど、HTMLの要素がどうなってるか見てみましょう。
段落とリストのHTMLタグの違い
HTMLタグの違いは、検索エンジンの仕組み上クローラーならタグの違いまで読みとるけど、ブログを見にきたユーザーさんはパッと見ても気付きませんよね。上述の段落とリストの『タグの違い』を見てみましょう＾＾
※デベロッパーツールの要素の検証を使うとユーザーさんもタグ違いを見れる。
- 「例１、段落と改行」の要素
・リストに似てる。<br>
・でもリストではない。<br>
・pタグにbrタグを使ってる。<br>
・ブロックレベルの要素です。
</p>
要素を見たら段落<p>に改行<br>を使った１つの段落になってます。
- 「例２、番号なしのリスト」HTMLタグの違いを見てください。
<ul>
<li>その中にリストliを使用</li>
<li>タグがpと違う</li>
<li>改行が前後に必ず入る要素</li>
</ul>
こちらは、番号なしリスト<ul>にリスト<li>（項目）を並べたものです。
見た目は似てるけどタグが違って、例1は「段落と改行の文章」例2は「リスト」と解るし、検索エンジンはこのタグを見分ける。って事をほんのり覚えておくと良いかもですね♪
ブロック要素のなかにブロック要素を入れて、入れ子にする事も
リストで見ると解りやすいかもしれません。でも、ちょっとレベルが上がった気がしますけど、よぉく見たら理解できるのでカスタマイズが1つ成功すればチャレンジして欲しいです。
- 番号付きリスト<ol>の中にリスト<li>が入る
- 番号付き<ol>の中に番号なし<ul>を入れる
- 入れ子状態にするのは、HTML（WordPressならテキストモード）で編集。
<ol> <li>テキスト</li> <li>テキスト <ul> <li>テキスト</li> </ul> </li> </ol>
画像で見てみたら下記。
- 番号ありリストを表す<ol>の中に
- リスト<li>
- その<li>の中に、番号なしリスト<ul>
- さらに<ul>の中にリスト<li>がある
これは、ほんの一例で<div>の中に<div>または段落<p>や番号あり<ol>、番号なし<ul>リストを入れた範囲の広いカスタマイズも出来ちゃう感じです。
インライン要素のHTMLタグは、改行が入らないから文中に使える
上記のブロック要素とはちがって前後に改行入らないインライン要素は、文章の途中でも使えるタグになるんですね。
| HTMLタグ | タグの意味 |
|---|---|
| <a> | リンク |
| <b> | 太字 |
| <strong> | 強調 |
| <img> | 画像 |
| <span> | 改行なしで文中に使える範囲 |
上記はほんの一部ですけどHTMLタグで、ブロック要素のタグ内に、文中に使えるインライン要素のタグを仕込めますよぉ。ってことなんですね。例えると下記。
上記▲の「HTMLは下記▼」のように書きますが、HTMLタグは解りやすいようにシンプルにしました。
ブロック要素<p>のなかにインライン要素<span><a><strong>が入った例で、文中で使えるのがわかります。
インライン要素の中にインラインを入れ子にすることも可能
改行が必要ないspanの中にインライン要素のspanやaを入れ子状にすることも可能ってワケです。
この仕組みを知れば自分でカスタマイズする時ガシガシ楽しめるんじゃないかなぁ！って思うので、ゆっくり見てくださいねっ♪
簡単な例ですけど、段落<p>に文字を大きくするspanタグ、その中にリンクのaタグを入れてます。（タグは簡略化してます。）
上▲がHTMLで下▼のように字を大きくするインライン要素spanの中に、文中で使えるインライン要素のaタグを入れてもOK！ちゃんと表示されます。
改行が必要な（プロックレベル要素）<p>のなかに、文中に使える（インライン要素）<span><a><strong>など入れる事ができる。この場合インライン要素の親要素は、<p>になる。
LINK基本CSSのセレクタの指定★親子孫要素を知れば装飾が反映するよ！ブログ構造HTMLを見て理解
ブロック要素のなかにブロック要素、インライン要素のなかにインライン要素を入れるのも可能！
divとspanの違い
divとspanの違いは、ブロック要素とインライン要素の違いで使い分けてカスタマイズができるってことになります。※spanは文中で使えるものだから、前後に改行を必要とするブロックレベル要素<div>や<p>を入れられません。
- ブロック要素のdivは前後に改行がはいる。
- 『段落などをすっぽり囲う枠（box）を作りたいとき』は、divをつかう。
pタグの親要素にdivを持ってきて囲んだカスタマイズもOK！
<p>段落の中に<span>span</span>や<a>aタグ：リンク</a>を入れたり<strong>強調文字</strong>を入れることができます。</p>
</div>
ブロックレベルの段落を、divで囲ってクラス属性で名前を付けて『class=”example-source”』ボックスのように装飾したCSSの例。
.example-source {
padding: 1em;
background: #fff0f0;
border: 1px solid #fdcdcd;
border-radius: 3px;
margin-bottom: 2.2em;
}
- インライン要素のspanは文中でつかえる。
- 文中で使いたい『文字単位を囲いたいとき』は、spanをつかう。
この文中で使ったspanのHTMLの要素は下記になります。
インライン要素のspanにクラス属性『class=”key”』で名前をkeyにして、装飾したカスタマイズ例。
.key {
color: white;
background-color: #1e1d1d;
border-radius: 2px;
box-shadow: 0 1px 1px 0 #777373;
border:1px solid black;
}
カスタマイズをしたい状況に応じて、改行を必要とすればdiv。改行を必要としないテキストの延長で使うならspan。と使い分けが必要です。
その役目を考えると、どちらを使えば良いのか迷わなくって済みそうですね♪
さいごに
インライン要素に高さがほしい！でも高さが出ないって思うときが出てきます。そうなったらカスタマイズが楽しくって色々チャレンジしてる証拠ですね＾＾
でも残念ながら、インライン要素は、
- 左右の幅の調整はできても、高さの指定ができません。
例えば、フォントが大きかったり、インラインで作ったボックスがスマホビューでインライン要素がくっついてしまう場合は、その親要素であるブロックレベル要素にline-heightの値を少し大きくしてあげると解消する場合がありますよ。
.hoge {
line-height: 1.7;
}
インライン要素をブロック要素に変えて高さを出す方法などもあったり、ブロック要素をインラインのように横並びにさせる方法もあることだけ覚えておくと良いかもしれません。
ちょっとややこしいので、これから色んなカスタマイズを始める今は、インラインとブロック要素の違いを理解できたら完璧として、徐々に色々覚えていきましょう＾＾
それでは、かうたっくでした(^^♪
Comments