cssのボックスデザインの構造

cssのボックスデザインの構造について、サンプルを用いて解説します。

body要素の構造

先ず、スタイルを適用していない「body要素」です。

スタイルを適用していないbody要素

バックグランドカラーを水色にした「body要素」です。

バックグランドカラーを設定したbody要素

h1・p要素の構造

スタイルを適用していない「h1とp要素」です。

スタイルを適用していないh1・p要素

バックグランドカラーを白にした「h1とp要素」です。

バックグランドカラーを白にしたh1・p要素

「h1とp要素」のボーダーを1px赤を設定しました。

ボーダーを1px赤を設定したh1・p要素

広告

div要素の構造

「h1とp要素」をdivで囲みました。

h1・p要素をdivで囲んだ

div要素のバックグランドカラー黄色とボーダーを黒で2px設定しました。

div要素のバックグランドカラー黄色とボーダーを黒で2px

ビューポート設定

「head」にビューポートを実装しました。

「head」にビューポートを実装

ＣＳＳ３ に戻る

ホームページ作成方法 TOPに戻る