今回はさらにCSSによるWebデザインについて詳しく探求していきます。

前半は、CSSの「ボックスモデル」について取り上げます。Webページでは、文書内のすべての要素は、ボックスと呼ばれる四角形の領域を生成します。この四角形の領域の余白や境界線に関する共通の属性が決められていて、これをCSS「ボックスモデル」と呼んでいます。このボックスモデルを理解して適切に使用することで、余白やレイアウトの自由度が生まれ、Webページのデザインの可能性が飛躍的に向上します。

後半は、より本格的なCSSによるデザインの導入を行います。CSSを用いた凝ったページデザインをしようと思うと、徐々にCSSの記述量が増えていき最終的に膨大な分量をCSS作成する必要が出てきます。しかし、テキストの段組やボタンやアイコンなどのパーツなど、CSSを用いたデザインの多くの部分で共通する枠組みが存在します。こうした枠組みをまとめた「CSSフレームワーク」が存在していて、ネット上でフリーで公開されています。こうしたCSSフレームワークの中で利用者の多い「Twitter Bootstrap」を取り上げ、フレームワークを利用した本格的なWebデザインを体験します。

スライド資料

• CSSのボックスモデル、Twitter Bootstrapを使う