FCafe  月日表示一桁化別法

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 前記事の方法で三つ前の記事でお示ししたのと同様な効果を得る事も可能です。

2008年09月06日  ⇒  2008年9月6日


【 設定法 】   CSSに以下の設定を追加します。
.n01:before {content:"1"}
.n02:before {content:"2"}
.n03:before {content:"3"}
.n04:before {content:"4"}
.n05:before {content:"5"}
.n06:before {content:"6"}
.n07:before {content:"7"}
.n08:before {content:"8"}
.n09:before {content:"9"}
.n01 i,.n02 i,.n03 i,.n04 i,.n05 i,.n06 i,.n07 i,.n08 i,.n09 i {display:none}
h3 span i {font-style:normal}     //( h3 タグ内で用いる場合 )
テンプレートHTMLの head 領域 ( スタイルシート参照リンク以後 ) に以下のタグを追加します
<!--[if lt IE 8]><style type="text/css">
.n01 i,.n02 i,.n03 i,.n04 i,.n05 i,.n06 i,.n07 i,.n08 i,.n09 i {display:inline}
</style><![endif]-->
月 (日) 部分のタグを以下のように書きます (例)
<span class="n<%xxx_month(day)>"><i><%xxx_month(day)></i>月(日)</span>

Sample

 

【 余 談 】  「マテ。 コレは first-letter 使う所だろ」 と思った方もおられるのでは。 (それは私です)
01~09 の一文字目(0)を表示しなくするには first-letter はドンピシャな気がします。 (私はしました)
CSSもHTMLソースもより簡潔に書けるのでは と思ったのですが、どっこいそれは普段使い込んでない者の浅はかな考えだったのでした。
インライン要素には使えない(ブロック要素でもインライン属性にすると失効してしまう)。 指定できるプロパティが限定されている。 ・・殆ど”ドロップキャップ専用”と云っても過言でない。 (無理やり使うとCSS設定もタグ組みも却って冗長になってしまう)

  でも 今まで縁遠かった 「擬似要素」 というものを身近に感じられたのは今回の収穫でした。

Comment


.  
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/589-b68460f8

Shown after Admisson
.

≫ FC2blog CAPTCHA攻略 月・曜日表記変更別法 ≪

2008 / 09 / 17  Wed
Entry   
Comment 0 / TB 0 / Edit
Designed by Daniel Corporation . all rights renounced
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。