#3 要素の種類を変えるdisplayディスプレイプロパティ

タグには2種類の性質がある

htmlの要素の特長

タグの中には #5 htmlでの枠の使い方と特性 で紹介したように、 親要素いっぱいまで伸びる要素(ブロックレベル要素)と、中の要素の幅までしか伸びない要素(インライン要素)の2種類があります。

「あいうえおかきくけこ」という文字要素をブロックレベルとインライン要素でそれぞれ囲ってみた場合の枠の幅が違うことが確認できます
・親要素の幅いっぱいまで伸びるタグのことを「ブロックレベル要素」と呼びます
例) <div>, <p>, <h1>, <ol>, <ul>, <li>, <table>, <pre>, <form>
・要素の幅までのタグのことを「インライン要素」と呼びます(例外あり:img, input, textarea, select)
例) <span>, <img>, <a>, <textarea>, <select>, <code>, </code>

2つの要素の違いとルール

  1. ブロックレベル要素は上から下への縦方向に、インライン要素は左から右へと横方向に流れていく。
  2. インライン要素の中に、ブロックレベル要素を入れてはいけない。(html5はルールが異なる)
  3. インライン要素にwidth高さheightを指定できない。
  4. インライン要素のmarginは左右は効き上下は効かない。paddingは左右は効き上下は変になる。

要素の性質を変えてみよう

前回学んだdisplay:flex;を使えば横並びや縦並びにすることは可能ですが、 レイアウト目的以外でも使いみちがあります。要素の性質を変更できるということを覚えておきましょう。

ブロックレベル要素をインライン要素に変える


ただのli
<ul>
  <li>あいう</li>
  <li>かきく</li>
</ul>

blockに変更
<ul class="wrap2">
  <li>さしす</li>
  <li>たちつ</li>
</ul>

inline-blockに変更
<ul class="wrap3">
  <li>なにぬ</li>
  <li>はまや</li>
</ul>

li{
  margin:15px 20px;
  padding:15px 20px;
}
.wrap2 li{
  display:inline;
}
.wrap3 li{
  display:inline-block;
}
ただのli
・親要素の幅いっぱいで縦に落ちていく
  • あいう
  • かきく
.wrap2内のliをinlineに変更
・marginの左右は◯、上下はx
・paddingの左右は◯、上下は変。
  • さしす
  • たちつ
.wrap3内のliをinline-blockに変更
・横並びになる以外はblock要素としての扱いになります
  • なにぬ
  • はまや

インライン要素をブロックレベル要素に変える


ただのspan
<div>
  <span>あいう</span>
  <span>かきく</span>
</div>

blockに変更
<div class="wrap4">
  <span>さしす</span>
  <span>たちつ</span>
</div>

inline-blockに変更
<div class="wrap5">
  <span>なにぬ</span>
  <span>はまや</span>
</div>

span{
  margin:15px;
  padding:15px;
}
.wrap4 span{
  display:block;
}
.wrap5 span{
  display:inline-block;
}
ただのspan
・横並びになる
あいう かきく
.wrap4内のspan blockに変更
・margin, paddingがすべて効く
さしす たちつ
.wrap5内のspan inline-blockに変更
・inline要素として横並びで幅は文字要素のいっぱいになり、blockレベル要素としてmargin, paddingが正しく適用されています。
なにぬ はまや

インライン要素やブロックレベル要素をテーブル要素に変える


ただのp
<div>
  <p>あいうえお</p>
  <p>かきくけこ</p>
</div>

tableに変更
<div class="wrap6">
  <p>さしすせそ</p>
  <p>たちつてと</p>
</div>

.wrap6{
  display:table; /*ラッパーをtable指定*/
  width:300px;
}
.wrap6 p{
  display:table-cell; /*tableの子要素にする*/
  vertical-align:middle; /*天地の中央に成るように配置*/
  height:100px;
}
ただのp
・縦に落ちる

あいうえお

かきくけこ

.wrap6内のp tableに変更
・vertical-align: middle;で要素を天地の中央にできる

さしすせそ

たちつてと

html5で採用されたコンテンツカテゴリー

しかしhtml5ではこのブロックレベル要素とインライン要素の考え方が大きく変わりました。
html5ではブロックレベルとインラインを細分化し、同じ特徴を持つ要素ごとに分類される「コンテンツカテゴリ」という考え方が採用されました。

Metadata Contentsメタデータ コンテンツ(HTMLのヘッダ部に記載する要素)

<link>, <meta>, <noscript>, <script>, <style>, <title>
Flow Contentsフロー コンテンツ(主に今までのブロックレベル要素とインライン要素に対応)

<a>, <aside>, <canvas>, <data>, <header>, <footer>, <section>, <article>, <main>, 
<div>, <p>, <h1>, <img>, <ul>, <ol>, <pre>,  <select>, <span>, <table>
Sectioning Contents区分コンテンツ(セクショニング・コンテンツ。文章の構造の枠の要素)

<article>, <aside>, <nav>, <section>
Heading Contents見出しコンテンツ(ヘディング・コンテンツ。タイトル用の要素)

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>
Phrasing Contents記述コンテンツ(フレージング・コンテンツ。主に今までのインライン要素に対応)

<a>, <img>, <br>, <em>, <data>, <code>, <label>, <button>, <textarea>, <svg>, <ruby> 
<input>, <code>, <pre>, <strong>, <script>, 
Embedded Contents埋め込みコンテンツ

<audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <svg>, <video>
他には対話型コンテンツ、知覚可能コンテンツ、フォーム関連コンテンツ などがあります。
divタグは何を入れても大丈夫ですが、pタグhタグspanタグにはフレージング・コンテンツしか入れてはいけない。 また、aタグは親要素のコンテンツタイプを引き継ぐといった特徴があります。
いまはすべて覚える必要はありません。コンテンツカテゴリーという考え方があるということを覚えておきましょう。

#4 要素の位置を調整できるpositionポジションプロパティ

要素の位置を自由に調整できるpositionプロパティを使う

positionプロパティを使えば、親要素を基準としてかなり自由な位置調整が可能です。注意点として、親要素の高さ情報はなくなってしまうので、親要素にheight指定を設定しましょう。
この図のような感じで「座標」を入れていきます。まず、親要素(ラッパー)にposition: relativeレラティブ; をかけます。その中の子要素にposition: absoluteアブソリュート;をかけます。 準備はこれでOKです。
続いて、aboluteをかけた子要素にtop、bottom、left、rightの値を入れていきます。

ただのdivは縦に落ちる
<div>
  <div>あいう</div>
  <div>かきく</div>
</div>

positionで自由な位置に配置
<div class="wrap7">
  <div class="box1">さしす</div>
  <div class="box2">たちつ</div>
</div>

z-indexでの重ね順
<div class="wrap7">
  <div class="box2">たちつ</div>
  <div class="box3">なにぬ</div>
</div>

.wrap7{  /*親要素*/
  position:relative;
  width:300px;
  height:90px;
}
.wrap7 div{  /*子要素のすべて*/
  position:absolute;
  height:30px;
  width:100px;
}
.box1{ /*赤*/
  left:20px; /*左からの距離*/
  top:30px;  /*上からの距離*/
  z-index:1;
}
.box2{ /*ピンク*/
  left:120px;
  bottom:20px;  /*下からの距離*/
  z-index:10;
}
.box3{ /*緑*/
  top:25px;
  right:20px; /*右からの距離*/
  z-index:2;
}
ただのdivは縦に落ちる
あいう
かきく
positionで自由な位置に配置
さしす
たちつ
z-indexでの重ね順
本来、html文で下に書いた要素(例ではボックス3)が画面上では上に来ますが、 z-indexの値の数字が大きいほうが上に行きます
たちつ
なにぬ
コピーしました
RSS https://cbc-study.com/rss.xml
質問などあればSlackで