操作 プロパティ
幅・高さ「width・height」
width: 10px; height: 10px;
- 幅：width
- 高さ：height
単位
- px：解像度の最小単位の1マスが1px
- ％：親要素のwidthを100％にした時の割合
- vw/vh：ウィンドウ幅を100％にした時の割合
- em：親要素のfont-sizeを1にしたときの割合
- rem：html要素のfont-sizeを1にしたときの割合
最大値・最小値「min-height・max-height」「min-width・max-width」
- min-height：最小値 高さ
- max-height：最大値 高さ
- min-width：最小値 幅
- max-width：最大値 幅
はみ出し要素の表示方法「overflow」
overflow:hidden;
- visible：はみ出し部分は表示※デフォルト
- scroll：はみ出し部分はスクロール
- hidden：はみ出し部分は非表示
- auto：ブラウザに依存
要素の境界線「border」
まとめて設定
border: solid 1px black; ↓ border: スタイル 1px 色;
線のスタイル
- solid：１本線
- double：2本線
- dashed：破線
- dotted：点線
- none：非表示
線の太さ
- 数値
- thin：細い
- medium：普通
- thick：太い
種類のborderプロパティ
- border-style：線のスタイル
- border-width：線の太さ
- border-color：線の色
位置のborderプロパティ
- border-top：要素の上
- border-bottom：要素の下
- border-left：要素の左
- border-right：要素の右
余白「margin・padding」
- margin：要素の外側の余白
- padding：要素の内側の余白
値の数による設定
値が二つの場合･･･上下 左右
margin: 10px 20px;
値が三つの場合･･･上 左右 下
margin: 10px 20px 15px;
値が四つの場合･･･上 右 下 左
margin: 10px 20px 15px 30px;
位置の余白プロパティ
要素の外側
- margin-top：上
- margin-bottom：下
- margin-left：左
- margin-right：右
要素の内側
- padding-top：上
- padding-bottom：下
- padding-left：左
- padding-right：右
幅と高さの適用方法を設定「box-sizing」
box-sizing: border-box;
- content-box：幅と高さが「要素＋padding」になる
- border-box：幅と高さが「要素＋padding＋border」になる
装飾 プロパティ
背景色「background-color」
background-color: red;
色の指定
RGB16進
#fff：白 など
RGB関数
rgb(255,255,255)：白 など
背景画像「background-image」
background-image: url("画像ファイル名") ;
画像のサイズ「background-size」
値の数による設定
値が一つの場合･･･幅のみ
background-size: 10px;
値が二つの場合･･･幅 高さ
background-size: 10px 20px;
複数の背景画像･･･カンマ区切り
background-size: 6px, auto, contain;
値
contain：そのままタイル状に配置
cover：画像を大きく拡大縮小
auto：画像比率のまま拡大縮小
背景画像の繰り返し表示「background-repeat」
- repeat：タイル状に配置
- space：指定方向にそのままのサイズで敷き詰められる回数だけ繰返し、余白を画像間に均一に配置。
- round：タイル状に配置、残りの空間 ≧ 画像の幅の半分になるまで伸長する
- no-repeat：繰り返さない
表示場所「background-position」
- center：中央揃え
- top：上揃え
- left：左揃え
- bottom：下揃え
- right：右揃え
一括指定 background
background: center / contain no-repeat url("sample_key.jpg");
