CSS スタイルシートの小技等のご紹介

旧バージョンIEを最新のCSSへ対応させる

2014年3月7日
この記事は掲載から1511日経過しています。
情報が古い可能性が有りますのでご了承下さい

uuAltCSS.js

ホームページをデザインするとき、枠の角を丸くしたりロゴに影を付けたりなど、背景に画像を指定するなどして対応していましたが、CSS3に対応した最新のブラウザですと、これを簡単に表現する事が出来ます。しかし、IE6やIE7といった旧ブラウザでは、これに対応出来ません。まだまだ需要のあるこれらのブラウザにも、ある程度は対応出来る方法をご紹介します。

http://uupaa-js-spinoff.googlecode.com/svn/trunk/uuAltCSS.js/README.htm

こちらのサイトで公開されているJavaScript ライブラリで、完全では有りませんが対応する事が出来ます。

display: table

display:tableは、通常のタグの代替として使う事が出来ます。display: table-row;やdisplay: table-cell;と一緒に使う事が多くなるでしょう。

サンプル

最新ブラウザでのスタイルの記述

CSSのCLASS名をそれっぽくしてますので、どれが何の代替になっているのか何となく判るかと思います。

uuAltCSS.jsを使う

<table>と同じように、横並びになってくれます。

残念なのはdisplay: table-rowが使えないようですので、完全な表組みとしては扱い難いかも。ただ、指定幅の中で複数セルの幅を可変させて利用したいケースなどでは便利です。jqueryなどで表を生成する場合など、tableより扱いやすいので、特定の方が使う場所(管理パネルなど)の場合は多用しています。

以下はuuAltCSS.jsを使った参考例です。

文字に影を影を付ける

サンプル
可能ですが、うーん・・・という感じ。装飾という意味ではちょっと扱い難いかなと思います。

ボックスに影を付ける

サンプル
こちらは割といい感じです。

 
  • このエントリーをはてなブックマークに追加
  • LINEで送る

PAGE TOP