スタイルシートの技
このページでは実用的なスタイルシートによるデザイン・レイアウトなどをメインに扱っております。 スタイルシートをサブで使うかメインとするかは賛否両論あります。 また、世の中にスタイルシート解説サイトは多数あると思いますが、 スタイルシートの持つ意味を誤解しているサイトが少なからずあるのと、 リファレンスのような書き方ではデザインへの応用が効かないのでは？ という事を考えて、すぐに利用できる実用的な形式で参考になればと思って作成しました。
スタイルシートを勉強すると、当サイトの一番下にある「design」のように、 Javascriptと併用したデザイン切り替えページなどを製作する事ができるようになり、表現の幅が広がります！
自分のスタイルシートの知識を簡単にテストできる問題を作ってみましたので、どうぞ。
Introduction - 基礎・導入編
Beginner - 初級・基礎編
Practice - 中級・実用編
- コンテンツをウィンドウにぴったり密着させる
- 画像の回り込みを行う
- 新聞記事のように先頭の1文字だけインパクトを与えた文字にする
- iframe要素を使わずに擬似的なインラインフレームのを作成する
- 自分で作ったダイアログボックス（画像）の中にテキスト文書を配置する
- クールなテーブルを作成する
- フォーム（Form）要素内のボタンやテキストボックスをクールに決める！
- プログラムコードなどを説明するページにこだわってみる
- スタイルシートで細かい化学式を作成してみよう。
- ルーズリーフのようなコンテンツボックスを作成する
- 見出しレベルを作成したけど、表示させなくない時には？（アクセシビリティを考慮した場合）
- グラデーションのかかった水平線の作成 （Internet Explorer 4.0~）
- 文字列に影をつける(Internet Expolorer 4.0~)
- 指定した部分の上にマウスが乗った時のカーソルを変更したい （Internet Explorer 4.0~）
- スクロールバーをデザインする (Internet Expolorer 5.5~)
Advanced - 上級・応用編
- dl,dt,dd要素だけを使ってクールな日記を作成する
- エクスプローラーのような表示をul要素のみで作る
- Windowsのメニューのような項目をリストを応用して作る
- マウスが領域内に入るとハイライトするメニューを作成する
- 「トップへ」「ホームへ」などで使う画像をimgタグで何度も書かずにスタイルシートで一括処理する
- dl要素のcompact属性をスタイルシートで実現する（HTML4.01 Strict, XHTML1.0 Strict）
- フォントサイズ指定の留意点
- "Netscape navigator 4.x"でのスタイルシート適応の回避方法
- "nternet Explorer"と"Netscape Navigator"でのtable要素の挙動の違いの対処法
Expert - 熟練者
また、当サイトのデフォルトのフォントは「Verdana, 70%」になっています。 何もフォントを設定しないページですと、実際に作成したものとは見栄えが異なりますのでご注意下さい。 また、サンプルHTMLコードには文書型宣言などが紙面都合上掲載しておりません。 記事等に誤りなどありましたら、メッセージを下さると幸いです。
