margin-top margin-bottom margin-right margin-left margin padding-top padding-bottom padding-right padding-left padding position top right bottom left float clear overflow display visibility vertical-align width height line-height
CSSリファレンス
配置の指定
書 式
記述例 <head>
<style type="text/css">
<!--h3 {background-color: #ffcc66;
margin-top:100px } -->
</style>
</head>
<body>
<h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3>
<p>M-1.Catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS </p>
上部のアキを指定する
すべて 継承なし
役割・機能
適用 継承の有無
margin-top
Win･････MacWin･･･････････････････5.5/657 Mac･････････7 Win･････7/8.5 Mac･･･････1/2指定可能な値：パーセントあるいは単位付きの数値 文
書 構 造
表 示・ 配 置
リ ス ト・ 表・ フ レ ー ム
リン ク・ 画 像・ フォ ー ム
テ キ スト
・罫 線 の設 定
背 景 の 設 定
配 置 の 指 定
リ ス ト・ 表 の 設 定
表示例
上部の間隔を指定します。パーセントで指定する場合は、上位の要素に 対する割合になります。
解説
■margin-bottom（P.111） ■margin-right（P.112） ■
margin-left（P.113）
参照項目
セレクタ{ margin-top: 値 }
記述例 <head>
<style type="text/css">
<!--h3 {background-color: #ffcc66;
margin-bottom:80px } -->
</style>
</head>
<body>
<h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3>
<p>M-1.Catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS </p>
下部のアキを指定する
すべて 継承なし
役割・機能
適用 継承の有無
margin-bottom
Win･････MacWin･･･････････････････5.5/657 Mac･････････7 Win･････7/8.5 Mac･･･････1/2指定可能な値：パーセントあるいは単位付きの数値
文 書 構 造
表 示・ 配 置
リ ス ト・ 表・ フ レ ー ム
リン ク・ 画 像・ フォ ー ム
テ キ スト
・罫 線 の設 定
背 景 の 設 定
配 置 の 指 定
リ ス ト・ 表 の 設 定 書 式
表示例
下部の間隔を指定します。パーセントで指定する場合は、上位の要素に 対する割合になります。
解説
■margin-top（P.110） ■margin-right（P.112）
■margin-left（P.113）
参照項目
セレクタ{ margin-bottom: 値 }
記述例 <head>
<style type="text/css">
<!--h3 {background-color: #ffcc66;
margin-right:50px } -->
</style>
</head>
<body>
<h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3>
<p>M-1.Catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS </p>
右側のアキを指定する
すべて 継承なし
役割・機能
適用 継承の有無
margin-right
Win･････MacWin･･･････････････････5.5/657 Mac･････････7 Win･････7/8.5 Mac･･･････1/2指定可能な値：パーセントあるいは単位付きの数値 文
書 構 造
表 示・ 配 置
リ ス ト・ 表・ フ レ ー ム
リン ク・ 画 像・ フォ ー ム
テ キ スト
・罫 線 の設 定
背 景 の 設 定
配 置 の 指 定
リ ス ト・ 表 の 設 定
書 式
表示例
右側の間隔を指定します。パーセントで指定する場合は、上位の要素に 対する割合になります。
解説
■margin-top（P.110） ■margin-bottom（P.111）
■margin-left（P.113）
参照項目
セレクタ{ margin-right: 値 }
記述例 <head>
<style type="text/css">
<!--h3 {background-color: #ffcc66;
margin-left:50px } -->
</style>
</head>
<body>
<h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3>
<p>M-1.Catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS </p>
左側のアキを指定する
すべて 継承なし
役割・機能
適用 継承の有無
margin-left
Win･････MacWin･･･････････････････5.5/657 Mac･････････7 Win･････7/8.5 Mac･･･････1/2指定可能な値：パーセントあるいは単位付きの数値
文 書 構 造
表 示・ 配 置
リ ス ト・ 表・ フ レ ー ム
リン ク・ 画 像・ フォ ー ム
テ キ スト
・罫 線 の設 定
背 景 の 設 定
配 置 の 指 定
リ ス ト・ 表 の 設 定 書 式
表示例
左側の間隔を指定します。パーセントで指定する場合は、上位の要素に 対する割合になります。
解説
■margin-top（P.110） ■margin-bottom（P.111）
■margin-right（P.112）
参照項目
セレクタ{ margin-left: 値 }
記述例 <head>
<style type="text/css">
<!--h3 {background-color: #ffcc66;
margin:80px } -->
</style>
</head>
<body>
<h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3>
<p>M-1.Catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS </p>
4辺のアキをまとめて指定する
すべて 継承なし
役割・機能
適用 継承の有無
margin
Win･････MacWin･･･････････････････5.5/657 Mac･････････7 Win･････7/8.5 Mac･･･････1/2指定可能な値：パーセントあるいは単位付きの数値 文
書 構 造
表 示・ 配 置
リ ス ト・ 表・ フ レ ー ム
リン ク・ 画 像・ フォ ー ム
テ キ スト
・罫 線 の設 定
背 景 の 設 定
配 置 の 指 定
リ ス ト・ 表 の 設 定
書 式
表示例
4辺の間隔を一度に指定します。4つの値で指定する場合は「上 右 下 左」、3つの値の場合は「上 左右 下」、2つの場合は「上下 左右」の順 に適用されます。値を1つだけ指定した場合は、4辺の間隔すべてに適 用されます。パーセントは、上位の要素に対する割合になります。
解説
.■margin-top（P.110） ■margin-bottom（P.111）
■margin-right（P.112） ■margin-left（P.113）
参照項目
セレクタ{ margin: 値 }
記述例 <head>
<style type="text/css">
<!--h3 {background-color: #ffcc66;
padding-top:30px } -->
</style>
</head>
<body>
<h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3>
<p>M-1.Catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS </p>
上部の余白を指定する
すべて 継承なし
役割・機能
適用 継承の有無
padding-top
Win･････MacWin･･･････････････････5.5/657 Mac･････････7 Win･････7/8.5 Mac･･･････1/2指定可能な値：パーセントあるいは単位付きの数値
文 書 構 造
表 示・ 配 置
リ ス ト・ 表・ フ レ ー ム
リン ク・ 画 像・ フォ ー ム
テ キ スト
・罫 線 の設 定
背 景 の 設 定
配 置 の 指 定
リ ス ト・ 表 の 設 定 書 式
表示例
上部の余白を指定します。パーセントは、上位の要素に対する割合にな ります。marginと違って、paddingの場合はその領域内での余白にな ります。
解説
■padding-bottom（P.116） ■padding-right（P.117）
■padding-left（P.118）
参照項目
セレクタ{ padding-top: 値 }
記述例 <head>
<style type="text/css">
<!--h3 {background-color: #ffcc66;
padding-bottom:30px } -->
</style>
</head>
<body>
<h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3>
<p>M-1.Catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS </p>
下部の余白を指定する
すべて 継承なし
役割・機能
適用 継承の有無
padding-bottom
Win･････MacWin･･･････････････････5.5/657 Mac･････････7 Win･････7/8.5 Mac･･･････1/2指定可能な値：パーセントあるいは単位付きの数値 文
書 構 造
表 示・ 配 置
リ ス ト・ 表・ フ レ ー ム
リン ク・ 画 像・ フォ ー ム
テ キ スト
・罫 線 の設 定
背 景 の 設 定
配 置 の 指 定
リ ス ト・ 表 の 設 定
書 式
表示例
下部の余白を指定します。パーセントは、上位の要素に対する割合にな ります。marginと違って、paddingの場合はその領域内での余白にな ります。
解説
■padding-top（P.115） ■padding-right（P.117） ■
padding-left（P.118）
参照項目
セレクタ{ padding-bottom: 値 }
記述例 <head>
<style type="text/css">
<!--h3 {background-color: #ffcc66;
padding-right:30px } -->
</style>
</head>
<body>
<h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3>
<p>M-1.Catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS </p>
右側の余白を指定する
すべて 継承なし
役割・機能
適用 継承の有無
padding-right
Win･････MacWin･･･････････････････5.5/657 Mac･････････7 Win･････7/8.5 Mac･･･････1/2指定可能な値：パーセントあるいは単位付きの数値
文 書 構 造
表 示・ 配 置
リ ス ト・ 表・ フ レ ー ム
リン ク・ 画 像・ フォ ー ム
テ キ スト
・罫 線 の設 定
背 景 の 設 定
配 置 の 指 定
リ ス ト・ 表 の 設 定 書 式
表示例
右側の余白を指定します。パーセントは、上位の要素に対する割合にな ります。marginと違って、paddingの場合はその領域内での余白にな ります。
解説
■padding-top（P.115） ■padding-bottom（P.116） ■
padding-left（P.118）
参照項目
セレクタ{ padding-right: 値 }
記述例 <head>
<style type="text/css">
<!--h3 {background-color: #ffcc66;
padding-left:30px } -->
</style>
</head>
<body>
<h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3>
<p>M-1.Catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS </p>
左側の余白を指定する
すべて 継承なし
役割・機能
適用 継承の有無
padding-left
Win･････MacWin･･･････････････････5.5/657 Mac･････････7 Win･････7/8.5 Mac･･･････1/2指定可能な値：パーセントあるいは単位付きの数値 文
書 構 造
表 示・ 配 置
リ ス ト・ 表・ フ レ ー ム
リン ク・ 画 像・ フォ ー ム
テ キ スト
・罫 線 の設 定
背 景 の 設 定
配 置 の 指 定
リ ス ト・ 表 の 設 定
書 式
表示例
左側の余白を指定します。パーセントは、上位の要素に対する割合にな ります。marginと違って、paddingの場合はその領域内での余白にな ります。
解説
■padding-top（P.115） ■padding-bottom（P.116） ■
padding-right（P.117）
参照項目
セレクタ{ padding-left: 値 }
記述例 <head>
<style type="text/css"><!--h3 {background-color: #ffcc66;
padding:30px } -->
</style>
</head>
<body>
<h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3>
<p>M-1.Catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS </p>
4辺の余白をまとめて指定する
すべて 継承なし
役割・機能
適用 継承の有無
padding
Win･････MacWin･･･････････････････5.5/657 Mac･････････7 Win･････7/8.5 Mac･･･････1/2指定可能な値：パーセントあるいは単位付きの数値
文 書 構 造
表 示・ 配 置
リ ス ト・ 表・ フ レ ー ム
リン ク・ 画 像・ フォ ー ム
テ キ スト
・罫 線 の設 定
背 景 の 設 定
配 置 の 指 定
リ ス ト・ 表 の 設 定 書 式
表示例
4辺の余白を一度に指定します。パーセントは、上位の要素に対する割 合になります。4つの値で指定する場合は「上 右 下 左」、3つの値の場 合は「上 左右 下」、2つの場合は「上下 左右」の順に適用されます。値 を1つだけ指定した場合は、4辺の余白ずべてに適用されます。
解説
■padding-top（P.115） ■padding-bottom（P.116） ■
padding-right（P.117） ■padding-left（P.119）
参照項目
セレクタ{ padding: 値 }
static：特に指定しない※1 absolute：絶対位置への配置※3 relative：相対位置への配置※2 fixed：絶対位置への配置（固定）
※1：top、bottom、left、rightプロパティは適用されない
※2：staticの場合に配置される位置が基準となる
※3：親要素の左上が基準となる
記述例 <head><style type="text/css"><!--h3 {background-color: #ffcc66;
position:absolute;
top:100px; left:80px}
p {background-color: #ccff33;}-->
</style></head>
<body><h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3>
<p>M-1.Catch22 M-2.PLAYMATE AT HANOI… 以下略 配置の方法を指定する
すべて 継承なし
役割・機能
適用 継承の有無
position
Win･････MacWin･･･････････････････5.5/657 Mac･････････7 Win･････7/8.5 Mac･･･････1/2指定可能な値：以下のキーワード 文
書 構 造
表 示・ 配 置
リ ス ト・ 表・ フ レ ー ム
リン ク・ 画 像・ フォ ー ム
テ キ スト
・罫 線 の設 定
背 景 の 設 定
配 置 の 指 定
リ ス ト・ 表 の 設 定
書 式
表示例
positionプロパティでは要素の配置方法を指定し、static以外の値を 取る場合はtop、bottom、right、leftで位置を指定します。記述例では、
h3要素の絶対位置を上から100px、左から80pxとしています。その ため、後続のp要素よりも下に表示されます。
解説
■top（P.121） ■right（P.122） ■bottom（P.123）
■left（P.124）
参照項目
セレクタ{ position: 値 }
文 書 構 造
表 示・ 配 置
リ ス ト・ 表・ フ レ ー ム
リン ク・ 画 像・ フォ ー ム
テ キ スト
・罫 線 の設 定
背 景 の 設 定
配 置 の 指 定
リ ス ト・ 表 の 設 定 記述例 <head>
<style
type="text/css"><!--h3 {background-color: #ffcc66;
position:relative;
top:50px; left:80px}
p {background-color: #ccff33;}-->
</style></head>
<body>
<h3>1st FULL Album REPORT FROM IRON MOUNTAIN</h3>
<p>M-1.Catch22 M-2.PLAYMATE AT HANOI M-3.S M-4.CORCLE/LINE~HARD CORE PEACE M-5.Hey Joe M6.MIRROR BALLS</p>
上からの配置位置を指定する
position指定がある要素 継承なし 役割・機能
適用 継承の有無
top
Win･････MacWin･･･････････････････5.5/657 Mac･････････7 Win･････7/8.5 Mac･･･････1/2指定可能な値：パーセント、単位付きの数値あるいはauto（自動）
書 式
表示例
positionプロパティでrelative、absolute、fixedが指定された場合 の、上からの位置を指定します。表示例のように、要素どうしの重なりを 表現することも可能です。
解説
■position（P.120） ■right（P.122） ■bottom（P.123）
■left（P.124）
参照項目
セレクタ{ top: 値 }