てんぽ: :first-letter擬似要素とかCSS Tipsとか

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

:first-letter擬似要素とかCSS Tipsとか

2006年07月23日(日)

:first-letter擬似要素 仕様

:first-letter擬似要素に適用できるプロパティの各ブラウザの対応状況が知りたい。とくにline-height。 たとえば、フロートさせた:first-letter擬似要素にborderとline-heightと背景色を指定したとき、 IE6, Firefox1.5, Opera9.0ですべて異なる表示結果になった。 自分の予想(こうなるであろうという想像)と同じだったのはOpera。逆にもっとも予想とかけ離れていたのはFirefoxだった。

テクニック

うまくやれば縦横(ある程度まで)可変の角丸ボックスが作れますね。想定するHTMLは以下のような感じ。

<div class="section">
<h2></h2>
<ul>
<li></li>
<li></li>
...
</ul>
</div>
  1. div(右下)
  2. h2:first-letter(左上)
  3. h2(右上)
  4. ul(左下)

もちろん横幅固定ならもっと簡単にできます(ADP: 角を丸くしたいネタ (1)参照)。

おまけ。CSS Tips.

自分の書いた記事がいくつか紹介されてるんですが、clearの解説はそろそろ改訂したいなぁ。CSS2では「上マージンを増加させる」とされていましたが、 CSS2.1では「もともとの上マージンでは回り込みの解除に不足である場合に『クリアランス』と呼ばれる余白を設ける」ことになったようです(セオリー・オブ・スタイルシートが詳しい)。

#103
カテゴリ:HTML・CSS
タグ[ CSS IE Firefox Opera ]

(-1件)

hideandseek:Re: :first-letter擬似要素とかCSS Tipsとか

はじめまして。hideandseekと申します。
御サイトのテンプレートに感心しましてエントリー違いかと思いましたが,TBさせていただきました。

  • 2006年07月28日(金)01:01:03
  • URL
コメントの投稿

トラックバック(-1件)

http://mb.blog7.fc2.com/tb.php/103-b8e7169b

テンプレートのスタイル切り替え

4日前のエントリー,「このサイトについて(3)」にも書いたお気に入りのテンプレートの話。chameleonの作者,mb(みりばーる)さんのブログがいつの間にかモデルチェンジしていました。ブログの内容はHTML・CSSやFC2ブ

  • 2006年07月28日(金)00:56:56
  • from 日々流転的備忘録(かくれんぼ)

<<メモ:Netscape7.1, IE6 clearできないバグ | CSS切り替えテンプレート>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

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