自動計算
calc
calcはCSSで四則計算を可能にするものです。
ベースとなる数値からピクセル分を自動的に四則計算して表示する事ができます。
- 加算（足し算）：+
- 減算（引き算）：-
- 乗算（掛け算）：*
- 除算（割り算）：/
特定部分だけを可変にする方法
calcを使用して特定部分だけを可変にする方法です。
主にカラムやメニューの一部だけを可変にするような時に非常に便利です。
要素 {width:calc(横幅をパーセント指定% - 差し引きたいピクセル数px);}
自動調整
縦横幅の自動調整
要素内の大きさに合わせて自動で伸縮させる方法です。
要素 {width:100%;height:auto;}
横幅の自動調整
横幅の自動調整方法には「width:100%」を使用します。
vwも使えますが、こちらはまだ完全ではないようです。
[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法
要素 {width:100%;}
縦幅の自動調整
vhは表示領域の縦幅を指定する事ができます。
縦幅に100vhを指定すると自動で縦方向の長さを100％（画面サイズ）に調整してくれます。
これを利用すればコンテンツのボリュームが少ない場合でも統一した縦幅にする事ができます。
CSS には vw, vh, vmin, vmax という単位がある
要素 {min-height:100vh;}
画像の縦横比を保ってサイズ変更
画像の縦横比を保ちながらのサイズ変更する方法です。
画像要素 {max-width:横幅; height:auto; width:auto; max-height:縦幅;}
その他のCSSオートテクニック
文字列の自動付加
contentとbefore擬似要素やafter疑似要素を組み合わせると、要素の前後に文字や画像を自動付加できます。
beforeは行頭にafterは行末に付加が可能で、平行に表示されない場合は「position:relative」で位置を指定し、大きさは「font-size」で変更する事ができます。
また、記号の文字化けやIEで反映されない場合は、以下のような対策が必要です。
要素の前後に内容を追加する
CSSの「疑似要素」の書き方 再入門（CSS3対応版）
- 効果：行頭に付加（beforeを利用）、行末に付加（after）
- CSSの書式：要素:before {content:"文字列";}
- position:relativeを使う場合：要素:before {content:"文字列"; position:relative; topまたはbottom:高さを指定; font-size:文字サイズを指定;}
- 記号の文字化け対策：16進数値文字参照 変換スクリプト
- 無効化：要素:before {content:none;}
画像の自動付加
リストタグの行頭に画像を表示する方法です。
li {list-style:none; padding:画像の位置を調整; background:url(画像ファイルのパス) left 5px no-repeat;}
半角英数字の自動改行
連続した半角英数字は改行されずに枠幅を飛び出しますが、これを回避する方法です。
以下のようにCSSに記述すれば、対象の要素の枠幅で自動的に改行されます。
要素 {word-break:break-all;}