以前のモジュールではボックス内のコンテンツについて見てきました。このモジュールでは、ボックス自体の背景色や背景画像、境界線、その他の装飾について見ていきます。また、 <table> 要素の装飾や、filter や <blend-mode> などの応用的なエフェクトについても触れていきます。

前提条件

このモジュールに取り組むには、HTML/CSSの基本的な知識が必要です。それぞれ、 HTML入門 や CSS入門 で触れています。

: 自身のPC/タブレット/その他のデバイスにコードを書く環境がない場合は、JSBin や Thimble などでサンプルコードを試すことも可能です。

ガイド

以下の記事を学習することで、ボックスの装飾について必要なCSSの知識を得ることができます。

ボックスモデルの復習
CSS入門 の ボックスモデル ではボックスモデルの基礎を学習しました。この記事では、その復習と、さらに一歩踏み込んだ詳細に触れていきます。 
背景
CSS では、背景にさまざまな装飾を施すことができます。背景画像や背景色などの基本的な使い方についてはすでに見てきましたが、この記事では、背景の装飾についての全体像を俯瞰し、複数画像の配置やグラデーションなどの応用的な機能まで見ていきます。
境界線
ボックスの境界線の色や線のスタイルなど、簡単な使い方についてはすでにみてきました。この記事では、角丸やborder-imageなどその他の機能について触れます。
table 要素の装飾
<table> 要素を装飾するのは、あまり気の進むものではありませんが、やらなければいけない時もあります。この記事では、これまでの記事で詳しくみてきた技術を使って、<table> 要素をうまく装飾する方法をみていきます。
高度なエフェクト
この記事では、他のカテゴリーに当てはまらないようなbox-shadowやfilter、blend-modeなどの応用的な機能を紹介します。

課題

以下の課題で、このガイドで網羅したボックスの装飾についての理解度をテストします。

レターヘッド付きの文書の作成
レターヘッド付きの手紙を書くのが相手に良い印象を与える出発点といえるでしょう。この課題では、そのような見た目を実現するためにオンラインテンプレートを作ってもらいます。
クールな見た目のボックス
上の課題に引き続き、人目につくようなクールなボックスを作ってみましょう。

関連情報

凝ったボックスの作成
ボックスの装飾に関するその他の技術を紹介しています。

ドキュメントのタグと貢献者

このページの貢献者: FumiyaShibusawa, xianheiba
最終更新者: FumiyaShibusawa,