味気ない本文をほんの少し改造する方法。
以下の記述をCSSに加えることによって本文最初の文字が大きくなり、あたかも欧米雑誌のようになります。記事の始まりが分かりやすくなるなどメリットありかと…。
/* MacIE5 除く \*/
要素i名 or class名:first-letter {
font-size:24pt;
line-height:120%;
float:left;
padding: 0 5px 0 5px;
}
/* end */
忘れてならないのは”/* MacIE5 除く \*/”の部分と終わりの”/* end */”です。
この擬似要素:first-letterを使うと要素内の最初の文字をあれこれいじれるわけですが、Mac版IE5では2バイト文字(日本語)が文字化けを起こします。
そこでコメントの閉じ*/の直前に"\"を入れるバックスラッシュハック(バックスラッシュエスケープ)という技を使い、Mac版IEでこの指定が働かないようにします。
そうすることでMac版IEでは普通の表示(文字装飾無し)になります。お忘れなく。詳しくはGoogleで。
値は必要に応じて微意調整するように…。
Mac版IEではコメントの閉じ*/の直前にバックスラッシュが出てくると次のコメントが出てくるまでの間の記述を読み飛ばすという癖を利用したものです。
参考になったかしら?
文頭に画像入れるとき工夫がいるみたいです。
以上メモ書き。
