CSS・スタイルシートTIPS

IEで長い半角文字列の文章を折り返したい場合、
「word-break:break-all」
を指定して折り返すようにしますが、
Firefoxの場合は対応していなかったので、
JSを使ったりという対応をしていました。

ですが以下のコードで、
Firefoxで長い半角文字列が折り返されない（改行されない）現象を
回避することができます。

word-wrap: break-word;

CSS3のmedia queriesを使ってスタイルシートを振り分ける場合、
IEではCSS3がサポートされていないので使用できませんが、
以下のjavascriptを読み込むことで、
IEでもmedia queriesを使用することが可能になります。

css3-mediaqueries.js

iPhone・iPadなどを縦向き、横向きにした場合でレイアウトを替えたい場合、
一つのCSSで縦横の変化に合わせたものにせず、
CSSを分けて読み込むことが可能です。

tableを角丸のデザインにしたい場合、
画像やCSSの背景画像を使って―というやり方が一般的（？）でしたが、
CSS3のborder-radiusを使って、
簡単に角丸のデザインのtableを実装することができるようになりました。

単純にtableにborder-radiusを指定するだけなのですが、
1点だけ注意が必要です。

それは、
｢border-collapseでcollapseを指定すると角丸が効かない｣
ということです。

CSS3のプロパティをIE8でも反映させて使うことができる、
とても便利なbehaviorスクリプトCSS3 PIE（pie.htc）。

http://css3pie.com/

角丸やドロップシャドウの処理は、
画像よりCSS3でやる方がスマートなので使っていたのですが、
IEで印刷した時にレイアウトが大きく崩れるという現象にハマってしまいました。

CSS3を使ってボックスにドロップシャドウをかけたい場合、
基本的には以下のような記述になります。
W3C CSS3準拠のwebkit系（Safari, Chrome）とMozzilea系（Firefox）に分けての記述です。

Safari3など用のwebkit（W3C CSS3準拠）に対する記述

-webkit-box-shadow: 横方向のサイズ 縦方向のサイズ ぼかしの半径 色指定;

FirefoxなどMozilla系ブラウザに対する記述

-moz-box-shadow: 横方向のサイズ 縦方向のサイズ ぼかしの半径 色指定;

CSS3の記述

box-shadow: 横方向のサイズ 縦方向のサイズ ぼかしの半径 色指定;

表示例は次のようになります。

HTML5＆CSS3辞典

CSSのプロパティを書いていく際、
なんとなく思いついた順番、ルールで記述していってもちゃんと表示すれば良いのですが、
書く順番をきちんとルール付けしておくことで、
見た目にきれいなCSSになり、
複数人で編集する際も間違いを防ぐことができます。

CSSで背景をグラデーションにしたい場合、
CSS3を使って背景をグラデーションにしますが、
その際にはCSS3に対応していないIEではそのまま書いても反映されません。

IEは無視する、behaviorスクリプトを読み込んで反映させるなどの対応がありますが、
この他にIEの独自仕様である「filter（画像・テキストにフィルタ効果を与える）」プロパティを使って、
CSS3と同じように表示させることができる方法があります。

IEをCSS3対応にしたい場合に使われる、
CSS3 PIE_ CSS3 decorations for IEなどの,
javascript（.htcファイル）を使った方法ですが、
使う場合に注意する点があります。

CSSでグラデーション背景を指定する場合の書き方には2種類あり、
W3C CSS3準拠のwebkit系（Safari, Chrome）とMozzilea系（Firefox）を
それぞれ指定します。（角丸の場合と同じ）
基礎的な書き方としては以下のような書き方になります。

Safari3など用のwebkit（W3C CSS3準拠）に対する記述

-webkit-gradient(linear, 開始する位置, 終了する位置, from(開始する色), to(#ff0)終了する色));

FirefoxなどMozilla系ブラウザに対する記述

-moz-linear-gradient(方向, 開始する色, 終了する色);

指定できる要素は『background』と『background-image』です。

CSS3以前は要素に背景画像を引き何かとちょっとしたところで使いたくても面倒だった角丸の処理ですが、
CSS3簡単な記述で表示が可能です。

Safari3など用のwebkit（W3C CSS3準拠）に対する記述

-webkit-border-radius: ○px;

FirefoxなどMozilla系ブラウザに対する記述

-moz-border-radius: ○px;

角丸のサイズによって以下の表示例一覧のように見え方が変わります。

CSS3で要素の角丸を実現する機会も増えてきていますが、
IEでも表示できるようにするには、
Google Codeで配布されているhtcファイルを利用します。

マウスオーバーした時に画像置換しなくても光るように見せる方法。

pacityはCSS3で追加される予定のプロパティです。

CSS3に関する情報サイトで、
コードの一覧などが見やすくまとめられています。

CSS 2.1 で定義されている display プロパティの値の一つ

この指定をすることでfloat:left等で指定した横並びのボックスの行の高さを、
一番高さが高いボックスの高さに揃えることができます。

Cascading Style Sheets, level 3 (CSS3)
CSS3では全体がモジュール化され、ユーザーエージェントがどのモジュールに対応し、どのモジュールに対応しないか自由に選択できるようになる他、縦方向の書字や、HTML以外の規格にまで関与した内容となっている。現在、どのモジュールも勧告には至っていない。

Yahoo! User Interface Library（通称「YUI」）というJavaScriptのライブラリ内で利用されているfonts.cssの中のフォントサイズチャートを参考にしたCSSのフォントサイズ %指定の記述です。

FirefoxやSafariで、
『親要素に背景画像や背景色を指定して子要素でfloatが行われている場合
親要素の背景画像や背景色はfloatが行われない子要素までにしか反映されない』
という挙動の回避法です。