ライブチャットの天才
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2010.09.29 進行具合4
進行具合4 


好きなところのリンク文字色の変更について。



続きからどうぞ~


<body>よりも上でかつ、</head>の上にプログラミングする。

<style type="text/css">
<!--
.activity a:link {
color : #f60; /* 未閲覧のリンク色をオレンジ色に設定 */
}
.activity a:visited {
color : #00f; /* 閲覧済のリンク色を青色に設定 */
}
.activity a:hover {
color : #f00; /* マウスオーバー時のリンク色を赤色に設定 */
}
.activity a.active {
color : #f00; /* アクティブ時のリンク色を赤色に設定 */
}
-->
</style>


えっとこれはたぶんクラス記述なのかな?



.activity a:link {
color : #f60; /* 未閲覧のリンク色をオレンジ色に設定 */
}
.activity a:visited {
color : #00f; /* 閲覧済のリンク色を青色に設定 */
}
.activity a:hover {
color : #f00; /* マウスオーバー時のリンク色を赤色に設定 */
}
.activity a.active {
color : #f00; /* アクティブ時のリンク色を赤色に設定 */
}

4回ほどactivityと出てきますが、これはのちにリンク文字色変更の際
範囲を指定できるように
命令に名前を付けるって感じなのかな
なんでこの場所はアルファベットならぶっちゃけなんでもOKです


a:link→未閲覧のリンク
a:visited→閲覧済みのリンク
a:hover→マウスオーバー時(マウスのポインタを重ねること)のリンク
a.active→アクティブ時(ごめん、分からないやw ggrks^^)のリンク

順番は順不同ですが
a:hover、つまりマウスオーバー時のリンク文字の色変更を行いたい場合は

link→visited→hover→active

の順番で記述しなければなりません。

しなくてもいいけどズレるかも

保障はできませんw


あ、あと


/* アクティブ時のリンク色を赤色に設定 */

上記のように

/*半角スペース半角スペース*/

で囲まれたところに記述した文字は表示されず
編集時には見えるので

のちのち編集しやすくなりますね。


んで

次はリンク文字色変更をしたい範囲より上に

<div class="activity">

これを記述します

さきほど書いたように

"activity"

""で囲まれたところに先ほどの付けてあげた名前を入れます

そして範囲の終わりに

</div>

これを記述して完了です。




簡単に説明すると



<head>~</head>
の間にリンク文字の色変更の命令の記述と
その命令に名前を付ける記述をする

hoverを設定する場合の記述順番は

link→visited→hover→active

という風になります

例)
<head>
~~省略~~
<style type="text/css">
<!--
.ここは好きなアルファベットで名前を付ける a:link {
color : カラーコード; /* 未閲覧のリンク色をカラーコード色に設定 */
}
.同上 a:visited {
color : カラーコード; /* 閲覧済のリンク色をカラーコード色に設定 */
}
.同上 a:hover {
color : カラーコード; /* マウスオーバー時のリンク色をカラーコード色に設定 */
}
.同上 a.active {
color : カラーコード; /* アクティブ時のリンク色をカラーコード色に設定 */
}
-->
</style>
~~省略~~
</head>
<body>
↓↓↓↓
その他の記述(省略)



そして

<body>~</body>
の間でリンクの文字の色を変更したいところの前に

<div class="付けた名前">

こう記述します

そして変更したいところの終わりに
</div>

これを記述すれば完成です



例)
<head>
その他の記述(省略)
<style type="text/css">
<!--
.ここは好きなアルファベットで名前を付ける a:link {
color : カラーコード; /* 未閲覧のリンク色をカラーコード色に設定 */
}
.同上 a:visited {
color : カラーコード; /* 閲覧済のリンク色をカラーコード色に設定 */
}
.同上 a:hover {
color : カラーコード; /* マウスオーバー時のリンク色をカラーコード色に設定 */
}
.同上 a.active {
color : カラーコード; /* アクティブ時のリンク色をカラーコード色に設定 */
}
-->
</style>
~~省略~~
</head>
<body>
その他の記述(省略)

<div class="付けた名前">リンクの文字の色を変更したい箇所
(スクリプト内のリンクでも可能なのでスクリプトを囲んでもおk)</div>

その他の記述(省略)

</body>



これをもとに自分なりに変えていけば
好きなところのリンクの文字の色を変更できるよ!

一応言っておくけど
たぶん、<head>~<head>内に
命令を記述しておけば

<body>~<body>内の

どこでも、何回でも使用可能なはずです。


以上。


はぁ、やっと終わった。。

再度確認したこと
やっぱりプログラミングの道に進みたいなぁ・・・
だってめっちゃ面白いんだもんw
スポンサーサイト
Secret

TrackBackURL
→http://activityearth.blog5.fc2.com/tb.php/13-407f42ff
無利息

サルでもわかるFX

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