スタイルシートの技

このページでは実用的なスタイルシートによるデザイン・レイアウトなどをメインに扱っております。 スタイルシートをサブで使うかメインとするかは賛否両論あります。 また、世の中にスタイルシート解説サイトは多数あると思いますが、 スタイルシートの持つ意味を誤解しているサイトが少なからずあるのと、 リファレンスのような書き方ではデザインへの応用が効かないのでは? という事を考えて、すぐに利用できる実用的な形式で参考になればと思って作成しました。

スタイルシートを勉強すると、当サイトの一番下にある「design」のように、 Javascriptと併用したデザイン切り替えページなどを製作する事ができるようになり、表現の幅が広がります!

自分のスタイルシートの知識を簡単にテストできる問題を作ってみましたので、どうぞ。

Introduction - 基礎・導入編

Beginner - 初級・基礎編

Practice - 中級・実用編

Advanced - 上級・応用編

Expert - 熟練者

また、当サイトのデフォルトのフォントは「Verdana, 70%」になっています。 何もフォントを設定しないページですと、実際に作成したものとは見栄えが異なりますのでご注意下さい。 また、サンプルHTMLコードには文書型宣言などが紙面都合上掲載しておりません。 記事等に誤りなどありましたら、メッセージを下さると幸いです。

HTML&スタイルシートトレーニングブックCSS3増補版 HTML/XHTML&スタイルシートデザイン・レイアウト逆引き便利帳 XHTML/HTML & CSSスタイルシート・デザイン辞典