ボックスモデル
ボックスモデルとは、CSS のボックスは、テキスト、画像、その他の HTML 要素が表示されるコンテンツ領域で構成されています。この領域は、パディング、境界、マージンによって、1 つ以上の辺で囲まれることがあります。ボックスモデルは、これらの要素がどのように連携して CSS で表示されるボックスを作成するかを説明します。
content-box（そのボックスのコンテンツ領域の辺です。）padding-box（そのボックスのパディングの辺です。その方向にパディングがなかった場合は、content-boxと同じになります。）border-box（そのボックスの境界の辺です。その方向に境界がなかった場合は、padding-boxと同じになります。）margin-box（そのボックスのマージンの辺です。その方向にマージンがなかった場合は、border-boxと同じになります。）stroke-box（SVG では、ストロークの囲みボックスを指します。 CSS ではcontent-boxとして扱われます。）view-box（SVG では、最も近い SVG ビューポート要素の原点ボックスを指します。これはその要素のviewBox属性によって確立された初期の SVG ユーザー座標系の幅と高さを持つ長方形です。CSS ではborder-boxとして扱われます。）
RWD （レスポンシブデザイン）対応のサイトについて
レスポンシブWebデザインとは、Webページのデザイン手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。 端末側でレイアウトを調整するコードを埋め込んでおく。
- 幅広デザインでの Web ページ作成
- viewport 定義の指定
- 横幅変動時のコンテンツ幅を設定
- Media Querie でデザインを整える
@media screen and (width: 600px) {
/* CSS 規則をここに */
} - 画面サイズに合わせた表示部品の導入
