- 2010年 5月 28日
- html/css
- Comments (1)
(個人的に) 覚えておきたいと思った :before 擬似要素 / :after 擬似要素のcontentプロパティと属性セレクタ。
使える使えないじゃなくて、覚えておきたいと思ったかどうか
contentプロパティ
- attr(x)
- xの部分を書き出せる。href、title、summary、cite や alt。
_html
<div class="example" title="div の title要素"> <p><a href="アドレス" title="タイトル">テキスト</a></p> </div>
_css
div:before{
content:'" ' attr(title) ' "';
font-size:2.0em;
}
a:after {
content:'(' attr(href) ')';
background:Olive;
}
_表示結果
divのtitleをfont-size2emで表示、aタグのリンク先を背景色oliveで書き出す。
divのtitleをfont-size2emで表示、aタグのリンク先を背景色oliveで書き出す。
- counter
- カウンター、なんでもolリストみたいにしちゃう。これ非常にわかりづらい。
content : counter (カウンターの名前, [種類 - decimalが初期値、省略可])
counter-reset : カウンターの名前 [開始番号 始めたい数-1を指定、省略可];
counter-increment : カウンターの名前 [カウンターの増加量 10なら10ずつ増えて-1なら1ずつ減ってく、省略可];
_html
<div class="rank"> <p>自治体サイトランキング［2010年3月］ <dl> <dt>大阪市（大阪府）</dt> <dd>得点 / 8.54</dd> <dt>三鷹市（東京都）</dt> <dd>得点 / 8.31</dd> <dt>相模原市（神奈川県）</dt> <dd>得点 / 8.27</dd> </dl> </div>
_css
.rank dt{
counter-increment:rank;
}
.rank dt:before{
content:counter(rank)"位 : ";
color:red;
}
_表示結果
自治体サイトランキング［2010年3月］
(自治体サイトランキング ：ゴメス・コンサルティング株式会社)
- 大阪市（大阪府）
- 得点 / 8.54
- 三鷹市（東京都）
- 得点 / 8.31
- 相模原市（神奈川県）
- 得点 / 8.27
この色が content : counterで生成された文字
- clearfix
- ブロック内にfloatをclearする要素が無くてもclearするアレ。
_表示省略。
_html
<div id="wrap"> <div class="article">float:left</div> <div class="aside">float:right</div> </div>
_css
#wrap:after {
content : '';
display : block;
clear : both;
height : 0;
}
/* IE 6-7 */
#warp{
/zoom : 1;
}
- 枠付きのふきだし
- cssだけで作る吹き出しにborderをつけた。
_表示結果
The quick brown fox jumps over the lazy dog.
_html
<p class="ballon">The quick brown fox jumps over the lazy dog.</p>
_css
p.ballon {
position:relative;
background:white;
width:400px;
padding:10px 20px;
/* 角丸 */
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin-bottom:15px;
border:3px solid MediumVioletRed;
}
p.ballon:before {
content:'';
border-top:15px solid MediumVioletRed;
border-right:12px solid transparent;
border-left:12px solid transparent;
position:absolute;
bottom:-15px;
left:20px;
}
p.ballon:after {
content:'';
border-top:12px solid white;
border-right:9px solid transparent;
border-left:9px solid transparent;
position:absolute;
bottom:-12px;
left:23px;
}
属性セレクタと一緒に使ってみる
- E[foo]
- “foo”属性を持つE要素にマッチ
_html
<pre title="XHTML 1.0 transitonal の DOCTYPE"><code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </code></pre> <pre><code> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> </code></pre>
_css
pre[title]:before { /* title属性をもつpre要素にマッチ */
content:'" ' attr(title) ' "';
}
_表示結果
title属性をもつpre要素にマッチしたらtitle属性を書き出す。
title属性あり
title属性をもつpre要素にマッチしたらtitle属性を書き出す。
title属性あり
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">title属性なし
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">- E:not(s)
- sに一致しないE要素
_html
<ul>
<li><a href="http://blog.sakurachiro.com/">乱雑モックアップ / フロントページ</a></li>
<li><a href="#wrap">ページの先頭へ</a></li>
<li><a href="http://www.google.co.jp/">google 日本</a></li>
</ul>
_css
a:not([href^='#']):after {
content:' ( ' attr(href) ' ) ';
background:black;
}
_表示結果
「#で始まるhref」ではない a要素にマッチ(=アンカーリンクにはマッチしない)
マッチしたらリンク先urlを黒背景で書き出す。
「#で始まるhref」ではない a要素にマッチ(=アンカーリンクにはマッチしない)
マッチしたらリンク先urlを黒背景で書き出す。
print用cssで使うとアンカーリンク以外のリンクを印刷に出力出来るみたい。
_css
@media print{
a:not([href^='#']):after {
content:' ( ' attr(href) ' ) ';
}
}
関連記事かもしれん:
1件のコメント »
この投稿へのコメントの RSS フィード。 TrackBack URL
乱雑モックアップのフィード
follow me
tumbr(18禁)
[...] ([追記] :before 擬似要素 / :after 擬似要素でつくる画像を使わないふきだしの作り方はこちら [...]
ピンバック by （縁取りのある）ふきだしの尖がってる部分の作り方 | 乱雑モックアップ — 2010年8月23日 @ 15:15