ワンポイントアドバイス！

レイアウトを自在に操るにはここの反復練習をしてみましょう。

CSSの記述【ボックス】

ボーダー
border-style枠線のスタイル
border-color枠線の色
border-width枠線の太さを指定する
border-top枠線(上)のプロパティを一括
border-right枠線(右)のプロパティを一括
border-bottom枠線(下)のプロパティを一括
border-left枠線(左)のプロパティを一括
border

border-style
border-color
border-width
フォントのプロパティを一括で指定

  • ※順番の指定はなし
border
記述例値意味
border:solid 1px #ccc;半角区切りで
「枠線のスタイル」
「太さ（px,%）」
色（各指定方法）		上下左右まとめて境界線の指定
border-top:solid 1px #ccc;
border-left:solid 1px #ccc;
border-bottom:solid 1px #ccc;
border-right:solid 1px #ccc;		「none」なし
「solid」実線
「dashed」2本線
「dotted」点線		上下左右それぞれの境界線の指定
パディング
padding-top上パディング
padding-bottom下パディング
padding-left左パディング
padding-right右パディング
paddingpadding-top
padding-bottom
padding-left
padding-right
指定をまとめて行う
padding
記述例値意味
padding:5%;1つ「上右下左」一括指定パディングの設定
padding:5% 10%;2つ「上下 右左」の指定パディングの設定
padding:5% 10% 15%;3つ「上 右左 下」の指定パディングの設定
padding:5% 10% 15% 20%;4つ「上 右 下 左」の指定パディングの設定
padding-top:5%;
padding-bottom:5%;
padding-left:5%;
padding-right:5%;		「上右下左」それぞれの指定パディングの設定
マージン
margin-top上マージンを指定する
margin-bottom 下マージンを指定する
margin-left左マージンを指定する
margin-right右マージンを指定する
marginmargin-top
margin-bottom
margin-left
margin-right
マージンに関する指定をまとめて行う
margin
記述例値意味
margin:5%;1つ「上右下左」一括指定マージンの設定
margin:5% 10%;2つ「上下 右左」の指定マージンの設定
margin:5% 10% 15%;3つ「上 右左 下」の指定マージンの設定
margin:5% 10% 15% 20%;4つ「上 右 下 左」の指定マージンの設定
margin-top:5%;
margin-bottom:5%;
margin-left:5%;
margin-right:5%;		「上右下左」それぞれの指定マージンの設定
※マイナスの値が可能
※「margin-top」はややこしい
その他CSS3
border-radius角丸をまとめて指定する
box-shadowボックスに影をつける
box-sizingボックスサイズの算出方法を指定する
content内容（コンテンツ）を挿入する
border-radius
記述例値意味
border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px;最大はこの指定角丸それぞれの指定
border-radius:50%;%での指定（楕円形になる）角丸一括指定
border-radius:10px;pxでの指定（簡単な角丸）角丸一括指定
box-shadow
記述例値意味
box-shadow: 5px 5px 5px #ccc;水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色ボックスに1つまたは複数の影をつける
複雑なCSSはジェネレータで
CSS3 box-shadowとborder-radiusジェネレーター - bad-company
box-sizing
記述例値意味
box-sizing:border-box;「content-box」パディングとボーダーを幅と高さに含めない（初期値）
「border-box」パディングとボーダーを幅と高さに含める		ボックスサイズの算出方法を指定
ボックスモデルの設定に悩んだらコレ！
box-sizing
記述例値意味
content:"";「""」に挿入したい内容を入れる内容（コンテンツ）を挿入する
疑似要素「要素名:before」「要素名:after」と合わせて使うことが多い