人気ブログランキング | 話題のタグを見る

ブログ活用のヒントを満載
by vlsasaki2
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31

CSSでマーカー(蛍光ペン)はいかが?
カリフォルニアのミツケン先生に汎用的なCSSの書き方を教えてもらいましたので、それを応用してマーカー(蛍光ペン)の機能を作りました。

以下のソースをCSSの最後に追加します。

.k01{
background-color:#ff0000;/*赤*/
color:#ffffff;
}

.k02{
background-color:#ffff00;/*黄*/
}

.k03{
background-color:#00ff00;/*黄緑*/
}

.k04{
background-color:#00ffff;/*水色*/
}

.k05{
background-color:#ff0000;/*青*/
color:#ffffff;
}

.k06{
background-color:#ff00ff;/*紫*/
color:#ffffff;
}

.k07{
background-color:#ff8080;/*薄赤*/
}

.k08{
background-color:#ffff80;/*薄黄*/
}

.k09{
background-color:#80ff80;/*薄黄緑*/
}

.k10{
background-color:#80ffff;/*薄水色*/
}

.k11{
background-color:#8080ff;/*薄青*/
}

.k12{
background-color:#ff80ff;/*薄紫*/
}



使い方はいたって簡単。
改行のないインライン範囲指定のspanタグを使うと、
k01 あああああああああああああああああ
k02 あああああああああああああああああ
k03 あああああああああああああああああ
k04 あああああああああああああああああ
k05 あああああああああああああああああ
k06 あああああああああああああああああ
k07 あああああああああああああああああ
k08 あああああああああああああああああ
k09 あああああああああああああああああ
k10 あああああああああああああああああ
k11 あああああああああああああああああ
k12 あああああああああああああああああ

k01 ああああああ<span class=k01>ああああああ</span>あああああ
k02 ああああああ<span class=k02>ああああああ</span>あああああ
k03 ああああああ<span class=k03>ああああああ</span>あああああ
k04 ああああああ<span class=k04>ああああああ</span>あああああ
k05 ああああああ<span class=k05>ああああああ</span>あああああ
k06 ああああああ<span class=k06>ああああああ</span>あああああ
k07 ああああああ<span class=k07>ああああああ</span>あああああ
k08 ああああああ<span class=k08>ああああああ</span>あああああ
k09 ああああああ<span class=k09>ああああああ</span>あああああ
k10 ああああああ<span class=k10>ああああああ</span>あああああ
k11 ああああああ<span class=k11>ああああああ</span>あああああ
k12 ああああああ<span class=k12>ああああああ</span>あああああ


段落指定のpタグを使うと、

あああああああああああああああああああああああああああああああああああああああああああああああああああ


あああああああああああああああああああああああああああああああああああああああああああああああああああ


あああああああああああああああああああああああああああああああああああああああああああああああああああ


<p class=k01>あああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
<p class=k02>あああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
<p class=k03>あああああああああああああああああああああああああああああああああああああああああああああああああああ</p>


ああ、面白かった。
by vlsasaki2 | 2004-09-17 00:33 | HTMLとCSS編集 Top↑
<< 再び名古屋出張 小さな秋を見つけに >>