情弱エンジニアのなかのblog

一人前のエンジニアになる為のブログです

HTML5/CSS3を基礎から学ぶ

HTML5/CSS3の使い方等確認

現在HTML5やCSS3のコーディングの学習をしていまして そこで改めて学んだ知識等記載していきたいと思います。

ボックスモデル

CSSのボックスモデルについて記載致します。 HTML文書内に配置された要素は4つの領域をもち、階層があります。 一番内側から説明していきます。

まずはコンテンツエリアです。 単純にコンテンツ(内容)が表示されるエリアになります。

続いてパディングエリアです。 パディングエリアは要素の内側の余白までのことで、要素の外側とコンテンツとの間隔を調整できます。

続いてボーダーエリアです。 ボーダーエリアは要素の枠線までを含んだエリアです。 要素に背景色や背景画像を指定した場合、このボーダーエリアまで背景が適用されます。

最後にマージンエリアです。 マージンエリアは要素の外側の余白のことで、隣接するほかの要素との間隔を調整できます。

とても基本なところですが、最近のアプリ制作で意識していなかったので 自戒の念を込めて記載いたしました。

マージンの詳細

ボックスモデルの中でもmarginについて詳しく説明を記載いたします。

marginプロパティは、上下左右の余白をまとめて指定できます。 値を1つから4つまで指定出来て、値と個数の順番によって適用される位置が変わります。

//上下左右のmarginが10px
margin: 10px;

//上下のmarginが10px、左右のmarginが20px
margin: 10px 20px;

//上のmarginが10px、左右のmarginが20px、下のmarginが30px
margin: 10px 20px 30px;

//上のmarginが10px、右のmarginが20px、下のmarginが30px、左のmarginが40px
margin: 10px 20px 30px 40px;

こちらも基本的なことなのですが値が三つの場合はどうなるのかなど忘れていました。

このように基本の基本が抜けたままCakePHPでの制作などをしており UIの制作などで苦労していたので 初歩から学ぶことの大切さを実感致しました。

それでは