CRI BOOT CAMP
作成日：2021/04/12 更新日：2021/12/07
#3 要素の種類を変えるdisplayプロパティ
タグには2種類の性質がある
htmlの要素の特長
タグの中には #5 htmlでの枠の使い方と特性 で紹介したように、 親要素いっぱいまで伸びる要素(ブロックレベル要素)と、中の要素の幅までしか伸びない要素（インライン要素）の2種類があります。
「あいうえおかきくけこ」という文字要素をブロックレベルとインライン要素でそれぞれ囲ってみた場合の枠の幅が違うことが確認できます
※HTML5ではブロックレベル要素、インライン要素という考え方はなくなり、代わりに文章構造を表現するのに適した`コンテンツのくくりごと`に名前がついています。
と解説されていますが、依然として「どこまで幅が伸びるのか」はレイアウトする中で重要なことなのでやはり覚えておきましょう。
・親要素の幅いっぱいまで伸びるタグのことを「ブロックレベル要素」と呼びます例） <div>, <p>, <h1>, <ol>, <ul>, <li>, <table>, <pre>, <form>例） <span>, <img>, <a>, <textarea>, <select>, <code>, </code>2つの要素の違いとルール
- ブロックレベル要素は上から下への縦方向に、インライン要素は左から右へと横方向に流れていく。
- インライン要素の中に、ブロックレベル要素を入れてはいけない。(html5はルールが異なる)
- インライン要素に幅、高さを指定できない。
- インライン要素の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
・親要素の幅いっぱいで縦に落ちていく
・marginの左右は◯、上下はｘ
・paddingの左右は◯、上下は変。
・横並びになる以外はblock要素としての扱いになります
・親要素の幅いっぱいで縦に落ちていく
- あいう
- かきく
・marginの左右は◯、上下はｘ
・paddingの左右は◯、上下は変。
- さしす
- たちつ
・横並びになる以外は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
・横並びになる
・margin, paddingがすべて効く
・inline要素として横並びで幅は文字要素のいっぱいになり、blockレベル要素としてmargin, paddingが正しく適用されています。
・横並びになる
あいう
かきく
.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;で要素を天地の中央にできる
・縦に落ちる
あいうえお
かきくけこ
・vertical-align: middle;で要素を天地の中央にできる
さしすせそ
たちつてと
html5で採用されたコンテンツカテゴリー
しかしhtml5ではこのブロックレベル要素とインライン要素の考え方が大きく変わりました。html5ではブロックレベルとインラインを細分化し、同じ特徴を持つ要素ごとに分類される「コンテンツカテゴリ」という考え方が採用されました。
<link>, <meta>, <noscript>, <script>, <style>, <title>
<a>, <aside>, <canvas>, <data>, <header>, <footer>, <section>, <article>, <main>,
<div>, <p>, <h1>, <img>, <ul>, <ol>, <pre>, <select>, <span>, <table>
<article>, <aside>, <nav>, <section>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>
<a>, <img>, <br>, <em>, <data>, <code>, <label>, <button>, <textarea>, <svg>, <ruby>
<input>, <code>, <pre>, <strong>, <script>,
<audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <svg>, <video>
他には対話型コンテンツ、知覚可能コンテンツ、フォーム関連コンテンツ などがあります。
divタグは何を入れても大丈夫ですが、pタグやhタグやspanタグにはフレージング・コンテンツしか入れてはいけない。 また、aタグは親要素のコンテンツタイプを引き継ぐといった特徴があります。
いまはすべて覚える必要はありません。コンテンツカテゴリーという考え方があるということを覚えておきましょう。
#4 要素の位置を調整できるpositionプロパティ
要素の位置を自由に調整できるpositionプロパティを使う
positionプロパティを使えば、親要素を基準としてかなり自由な位置調整が可能です。注意点として、親要素の高さ情報はなくなってしまうので、親要素にheight指定を設定しましょう。
続いて、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の値の数字が大きいほうが上に行きます
あいう
かきく
さしす
たちつ
本来、html文で下に書いた要素（例ではボックス3）が画面上では上に来ますが、 z-indexの値の数字が大きいほうが上に行きます
たちつ
なにぬ
入門
基礎
応用
実践フロントエンド
実践バックエンド
デザイン
キッズ