制作者の活動(PR)。

CSSの小技集。

平成18年 6月20日開設
平成23年11月13日更新

CSSに対応している現行のPC向けブラウザでご覧の方は、この見出しもCSSの技術を使っているのがお分かりかと思います。

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 第三水準(CSS 3)を用いた擬似強調傍点

(平成23年11月13日更新)

日本語文書でしばしば使われる強調を表す傍点を擬似的に表す方法です。

平成21年 2月 5日最終更新の旧版・強調を表す擬似傍点は、アーカイヴとなりました。

CSSスプライト～細かい画像を多数使う場合～

(平成23年 4月26日公開)

細かい画像(特にアイコン類)を多数使うウェブ文書に於いて、サーヴァに掛かる負荷を軽減し、閲覧者にとってもスムーズなブラウジングが実現する小技である、CSSスプライトを、制作者なりに解説しております。

特に、携帯電話向けコンテンツをPC向けに変換する場合には有用でしょう。

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

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

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

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

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

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