CSSの小技集。

平成18年 6月20日開設
平成21年11月19日更新

平成19年 2月に二ヶ月続けて債務不履行と言う状況に陥りましたが、その後の進展に依り破産及びサイト閉鎖と言う最悪の事態は免れる事が出来ました。しかしながら、今後安定してコンテンツをご提供出来るかは分かりません。
このような状況ですので、引続き皆様のご支援をお願いしております。
また、大した技術ではございませんが、制作者の技術をご活用下さる法人の方も改めてお待ちしております。

CSSの小技集について。

▲記事先頭
▽次項目

ウェブデザインで活用出来そうなCSSの小技を集めてみました。

CSSの小技集で扱う事、扱わない事。

▲記事先頭
△前項目
▽次項目

CSSの小技集においては、一部HTML文書側のマークアップに不自然さを強いるものもあります。

例えば、無意味に<div>要素を何重にもする、一見無意味な<span>要素を利用するなど。

そのような不自然なマークアップを伴う小技はお奨め出来るものではありません。

但し、CSSが無くても可読性に問題が生じない限りはこのコーナで取り上げるものとします。
HTML文書側の細工により、CSSを使わないと読めなくなるかおかしな文書となるような小技は、例え需要があっても採り上げません。

また、ネットスケープ 4.xなどの旧式のユーザエージェントでは、一部を除いて利用出来ないものとなります。

そこで、こう言った旧式のユーザエージェント対策の小技も、CSSの小技集でご紹介するつもりです。

CSSの小技集・目次。

ここでは、CSSでデザインするに当たって基本的と思われるものをご紹介します。

段落セクションに左余白を与えるには: (平成21年 4月10日更新); 段落などのセクションとなるブロックについて左余白を与えると言うのはウェブでもオフライン文書でも良く見かけますが、これを行うためのスタイルを解説します。但し、適切なスタイル定義はHTMLのマークアップにも依ります。
顔文字などの文字絵を使いたい場合: 顔文字などの文字絵(アスキィアート)は、アクセシビリティ上問題があります。その問題点を出来得る限り排除するには、ある小技が必要です。
画像をアンカーにする場合: 画像をリンクのアンカーにする場合、そのままでは、多くの環境のデフォルトスタイルに依り画像に枠が付いてしまいます。この枠を消す方法です。
表(テーブル)の行の色を動的に変える: (平成18年 6月21日追加); 大きな表(テーブル)などで、表内の行をマウスカーソルで指している際にその行の背景色を変化させる事で読み易くするための小技です。
大きな画像の中に小さな見出し文字を入れるには: (平成19年 2月19日更新); 最近ウェブログなどで見られる、大きな画像の中にある見出し文字を実現する方法です。
大きな画像の中に見出し文字とサブタイトルを入れるには: (平成19年 2月24日公開); 大きな画像の中に小さな見出し文字を入れるにはの続編で、見出しだけでなくサブタイトル文字列も含める方法を解説しております。
<hr>要素のスタイル: (平成19年 4月23日公開); CSSで<hr>要素(横罫線)の色や太さなどスタイルを定める際、各ブラウザでの実装がまちまちであり、しかも多くのブラウザでバグが見られるので注意が必要です。
内容をスクロール出来るブロックレヴェル要素: (平成19年 9月 6日公開); サイトの更新案内などで視覚効果を狙って<textarea>要素などでスクロール可能なボックスを表示させている例は多いですが、適切なHTMLのマークアップとCSSでより効果的に内容をスクロール出来る要素が出来ます。

更なる小技。

▲記事先頭
△前項目

ここでは、CSSでデザインするに当たって基本を越えていると思われるものをご紹介します。

CSSだけで実現するポップアップメッセージ

(平成21年11月19日公開)

CSSの小技として、マウスでポイントした要素のtitle属性などで埋め込んだメッセージがポップアップする機能をCSSだけで実現して見ましょう。

CSSだけでこの機能が実現出来れば、わざわざJAVAスクリプトを持ち出す必要がなくなります。

現状、現行のブラウザの大半で利用出来ますが、インターネットエクスプローラ 7.0まででは正常に動作しないので、これらで効果を出そうとすると引続きJAVAスクリプトが必要になります。
但し、実用性に関しては若干問題点があります。JAVAスクリプトが使えない場合に已む無く使うと言うか、JAVAスクリプトが使える場合にはスクリプトと併用すると言うのが妥当かも知れません。

<ol>要素を表みたいに表示するには

(平成21年11月18日公開)

CSSの小技として、<ol>要素をテーブルみたいに表示する方法を考えて見ましょう。

こうする事でマークアップは単純でアクセシブルな<ol>要素、PCなどでの表示は直感的なテーブル風にと言うようにご都合の良い方法が採れるようになります。

CSSだけで実現するポップアップメニュー