表示形式 display

display : 形式 ;

display : block ;　/*インライン要素をブロック形式で表示*/

display : inline ;　/*ブロック要素をインライン形式で表示*/

display : list-item ;　/*リスト形式で表示*/

display : none ;　/*表示しない*/

と、書いても何がなにやらサッパリですよね…。

まず、インライン要素　と　ブロック要素とは何か。

インライン要素

<font>　<a>　<b>　<img>　<span>　<i>　<u>　などなど

続けて表記しても改行されないタグの事です。

<span>今日は</span><span>とても</span><span>楽しかった</span>

と、表記すれば

今日はとても楽しかった

と、続けて表示されます。

ブロック要素

<div>　<p>　<h1>　<table>　などなど

続けて表記しても改行されるタグの事です。

<p>今日は</p><p>とても</p><p>楽しかった</p>

と、表記すれば

今日は

とても

楽しかった

と、改行されて表示されます。

インライン要素である

<span>今日は</span><span>とても</span><span>楽しかった</span>

通常なら

今日はとても楽しかった

に

display : block ;

を指定して、ブロック形式にします。

<span style="display:block;">今日は</span><span style="display:block;">とても</span><span style="display:block;">楽しかった</span>
今日はとても楽しかった改行されて表示されました。

ブロック要素である。

<p>今日は</p><p>とても</p><p>楽しかった</p>

通常なら

今日は

とても

楽しかった

に

display : inline ;

を指定して、インライン形式にします。

<p style="display:inline;">今日は</p><p style="display:inline;">とても</p><p style="display: inline;">楽しかった</p>

今日は

とても

楽しかった

改行されずに表示されました。

display : list-item ;

を指定して、リスト形式にします。

<p style="display:list-item;">今日は</p><p style="display:list-item;">とても</p><p style="display: list-item;">楽しかった</p>

今日は

とても

楽しかった

リスト表示されました。

display : none ;

を指定して、「とても」を消します。

今日は<div style="display:none;">とても</div>楽しかった

今日は

とても

楽しかった

消えました。