width: 内容の幅;要素の内容の幅を指定します。幅は、box-sizing プロパティの値に content-box が指定されていると「content」の幅を指定し、border-box が指定されていると「content + padding + border」の合計値を指定します。初期値は「auto」でボックスモデルの表示ルールの初期サイズが採用されます。
max-width: 幅の最大値;幅の最大値を指定します。width プロパティの値に関わらず本値以上の幅にはなりません。初期値は「none」です。
min-width: 幅の最小値;幅の最小値を指定します。width プロパティの値に関わらず本値以下の幅にはなりません。初期値は「auto」です。
height: 内容の高さ;要素の内容の高さを指定します。高さは、box-sizing プロパティの値に content-box が指定されていると「content」の幅を指定し、border-box が指定されていると「content + padding + border」の合計値を指定します。初期値は「auto」でボックスモデルの表示ルールの初期サイズが採用されます。
max-height: 高さの最大値;高さの最大値を指定します。height プロパティの値に関わらず本値以上の高さにはなりません。初期値は「auto」です。
min-height: 高さの最小値;高さの最小値を指定します。width プロパティの値に関わらず本値以下の高さにはなりません。初期値は「auto」です。
float: 回り込みの方向;要素の回り込みを指定します。
（回り込みの方向）は以下の値で指定します。
clear: 解除の方向;回り込みの解除を指定します。clear プロパティは、回り込みを解除させたい同レベルの後続するブロック要素に指定する必要があります。
（解除の方向）は以下の値で指定します。
float プロパティを使用した場合は、回り込みの解除を指定する必要があります。回り込みの解除は、以下の方法で指定することができます。
float を指定した要素の次の要素に「clear: both;」プロパティを指定します。float が連続している場合は、一番最後の float 要素の次の要素に指定します。本指定方法は、float が指定されている要素に続く要素が存在する場合に指定可能です。
HTML
<div>
<p class="float-left red">項目1</p>
<p class="float-left green">項目2</p>
<p class="float-left blue">項目3</p>
<p class="clear"></p>
</div>
CSS
.float-left {
width: 100px;
float: left;
color: white;
text-align: center;
}
.red {
background: red;
}
.green {
background: green;
}
.blue {
background: blue;
}
.clear {
clear: both;
}
【表示形式】
項目1
項目2
項目3
float を指定した要素の親要素に after 疑似要素を使用した「clear: both;」プロパティを指定します。本指定方法は、after 疑似要素を使用することで後続する clear プロパティを指定する要素が存在しない場合でも使用可能です。一般的には、「clearfix」という名称のクラス名を使って以下のスタイルを定義します。この clearfix クラスの定義は、リセット CSS に定義しておくと良いでしょう。
HTML
<div class="clearfix">
<p class="float-left red">項目1</p>
<p class="float-left green">項目2</p>
<p class="float-left blue">項目3</p>
</div>
CSS
.float-left {
width: 100px;
float: left;
color: white;
text-align: center;
}
.red {
background: red;
}
.green {
background: green;
}
.blue {
background: blue;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
【表示形式】
項目1
項目2
項目3
float を指定した要素の親要素に「overflow: hidden;」を指定します。
HTML
<div class="perent">
<p class="float-left red">項目1</p>
<p class="float-left green">項目2</p>
<p class="float-left blue">項目3</p>
</div>
CSS
.perent {
overflow: hidden;
}
.float-left {
width: 100px;
float: left;
color: white;
text-align: center;
}
.red {
background: red;
}
.green {
background: green;
}
.blue {
background: blue;
}
【表示形式】
項目1
項目2
項目3
float の使用方法を習得するためのサンプルコードです。
サンプルコードを使用して float の使用方法を理解してください。
float サンプルコードは、以下をクリックしてダウンロードまたは別画面で開いて使用してください。
ダウンロードしたファイルは圧縮されていますので解凍してから使ってください。
index.html をブラウザで開いてデベロッパーツール（検証ツール）を使って指示に従い CSS（float.css）のプロパティを設定してください。
設定する値がわからないときは、float-mihon.css にコメントとして記載してありますので確認してください。
position: 配置方法;
top: 上からの位置;
bottom: 下からの位置;
left: 左からの位置;
right: 右からの位置;
要素の配置方法を指定します。
（配置方法）は以下の値で指定します。
（上／下／左／右からの位置）は、position プロパティと併用して配置の基準位置を正の値または負の値で指定します。初期値は「auto」です。
position プロパティの使用例を以下の示します。使用する形態に合わせて使い分けてください。
元の表示位置（「position: static;（初期値）」プロパティで表示される位置）からの相対位置に配置する場合は、「position: relative;」プロパティを指定して top/bottom/left/right プロパティで配置する相対位置を指定します。
親要素からの相対位置に配置する場合は、基準になる親要素に「position: relative;」プロパティを指定して自要素に「position: absolute;」プロパティを指定します。相対位置は、top/bottom/left/right プロパティで配置する位置を指定します。本指定の場合は、親要素の横幅が継承されません。本例での親要素は直近の親要素だけでなく祖先要素が対象になります。
ページ先頭からウィンドウサイズの領域に対する相対位置に配置する場合は、「position: absolute;」プロパティを指定して top/bottom/left/right プロパティで配置する相対位置を指定します。本指定を行うとページのスクロールに合わせて本要素もスクロールされます。本指定の場合は、親要素の横幅が継承されません。
画面上の固定位置に配置する場合は、「position: fixed;」プロパティを指定して top/bottom/left/right プロパティで配置する位置を指定します。本指定を行うとページをスクロールしても表示位置は変化しません。本指定の場合は、親要素の横幅が継承されません。
position の使用方法を習得するためのサンプルコードです。
サンプルコードを使用して position の使用方法を理解してください。
position サンプルコードは、以下をクリックしてダウンロードまたは別画面で開いて使用してください。
ダウンロードしたファイルは圧縮されていますので解凍してから使ってください。
index.html をブラウザで開いてデベロッパーツール（検証ツール）を使って指示に従い CSS（position.css）のプロパティを設定してください。
設定する値がわからないときは、position-mihon.css にコメントとして記載してありますので確認してください。
z-index: 重なりの順序;
要素の重なりの順序方法を指定します。
（重なりの順序）は、ボックスの重なり順序を数値で指定します。マイナス値も使用可能で数値が大きいほど前面（上）に表示されます。初期値は「auto」です。position プロパティを指定していないか、position プロパティに static が指定されている時は、重なりの順序は適用されません。
display: 要素の表示方法;要素の表示方法を指定します。初期値はボックスモデルの表示ルールが採用されます。
要素の表示方法は、以下の値で指定します。
display の使用方法を習得するためのサンプルコードです。
サンプルコードを使用して display の使用方法を理解してください。
display サンプルコードは、以下をクリックしてダウンロードまたは別画面で開いて使用してください。
ダウンロードしたファイルは圧縮されていますので解凍してから使ってください。
index.html をブラウザで開いてデベロッパーツール（検証ツール）を使って指示に従い CSS（display.css）のプロパティを設定してください。
設定する値がわからないときは、position-mihon.css にコメントとして記載してありますので確認してください。
overflow: ボックスからあふれた内容の処理方法;ボックスからあふれた内容の処理方法を指定します。
ボックスからあふれた内容の処理方法は、以下の値で指定します。
overflow プロパティについては「overflow プロパティでの領域の処理」でも説明していますので合わせて確認してください。
overflow プロパティを使用例を以下示します。
overflow: visible;
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
overflow: scroll;
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
overflow: auto;
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
border-style: ボーダーのスタイル;ボーダーのスタイルを指定します。
（ボーダーのスタイル）は、以下の値を指定します。
（ボーダーのスタイル）は、複数指定でき指定した個数により対象位置が異なります。
border-color: ボーダーの色;ボーダーの色を指定します。
ボーダーの色に transparent を指定すると透明になります。
ボーダーのスタイルは、複数指定でき指定した個数により対象位置が異なります。
border-width: ボーダーの幅;ボーダーの幅を指定します。
ボーダーの幅は、複数指定でき指定した個数により対象位置が異なります。
border: ボーダー一括指定;ボーダーのスタイル・色・幅を一括して指定（ショートハンド）します。
スタイル・色・幅の指定は、任意の順序でスペースで区切って指定します。
本指定では上下左右を別々に指定することはできません。
border プロパティを使用例を以下示します。
border: 1px #000 solid;
border: 2px #000 solid;
border: 3px #000 solid;
border: 4px #000 solid;
border: 4px #000 double;
border: 2px #000 dashed;
border: 2px #000 dotted;
border: 2px #f00 solid;
border: 2px #0f0 solid;
border: 2px #00f solid;
border-top: 上のボーダー一括指定;
border-bottom: 下のボーダー一括指定;
border-left: 左のボーダー一括指定;
border-right: 右のボーダー一括指定;
上下左右のボーダーのスタイル・色・幅を一括して指定（ショートハンド）します。
スタイル・色・幅の指定は、任意の順序でスペースで区切って指定します。
本指定のプロパティ名の後ろに「-style」、「-color」、「-width」を付与することでスタイル、色、幅を個別に指定することができます。
padding-top: 上のパディング幅;
padding-bottom: 下のパディング幅;
padding-left: 左のパディング幅;
padding-right: 右のパディング幅;
上下左右のパディングの幅を指定します。
padding: パディング幅;パディングの幅を指定します。
パディング幅は、複数指定でき指定した個数により対象位置が異なります。
margin-top: 上のマージン幅;
margin-bottom: 下のマージン幅;
margin-left: 左のマージン幅;
margin-right: 右のマージン幅;
上下左右のマージンの幅を指定します。
margin: マージン幅;マージンの幅を指定します。
マージン幅は、複数指定でき指定した個数により対象位置が異なります。
margin は、padding と違う特殊な特性を持っています。下記に margin が持っている特性を説明します。
margin の特殊な特性については「margin プロパティの注意事項」でも説明していますので合わせて確認してください。
border-radius: コーナーの角丸値;ボックスの 4 つのコーナーの角丸を指定します。
コーナーの角丸値は、楕円の半径値を「左上の水平方向」・「右上の水平方向」・「右下の水平方向」・「左下の水平方向」・「/」・「左上の垂直方向」・「右上の垂直方向」・「右下の垂直方向」・「左下の垂直方向」の順でスペースで区切って指定します。楕円の半径値は、ボーダーの外側の輪郭になります。スラッシュ（/）以降を省略した場合は水平方向と垂直方向が同じ値であると解釈されます。
それぞれのコーナーの値も省略することができ以下のルールに従って解釈されます。
半径は、長さかパーセンテージで指定することができ、パーセンテージで指定する場合はボーダーボックスの幅と高さに対する楕円半径をパーセンテージで指定します。
指定方法は、以下の例を参考にしてください。
border-radius: 150px;
border-radius: 40px 80px 80px 160px / 40px 80px 40px 80px;
box-shadow: ボックスの影値;ボックスに対して1つまたは複数の影を指定します。
ボックスの影値は、「水平方向の影のオフセット距離」・「垂直方向の影のオフセット距離」・「ぼかしの距離」・「広がりの距離」・「色」・「inset」の順でスペースで区切って指定します。ボックスの影値は、複数指定することができ複数指定する時はカンマ（,）で区切って指定します。ボックスの影値の初期値は「none」で影なしとなります。
ボックスの影値の各値は以下のルールに従って解釈されます。
指定方法と表示効果は、以下の例を参考にしてください。
box-shadow: 10px 10px;
box-shadow: 10px 10px 10px 0px #f00;
box-shadow: 0px 0px 10px 10px #0f0;
box-shadow: 0px 0px 10px 10px #00f inset;
box-sizing: ボックスサイズの算出方法;ボックスサイズを指定する width プロパティ、height プロパティの算出方法を指定します。
ボックスサイズの算出方法は、以下の値を指定します。
ボックスサイズの算出方法の指定値で対象となる、width（幅）、height（高さ）の範囲は下記の通りです。
content: 挿入コンテンツ;要素の直前または直後に文字列や画像などのコンテンツの挿入を指定します。
content プロパティを適用できるのは ::before 疑似要素や ::after 疑似要素だけです。content プロパティと一緒に font-size プロパティや color プロパティなどを指定した時は、挿入するコンテンツに適用されます。
挿入コンテンツは、以下の型式で指定します。
content プロパティの使用例は、以下の通りです。
使用例（HTML）
<div class="pelement3">
<p>サンプル1</p>
<p>サンプル2</p>
<p>サンプル3</p>
<p>サンプル4</p>
<p>サンプル5</p>
</div>
使用例（CSS）
.pelement3 p::before {
content: "◆";
padding-right: 5px;
color: skyblue;
}
サンプル1
サンプル2
サンプル3
サンプル4
サンプル5
使用例（HTML）
<div class="pelement4">
<p>サンプル1</p>
<p>サンプル2</p>
<p>サンプル3</p>
<p class="new">サンプル4</p>
<p class="new">サンプル5</p>
</div>
使用例（CSS）
.pelement4 p.new::after {
content: "New";
padding: 0 5px;
margin-left: 10px;
font-size: 0.9em;
color: white;
vertical-align: top;
background: red;
border-radius: 5px;
}
サンプル1
サンプル2
サンプル3
サンプル4
サンプル5
object-fit: はめ込み方法;img タグや video タグのコンテンツのはめ込み方法を指定します。
はめ込み方法は、以下の値で指定します。
object-fit プロパティについては「object-fit プロパティでの画像トリミング」でも説明していますので確認してください。
object-fit プロパティの使用例は、以下の通りです。（使用した画像の元サイズは、256px×128px）
使用例（HTML）
<img class="object-fit" src="object-fit-256x128.jpg">
使用例（CSS）
.object-fit {
width: 200px;
height: 200px;
border: 1px #333 solid;
object-fit: はめ込み方法;
}
object-position: 横方向配置位置 縦方向配置位置;iframe タグ、img タグ、video タグのコンテンツの配置位置を指定します。
配置位置は、以下の値で指定します。初期値は、「50% 50%」で、指定は、片方を省略することも可能です。
object-position プロパティの使用例は、以下の通りです。（使用した画像の元サイズは、256px×128px）
画像がはみ出した場合は、はみ出した部分は非表示（トリミング）になります。
使用例（HTML）
<img class="object-position" src="object-position-256x128.jpg" alt="object-position">
使用例（CSS）
.object-fit {
width: 300px;
height: 300px;
border: 1px #333 solid;
object-fit: none;
object-position: 画像の配置位置;
}
vertical-align: 垂直方向位置;インラインブロック、表セルボックスの垂直方向位置を指定します。
垂直方向位置は、以下の値で指定します。初期値は、baseline です。
vertical-align プロパティの使用例は、以下の通りです。（使用した画像の元サイズは、256px×128px）
使用例（HTML）
<div class="vertical-align">
sample<img src="vertical-align-256x128.jpg">サンプル
</div>
使用例（CSS）
.vertical-align {
width: 600px;
font-size: 40px;
line-height: 1.0;
text-align: center;
border: 1px #333 solid;
}
.vertical-align img {
vertical-align: 垂直方向位置;
}
サンプルサンプルサンプルサンプル
