ボックス設定
ボックス
- 基本
-
※ ボックスの大きさ=contentの大きさ+paddingの幅+borderの幅
- 種類
-
- インライン
Wordにおける「文字」に相当
<span>、<strong>、<em>、<img>、<a>など
- ブロック
改行される塊、Wordにおける「段落」および「図」などに相当
幅の指定が無ければ1行全体を領域とする。
<div>、<p>、<h1>、<table>、<figure>、<section>など
大きさ
- 単位
-
CSSで使用する単位付き数値 単位 意味 em 今の時点での基準フォントサイズの高さ ex 小文字"x"の高さ rem html要素で設定された基準フォントサイズの高さ px ピクセル(絶対値) % 基準値に対する相対的な比率 単位による動き方の違いは「大きさ設定」を参照せよ。
- 異なる単位の計算
-
記述 見え方 <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カラーコードなどを参照せよ
ボックス設定
- コンテンツの幅・高さ
-
- 幅
- 高さ
- 背景
- ボーダー
-
- 上
- 右
- 下
- 左
- 線種
- 色
- 太さ
- 上下左右まとめて指定
※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: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;"
-
丸
- マージンとパディング
-
- 上
- 右
- 下
- 左
- 上下左右まとめて指定
- 影
-
- 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;
-
影