その他のプロパティ

・box-sizingプロパティ
→widthおよびheight　プロパティで設定する幅と高さの適用範囲を変更する

・contentプロパティ
→要素内容の前後にコンテンツを追加する

・quotesプロパティ
→ブラウザが表示させる引用符の種類を設定

width・height プロパティの適用範囲の変更

widthプロパティとheightプロパティは、ボックスの「要素内容を表示する領域」の幅と高さを設定するプロパティ
CSS3からは、「box-sizingプロパティ」を使用することで変更可能

box-sizingプロパティの値には以下のいずれかキーワードが指定できる
初期値の「content-box」は、これまでどうりwidthとheightを「要素内容を表示する領域」に対して適用するキーワード
これに対し、「border-box」を指定すると、widthとheightはボックスの「ボーダーの端までを含む範囲」に対して適用されるようになる
（ボーダーとパディングも含む領域の幅や高さを指定したことになる）
この値はwidthプロパティとheightプロパティだけでなく、min-width・max-width・min-height・max-height の各プロパティの適用範囲も変更する

box-sizing に指定できる値

・content-box
widthやheightプロパティで指定された値は、ボックスの「要素内容を表示する領域」の幅や高さに対して適用される

・border-box
widthやheightプロパティで指定された値は、ボックスの「ボーダーの端までを含む範囲」の幅や高さに対して適用される

例

HTML

<div id="d1">content-box</div>
<div id="d2">border-box</div>

CSS

div {
   margin: 50px auto 0;
   padding: 0;
   border: 50px solid #ddd;
   width: 300px;
   height: 200px;
   color: #fff;
   background: url(grid.gif);
   font-size: xx-large;
   font-wight: bold;
}
#d1 { box-sizing: content-box;}
#d2 { box-sizing: border-box; }

コンテンツの追加

「contentプロパティ」を使用すると、HTML内には存在していないコンテンツをCSSで追加することができる
コンテンツは、セレクタの「::before疑似要素」または「::after疑似要素」を使用して、指定してた要素内の内容全体の直前または直後に挿入される

追加するコンテンツは、「displayプロパティ」を使用してインラインにでもブロックレベルにでもできる

content に指定できる値

・テキスト
コンテンツとして追加するテキストを 二重引用符（ " ）または 一重引用符（ ' ）で囲って指定

・url（データのアドレス）
コンテンツとして追加するデータ（画像など）のアドレスを指定

・attr（属性名）
このプロパティが指定された要素に、属性名で指定した属性が指定されている場合、その値をテキストとして追加

・open-quote,　close-quote
次に解説する quotesプロパティ で設定されている引用符を追加

・none
コンテンツを追加しない


例

HTML

<h1>CSSで内容を追加する方法</h1>

CSS

h1 {
   font-size: large;
}
h1::before {
   content: "特別コラム：";
   display: block;
   font-size: small;
   color: #f6b;
}
h1::after {
   content: url(sakura.jpg);
   display: block;
}

引用符の設定

「quotesプロパティ」は、contentプロパティで追加する引用符（ open-quote、 close-quote ）を指定するプロパティ
引用部分の前につける記号と後につける記号を半角スペースで区切ってペアで指定
半角スペースで区切って記号のペアを指定することで、引用が入れ子になった場合に使用する記号をいくつでも指定できる
（入れ子の深さに応じて、次々に右側のペアの記号が採用される）

quotes に指定できる値

・文字列
引用符として使用する記号を半角スペースで区切ってペアで指定
半角スペースで区切ってペアを指定しておくと、引用が入れ子になった場合の引用符として使用される

・none
引用符を表示しない


例

HTML

<p>
知り合いのライターさんに確認してみたところ、<q>よくある実用書的な本には<q>日本語の
引用符にはカギカッコを用いる</q>と書かれている</q>とのことだった。
</p>

CSS

q:before { content: open-quote; }
q:after { content: close-quote; }
q { quotes: "「" "」" "『" "』"; }