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

ブログ活用のヒントを満載
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のトレーニング(12)・マーカー機能を作る
文章を部分的に強調したいことがあります。
Bタグで太字にしたり、FONTタグで大きくしたり色をつけたりいろいろありますが、マーカーで塗りつぶすような機能を追加しましょう。

実際に使ってみて意外と便利です。

このように行に設定する場合と、文字に設定する場合が考えられます。
あああああああああああああああああああああああああああああああああああああああああああああああああああ

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

ターゲットのセレクターですが、行の場合はPタグよりも既存の設定が何もないDIVタグにし、文字はSPANタグにしようと思います。

マーカーの機能というのは選択した行もしくは文字に背景色をつけるということですから、
DIV.k02 {
        background-color:#FFFF00;/*黄*/
        }

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

のように定義し、次のような使い方をするわけです。
<DIV class=k02>あああああああああああああああああああああああああああああああああああああああああああああああああああ</DIV>
ああああああああ<SPAN class=k02>あああああああ</SPAN>ああああああああああああああああああああああああああああああああああああ

このようにDIVタグでもSPANタグでも同じクラス名で使用する場合はCSSの記述でセレクターを省略し、
.k02 {
        background-color:#FFFF00;/*黄*/
        }

このように記述することができます。
そうするとDIVタグやSPANタグ以外にもPタグやBLOCKQUOTEタグで汎用的に利用することができます。

次の12色を設定しようと思いますが、赤と紫に関しては色が濃いので文字色を白にして白抜き文字にしたいと思います。
.k01 {
        background-color:#FF0000;/*赤*/
        color:#FFFFFF;
        }

文字色の設定とクラス名はそれぞれの好みで決めてください。

#FF0000;/*赤 k01*/
#FFFF00;/*黄 k02*/
#00FF00;/*黄緑 k03*/
#00FFFF;/*水色 k04*/
#FF0000;/*青 k05*/
#FF00FF;/*紫 k06*/
#FF8080;/*薄赤 k07*/
#FFFF80;/*薄黄 k08*/
#80FF80;/*薄黄緑 k09*/
#80FFFF;/*薄水色 k10*/
#8080FF;/*薄青 k11*/
#FF80FF;/*薄紫 k12*/

参照
CSSでマーカー(蛍光ペン)はいかが?
活用の例
id属性の意味



.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;/*薄紫*/
}

by vlsasaki2 | 2004-10-02 20:56 | CSSのトレーニング Top↑
<< エキサイトブログは情報の宝庫 CSSのトレーニング(11)・... >>