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

ブロックレベル要素

  • 見出し(h1〜h6要素)、段落(p要素)、表(table要素)、リスト(ul、ol、dl要素)などが該当します
  • ブロックレベル要素は、その前後で改行表示されます
  • ブロックレベル要素は、デフォルト状態で親要素と同じ幅を持っています
  • 親要素より小さい幅を指定しても前後で開業され、横並びに配置できません
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ブロックレベル要素</title>
<style>
h1 {
  background-color: #BAD6EF;
}
p {
  background-color: #EDF5AC;
}
</style>
</head>
<body>
<h1>見出し</h1>
<p>段落</p>
</body>
</html>


f:id:lesson3:20170827051546p:plain

インラインレベル要素

  • 主にブロックレベル要素の中で使用される要素
  • リンク(a要素)、画像(img要素)など
  • 汎用要素:特別な意味を持たない(span要素)
  • インライン要素の幅は、そのタグ付けされた要素のみで、前後で改行されません
  • ソースコード上の空白文字類は、ブラウザでは1つ分の空白文字列に置き換えられて表示される(改行を削除するとこの隙間はなくなります)
  • 高さや上下マージンなどの指定ができない

displayプロパティ

  • ブロックレベル要素をインラインレベル要素のように扱う
  • インラインレベル要素をブロックレベル要素のように扱う
ブロックレベル要素をインラインレベル要素のように扱う
  • リストを横に並べる
li {
  display: inline;
}
インラインレベル要素をブロックレベル要素のように扱う
  • a要素をブロックレベル要素として表示し、クリック可能な領域を広げる
a {
  padding: 10px;
  display: block;
}
便利な値(display: inline-block;)
  • インラインレベル要素のように前後で改行せずに配置しつつ、ブロックレベル要素のように高さと上下マージン・上下パディングを指定できます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>display:inline-block</title>
<style>
ul {
  width: 300px;
  padding: 0;
  background-color: #D2F4FE;
}
li {
  display: inline-block;
  width: 100px;
  height: 50px; /* 高さ 50px */
  margin-bottom: 10px; /* 下マージン 10px */
  background-color: #DFB9E5;
}
</style>
</head>
<body>
<ul>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ul>
</body>
</html>
  • インラインレベル要素と同様に、ソースコード上の改行やインデントは空白1文字分に置き換わります

f:id:lesson3:20170827141816p:plain

<body>
<ul>
  <li>リスト項目1</li><li>リスト項目2</li><li>リスト項目3</li>
</ul>
</body>
  • 改行をとると、空きがなくなりすべて横並びになります

f:id:lesson3:20170827142150p:plain

求職者支援訓練 フェリカテクニカルアカデミー