ki:blog

スタイルシート無効のブラウザで、フォント装飾時にその効果が現れないため稀に文脈や意図が読み辛い問題がある。(主にRSSリーダ)
これらの回避に装飾の基本タグの使用が適切と思われる。

▼大きい文字など、強調の場合
span style="font-weight:bold;font-size:15pt;"
　↓
strong style="font-size:15pt; "

▼隠し文字など控えめにする場合
span style="font-size:8pt;color:#ffffff;"
　↓
small style="color:#ffffff; "

つまるところ、spanやdivではなく、strongやsmallにstyleを指定すると、スタイル自体は無効になるものの、本来タグが持つ機能(太字や小さい文字)は適切に表現されるため、強調されているのか、控えめにされているのか、ということは判断でき、素のテキストでも読みやすい。(strongは携帯からの閲覧にも有効)
元々divやspan自体が汎用要素であってマークアップとしての意味を持たない為使用は最小限に控えるべきであるというのもある。

ということにRSSリーダを使い始めて気付いたところで、マイルール設定。メモメモ。

---

/*追加スタイル*/
/*共通*/
.red {color:#cc0000;}
.blue {color:#000099;}
.green {color:#009900;}
.wnormal {font-weight:normal;}
.fnormal {font-size:1em;}

/*strong*/
.large15 {font-size:1.5em;}
.large18 {font-size:1.8em;}
.large20 {font-size:2.0em;}

/*small*/
small.hide{display:inline;color:#ffffff;} /*背景と同色*/
.glay{color:#dddddd;} /*背景より少し濃い色*/

▼使用例
赤字、太字無し、フォントサイズ1.5emの場合。
strong class="red wnormal large15"
※CSS2対応のモダンブラウザであればクラスの複数指定が可能。この場合未対応ブラウザでは表示されない。未対応を考慮するなら二重にタグでくくるしかないがその場合はstrong spanとすべきかなー。

いちいちスタイル設定するのも有だけど、絶対値でない限りは着せ替えを考えるとクラス指定をする方が無難。
テンプレを変える度に決めておくといつも同じスタイル追加するだけで済むので、ちょっとまとめてみますた。今まで適当だったので。

(08.05：実際に使えるように修正)
hideクラスが良く使われる(display:none;が多かった)ので、smallの時のみ上記hideクラスが有効になるように。衝突回避に

要素:値 ! important;

を使う手もあり。