こんにちは、CSS ボックスの装飾へようこそ — 以前のモジュールでは、ボックス内のコンテンツを見てきました。 このモジュールでは、背景色と画像、境界線、およびその他のボックスの部分を操作して、実際のボックス自体を装飾します。 HTML 表の見栄えを良くすることから、フィルタやブレンドモードなどの高度なエフェクトを適用することまで、他のトピックについても検討します。

前提知識

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

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

ガイド

これらの記事は、あなたのページの CSS ボックスを面白くて便利な方法で装飾するのに必要なすべてを教えてくれるでしょう。

ボックスモデルの復習
CSS ボックスモデルの基本については、CSS 入門のモジュールで調べました。 この記事は復習を提供し、主題に関するいくつかのさらなる詳細に飛び込むでしょう。
背景
CSS では、コンテンツの背景に装飾を施すために多くのことを行えます。 基本的な背景色や背景画像など、いくつかの簡単な使い方をすでに見てきました。 この記事では、全てを物語ることで、複数の背景画像やカラーグラデーションなどの高度な機能について説明します。
境界線
繰り返しになりますが、境界線についてはすでに少し見てきました — 境界線の色やスタイルの設定などの簡単な使い方です。 ここでは、丸い角や境界線画像など、他に何が利用できるかについて考えます。
表の装飾
HTML 表を装飾することは、世界で最も魅力的な仕事ではありませんが、時にはそれをしなければならないこともあります。 この記事では、これまでの記事で説明したツールを使用して、HTML 表を見栄え良くするためのガイドを提供します。
ボックスの高度なエフェクト
この記事はトリックの箱として機能し、上記の他のカテゴリには当てはまらないボックスの装飾で使用できる高度な機能のいくつかを紹介します — ボックスの影、ブレンドモード、フィルタなどです。

評価

以下の評価では、上記のガイドに記載されているボックスの装飾のテクニックについての理解をテストします。

装飾的なレターヘッド付きの便箋の作成
あなたが正しい印象を与えたいのなら、素敵なレターヘッド付きの便箋に手紙を書くことは本当に良いスタートです。 この評価では、そのような意匠を実現するためのオンラインテンプレートを作成することに挑戦します。
かっこいいボックス
ここでは、人目を引くボックスを作成しようとすることで、かっこいいボックスを作成するためのいくつかの練習をします。

関連情報

装飾的なボックスの作成
いくつかのよりかっこいいボックスの装飾のアイデアです。

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

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