Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[HTML]ブロックレベル要素とインライン要素

はじめに

f:id:akatonbo_web:20150329220515j:plain

 今日は文書構造の理解に必須である、ブロックレベル要素とインライン要素について勉強しました。


ブロックレベル要素とインライン要素とは

 ブロック要素は「入れ物」インライン要素は「中身」にあたります。
 ブロック要素の中には、インライン要素や他のブロック要素も配置できますが、反対にインライン要素(中身)にブロックレベル要素(入れ物)を配置することはできません。

ブロックレベル要素:block-level elements

見出し(h1~)、段落(p)、表(table)など、文章を構成する基本となり、これらはブロック単位として認識されます。

よく使うブロック要素
要素用途
h1~h6見出し
p段落
ul順不同リスト
ol順番リスト
dl定義リスト
table表組み
address連絡先
div任意の範囲・グループ化
インライン要素:inline elements

ブロックレベル要素の「中身」として用いられ、文章の一部のように扱われます。

よく使うインライン要素
要素用途
aリンク
em強調
strongより強い強調
img画像
span任意の範囲


理解を深めるために〜display属性

display属性は、ブロックレベル要素をインラインの形式で表示したり、インライン要素をブロックの形式で表示したりできます。

●リストは、改行されるブロック要素です。

<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">NEWS</a></li>
</ul>

●リストのdisplayプロパティをインラインに設定すると…

<style>
li {display: inline;}
</style>

●改行されないインライン要素として扱われます。

HOME ABOUT NEWS


さらにインラインブロック要素を使ってみる

display: inline-blockに設定すると、ブロック要素をインライン要素のように並べることができます。

(省略)
<style type="text/css">
a.hoge {
  display: inline;
  background-color:orange;
  width: 300px;
}
a.hoge2 {
  display: block;
  background-color:orange;
  width:300px;
}   
a.hoge3 {
  display: inline-block;
  background-color:orange;
  width:300px;
}
</style>
</head>
<body>
<p><a class="hoge" href="#">インラインで表示します</a>空白<a class="hoge" href="#">インラインで表示します</a></p>
<hr>
<p><a class="hoge2" href="#">ブロック要素にします</a>空白<a class="hoge2" href="#">ブロック要素にします</a></p>
<hr>
<p><a class="hoge3" href="#">インラインブロック要素にします</a>空白<a class="hoge3" href="#">インラインブロック要素にします</a></p>
<hr>
</body>
</html>

表示結果(オレンジがリンクの当たり判定)

f:id:akatonbo_web:20150330014322j:plain

大参考→CSSの display: inline、display: block、display: inline-block をマスターしよう! | たねっぱ!
覚えておきたい→inline-blockを並べた場合に発生する「隙間」を消去するCSS » INSPIRE TECH