でん⚡きかいでんのブログ

3Dプリンター、3DCG、PC、電子工作、HTML、CSS、ミシン、ペンタブレット、アイデア・材料・道具の紹介。PCデータのわかりやすいバックアップ方法。PC関連機器の使用感レビューなど。

正当なCSSです! クリエイティブ・コモンズ・ライセンス表示

2015.02.04 [水]

インライン要素ブロック要素

display:

  1. .dis-in { display:inline; background-color:#111; }
  2. .dis-bl { display:block; background-color:#111; }
  3. .dis-inb { display: inline-block; background-color:#111; }



inline

 改行されず、後に続いて並んでいく。次々とラインになっていく。もちろん<br>を入れれば改行される。
<div class="dis-in">
とうきょうとっきょきょかきょくきょかきょくちょうきょうきゅうきょきゅうかきょかきょひ。
</div>
<div class="dis-in">
となりのきゃくはよくかきくうきゃくだ。
</div>
<div class="dis-in">
ぼうずがびょうぶにぼうずのじょうずなえをかいた。
</div>
結果
とうきょうとっきょきょかきょくきょかきょくちょうきょうきゅうきょきゅうかきょかきょひ。
となりのきゃくはよくかきくうきゃくだ。
ぼうずがびょうぶにぼうずのじょうずなえをかいた。

block

 1行まるごと専有し、次に来るものは必ず改行される。これは1つのブロックである。
<div class="dis-bl">
とうきょうとっきょきょかきょくきょかきょくちょうきょうきゅうきょきゅうかきょかきょひ。
</div>
<div class="dis-bl">
となりのきゃくはよくかきくうきゃくだ。
</div>
<div class="dis-bl">
ぼうずがびょうぶにぼうずのじょうずなえをかいた。
</div>
結果
とうきょうとっきょきょかきょくきょかきょくちょうきょうきゅうきょきゅうかきょかきょひ。
となりのきゃくはよくかきくうきゃくだ。
ぼうずがびょうぶにぼうずのじょうずなえをかいた。

inline-block

 1つ1つがブロックとしての塊。次に来るものは改行される。
<div class="dis-inb">
とうきょうとっきょきょかきょくちょうきょうきゅうきょきゅうかきょかきょひ。
</div>
<div class="dis-inb">
となりのきゃくはよくかきくうきゃくだ。
</div>
<div class="dis-inb">
ぼうずがびょうぶにぼうずのじょうずなえをかいた。
</div>
結果
とうきょうとっきょきょかきょくきょかきょくちょうきょうきゅうきょきゅうかきょかきょひ。
となりのきゃくはよくかきくうきゃくだ。
ぼうずがびょうぶにぼうずのじょうずなえをかいた。

よく使う場所

  • imgに指定して、続きの文章などを自動的に改行させたい時。
  • tableを使わずに並べる。
  • テキストにlinkを付ける時、テキストそのものだけでなく、その行まるごとや、テキストの範囲の四方をクリックできるリンクにしたい時。
  • 他にもあると思います。

関連記事

« NEW  | HOME |  OLD »

コメント

コメントの投稿


「コメント非表示」管理人しか閲覧できないコメントにする。

 | HOME |