HOME > Tips > CSS

Category: CSS (14)

「float」させたリストをセンタリングする

  • Author:920
ページを分割した際のナビゲーションなど、リストアイテムを「float:left」させた場合、「text-align:center」が使えなくなってしまいます。「display: inline-block」を使う方法など、対処方法はいくつかあるようですが、「position」を使って解決する方法を紹介します。

ブラウザのデフォルトスタイルをCSSでリセット

  • Author:920
同じ(X)HTMLを表示してもブラウザによって見え方が違うのは、ブラウザそれぞれにスタイルが設定されているからです。この差異をなくすため、デフォルトのスタイルをリセットしてしまうという「リセットCSS」という方法があります。

Internet explorer 6で透明PNG画像を使う

  • Author:920
Internet explorerの7未満では、透明PNG画像が使用できませんが、Internet explorerのCSS拡張、「filter」を使用することにより、透明PNG画像が使用できるようになります。

条件付コメントをbodyタグに使用してIEのCSSハック

  • Author:920
「paulhammond.org」で「Conditional classnames」というInternet Explorer用のCSSハックのテクニックが紹介されていました。条件付コメント(Conditional Comment)を「body」タグに使用して、「body」タグに「Internet Explorer」を識別するための「class」を設定しようというものです。

カーソルでイメージを使う

  • Author:920
CSSでマウスカーソルの形状が変更できます。また、決められた形状だけではなく、指定のイメージを使用することもできます。

Internet Explorer 6で背景を半透明にする

  • Author:920
IEの7未満では、半透明のPNGイメージが使用できません。しかし、IEには、IE独自に拡張したCSSプロパティ、「filter: Alpha()」CSSがあります。

文章の両端揃え

  • Author:920
複数行に渡る文章の右側は不揃いになってしまいます。「text-align: justify」を指定すれば揃うはずなのですが、Firefox以外はサポートしていません。Internet explorerは独自拡張の、「text-justify: inter-ideograph」を指定すれば、対応できます。
UP