ボックス設定
ボックス
- 基本
-
marginborderpaddingcontent1.top2.right3.bottom4.left
※ ボックスの大きさ=contentの大きさ+paddingの幅+borderの幅
- 種類
-
- インライン
Wordにおける「文字」に相当
<span>、<strong>、<em>、<img>、<a>など
インライン要素1インライン要素2 - ブロック
改行される塊、Wordにおける「段落」および「図」などに相当
幅の指定が無ければ1行全体を領域とする。
<div>、<p>、<h1>、<table>、<figure>、<section>など
ブロック要素1ブロック要素2
大きさ
- 単位
-
CSSで使用する単位付き数値 単位 意味 em 今の時点での基準フォントサイズの高さ ex 小文字"x"の高さ rem html要素で設定された基準フォントサイズの高さ px ピクセル(絶対値) % 基準値に対する相対的な比率 単位による動き方の違いは「大きさ設定」を参照せよ。
- 異なる単位の計算
-
[width/height/font-size…]:calc(単位付き数値 [+ - * /] 単位付き数値);
※数値と演算子の間にはスペースが必要
※未確定仕様だが主要ブラウザは正式対応済み
記述 見え方 <span style="font-size:1.5em">あ</span>
<span style="font-size:calc(1.5em + 5px)">あ</span>ああ
色
- 色名(カラーネーム)による指定
- blackwhiteblueredyellowgreen purplegraysilvergoldnavylime pinkorangebrownなど
- 16進数表現
- #赤[00-FF] 緑[00-FF] 青[00-FF]
- RGBAカラー(半透明が使える)
- rgba(赤[0-255],緑[0-255],青[0-255],透明度[0(完全に透明)-1(完全に不透明)])
※詳細はWEB色見本 原色大辞典 - HTMLカラーコードなどを参照せよ
ボックス設定
- コンテンツの幅・高さ
-
- 幅
-
width:幅; - 高さ
-
height:幅;
- 背景
-
background: 色指定 [url("画像のURL")]; - ボーダー
-
- 上
-
border-top:線種 太さ 色; - 右
-
border-right:線種 太さ 色; - 下
-
border-bottom:線種 太さ 色; - 左
-
border-left:線種 太さ 色; - 線種
-
border-style:全線種 | 上下 左右 | 上 左右 下 | 上 右 下 左; - 色
-
border-color:全色 | 上下 左右 | 上 左右 下 | 上 右 下 左; - 太さ
-
border-width:全太さ | 上下 左右 | 上 左右 下 | 上 右 下 左; - 上下左右まとめて指定
-
border:線種 太さ 色;
※border-top-styleといった指定も可能
線種
- border-style:none
-
a
- border-style:solid
-
a
- border-style:double
-
a
- border-style:groove
-
a
- border-style:ridge
-
a
- border-style:inset
-
a
- border-style:outset
-
a
- border-style:dashed
-
a
- border-style:dotted
-
a
- 角を丸める
-
border-radius:水平方向 左上 右上 右下 左下 [ / 垂直方向 左上 右上 右下 左下]; - border-radius:1rem 0 1rem 0;
-
丸
- border-radius:1rem 0rem 0.5rem 1rem /
0.5rem 1rem 1rem 0; -
丸
- border-radius:100% 0 0 0;
-
丸
- border-radius:100% 0 0 0 / 50% 0 0 0;"
-
丸
- マージンとパディング
-
- 上
-
[margin/padding]-top:幅; - 右
-
[margin/padding]-right:幅; - 下
-
[margin/padding]-bottom:幅; - 左
-
[margin/padding]-left:幅; - 上下左右まとめて指定
-
[margin/padding]:全部の幅 | 上下幅 左右幅 | 上幅 左右幅 下幅 | 上幅 右幅 下幅 左幅;
- 影
-
box-shadow:none | 水平距離 垂直距離 [ぼかし距離 広がり距離] 色 [inset]; - box-shadow:1px 2px silver;
-
影
- box-shadow:1px 2px 5px 0px silver;
-
影
- box-shadow:1px 2px 0px 5px silver;
-
影
- box-shadow:1px 2px silver inset;
-
影