芸大 - 情報編集(Web) 2013
CSS入門 2 – ボックスモデルを理解する
HTMLのブロックレベル要素(見出し、段落など文書を構成する基本要素)は、ボックスと呼ばれる矩形(四角形)領域を生成します。この領域の概念のことを「ボックスモデル」と呼びます。各ボックスのテキストや画像などの内容の周辺には、パディング(Padding)、ボーダー(Border)、マージン(Margin)の順に周辺の領域を持っています。CSSでWebページをデザインしていく際に、このボックスモデルの理解が欠かすことのできない前提知識となります。今回はこのボックスモデルに焦点をあてて、CSSを活用したデザインについて解説していきます。
CSSのテストのためのテンプレートは下記からダウンロードしてください。