アジェンダ
- 要素の余白
- 要素の表示形式
- 要素のサイズ
- 実践
要素の余白
padding
要素の内側の余白を指定する場合、以下のように書く。
padding: <上下左右の余白サイズ>;
padding: <上下の余白サイズ> <左右の余白サイズ>;
padding: <上の余白サイズ> <下の余白サイズ> <右の余白サイズ> <左の余白サイズ>;
値(サイズ)は数値で指定する。
また、padding-top/right/bottom/leftを用いで、個別で指定することもできる。
margin
要素の外側の余白を指定する場合、以下のように書く。
margin: <上下左右の余白サイズ>;
margin: <上下の余白サイズ> <左右の余白サイズ>;
margin: <上の余白サイズ> <下の余白サイズ> <右の余白サイズ> <左の余白サイズ>;
値(サイズ)は数値で指定する。数値には負数も指定できる。
また、margin-top/right/bottom/leftを用いで、個別で指定することもできる。
paddingとmarginの違い
以下の図のとおり。それぞれ、要素内と要素外の余白を指定している。
要素の表示形式
display
要素の表示形式を指定する場合、以下のように書く。
display: 値;
値は以下の単語で指定する。
- block
- ブロック要素として表示する。
- inline
- インライン要素として表示する。
- inline-block
-
インライン要素として扱うブロック要素として表示する。
主に、ブロック要素にしか使用できないプロパティを使用する際に用いる。 - none
- 表示しない。
- ...
- その他多数存在する。
visibility
要素の表示・非表示を指定する場合、以下のように書く。
visibility: 値;
値は以下の単語で指定する。
- visible
- 表示する。
- hidden
- 表示しない。
display: none; と visibility: hidden; の違い
display: none; を使用すると、要素が無いものとして扱われる。
そのため、指定した要素が表示される箇所に、他の要素が詰めて表示される。
visibility: hidden; を使用すると、要素は存在するが、内容が表示されない。
そのため、指定した要素の表示される箇所は空欄となり、他の要素が詰めて表示されることはない。
要素のサイズ
要素の幅
要素の幅の最大幅、最小幅を指定する場合、以下のように書く。
# 最大幅
max-width: 値;
# 最小幅
min-width: 値;
値は数値で指定する。
高さ
要素の高さの最大高さ、最小高さを指定する場合、以下のように書く。
# 最大高さ
max-height: 値;
# 最小高さ
min-height: 値;
値は数値で指定する。
要素のサイズの算出方法
要素の算出方法を指定する場合、以下のように書く。
box-sizing: 値;
値は以下の単語で指定する。
- content-box
- paddingやborderを含めない。
- border-box
- paddingやborderを含める。
文書が収まりきらない場合の取り扱い
文書が収まりきらない場合の取り扱いを指定する場合、以下のように書く。
overflow: 値;
値は以下の単語で指定する。
- visible
- 要素からはみ出して表示する。
- scroll
- スクロールバーを用いて、要素内でスクロール表示する。
- hidden
- はみ出した部分を表示しない。
実践
上記内容を用いて、以下のindex.htmlとstyle.cssを作成した。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="./style.css">
<title>要素のサイズ</title>
</head>
<body>
<h1>lorem ipsum</h1>
<div class="lorem_ipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<h1>寿限無</h1>
<div class="jugemu">
<p>
寿限無、寿限無 五劫の擦り切れ<br>
海砂利水魚の 水行末 雲来末 風来末<br>
食う寝る処に住む処 藪ら柑子の藪柑子<br>
パイポパイポ パイポのシューリンガン<br>
シューリンガンのグーリンダイ<br>
グーリンダイのポンポコピーのポンポコナーの<br>
長久命の長助
</p>
</div>
</body>
</html>
.lorem_ipsum {
background-color: orange;
border-style: dotted;
border-color: gray;
border-width: 5px;
padding: 15px;
margin: 15px;
text-align: justify;
max-width: 500px;
max-height: 100px;
/* サイズに余白を含めない. */
box-sizing: content-box;
/* はみ出る分はスクロール表示にする. */
overflow: scroll;
}
.jugemu {
background-color: yellowgreen;
border-style: dotted;
border-color: gray;
border-width: 5px;
padding: 15px;
margin: 15px;
max-width: 500px;
max-height: 100px;
/* サイズに余白を含める. */
box-sizing: border-box;
/* はみ出る分をそのまま表示する. */
overflow: visible;
}
これをWebブラウザに表示させるとこんな感じ。
なるほど、わかりやすい。はみ出るのはカッコ悪い。
おわりに
今回は、要素のサイズに関する内容だった。
言語で書かれている要素を表示させた時にどう表示されるのか、いちいち確認しないとわからないのは不便だと感じた。
テンプレートがあれば作りやすいだろう。
次回 >> ここ
参考
5-1 paddingプロパティ（CSSのボックスモデル）
5-2 marginプロパティ（CSSのボックスモデル）
5-3 displayプロパティvisibilityプロパティ（CSSのボックスモデル）
5-4 boxサイズの考え方（CSSのボックスモデル）