カリフォルニアのミツケン先生に汎用的な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>
ああ、面白かった。