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