aqua+Css このページをアンテナに追加 RSSフィード

2005-07-23 Up Dateリンクにアクションを付ける

[]ダイナミック擬似クラス 14:34 ダイナミック擬似クラス - aqua+Css を含むブックマーク はてなブックマーク - ダイナミック擬似クラス - aqua+Css ダイナミック擬似クラス - aqua+Css のブックマークコメント

0002_list

a要素のヒット範囲を広げて、ダイナミック擬似クラスカーソルがロールオーバーした時のアクションを付けています。

やりかた

まず、a要素に対してCSSでdisplay:block:を指定して、インライン要素からブロック要素に変更してやります。

そして、widthやpaddingプロパティで、ブロック要素になったa要素のサイズを大きくしてやれば、その分ヒット範囲が広がります。

HTML Source

<dl class="rollover">
<dt>ダイナミック疑似クラスあり</dt>
<dd><a href="http://d.hatena.ne.jp/aquatail/">aqua+Log</a></dd>
<dd><a href="http://flash.g.hatena.ne.jp/aquatail/">aqua+Flash</a></dd>
</dl>

CSS Source

dl
{dl.rollover dd a
{
display: block;
width: 150;
padding: 4;
}

そしてダイナミック疑似クラスを下記の順で指定して、そのときの状態に応じてa要素の見た目を変化させています。

  1. link(まだ見ていないリンク)
  2. visited(すでに見たリンク)
  3. hover(マウスカーソルが上に重なっているリンク)
  4. active(押された状態のリンク)

CSS Source

/*まだ見ていないリンク*/
dl.rollover dd a:link
{
color: #2202ff;
border: 1px #4e64e0 dashed;
}
/*すでに見たリンク*/
dl.rollover dd a:visited
{
color: black;
border: 1px #d0caff dashed;
}
/*マウスカーソルが上に重なっているリンク*/
dl.rollover dd a:hover
{
color: blue;
background-color: #c6fec2;
border: 1px #4e64e0 solid;
}
/*押された状態のリンク*/
dl.rollover dd a:active
{
background-color: #c9c1ff;
border: 1px #4e64e0 solid;
}
補足aの親要素にliがある場合

a:hover時にbackgrandcolorを変えると、リストマーカーが消えてしまいます。

そこでa要素の背景にbackgrandimageでマーカー画像を設定してやります。

そうすれば、a要素のマーカー画像の下に backgrandcolorが表示されます。

MaggieMaggie2012/08/14 12:29It's great to read something that's both enjoyable and provides pragmatisdc soluitnos.

lcdjeodalcdjeoda2012/08/14 23:30TqJsb3 <a href="http://fevcpqslervb.com/">fevcpqslervb</a>

vaqwlpjyvaqwlpjy2012/08/16 19:03QRlgQb , [url=http://qtecpgccuxkm.com/]qtecpgccuxkm[/url], [link=http://yltvlzpczzke.com/]yltvlzpczzke[/link], http://moytjszxbfqz.com/

トラックバック - http://css.g.hatena.ne.jp/aquatail/20050723

2005-07-12 Up Date(h2) Test Diary

[] (a.sectioncategory) (h3) Test Diary (span.timestamp) (a img.icon) 00:13   (a.sectioncategory)  (h3)  Test Diary  (span.timestamp) (a img.icon) - aqua+Css を含むブックマーク はてなブックマーク -   (a.sectioncategory)  (h3)  Test Diary  (span.timestamp) (a img.icon) - aqua+Css   (a.sectioncategory)  (h3)  Test Diary  (span.timestamp) (a img.icon) - aqua+Css のブックマークコメント

0006_testdiary

(p)CSSの効き具合を見るためのテストダイアリーです。

(p)ちなみに、このテストダイアリーを書くにあたって、(a)はてなダイアリーのヘルプを大変参考にさせていただいております。

(p)文頭に付いている(p)(span.timestamp)等、全角括弧に囲われている部分は、class/id名や対応要素になります。

(p)チェックする際の参考にしてください。

(h4)この記事のおすすめの使い方

(p)この記事でCSSテストする際は、FireFoxブラウザの拡張機能でEditCSSとゆうのがあるので、それを使うと便利かと思います。

(ul)(li)(a)

(p)EditCSSとは対象のHTMLCSSだけをブラウザサイドバーに抜き出す拡張機能で、抜き出されたCSSをそのまま書き換えればそのプロパティリアルタイムHTMLに反映されるとゆうものです。

(p)うん、便利だ。

(h4)リスト関係を連ねてみる

(font)リスト

(ul)(li)

(font)ナンバリングリスト

ol)(li)

  1. アリ
    1. 皆で掘る
  2. オケ
    1. 一人で掘る
  3. ウミガメ
    1. 愛で掘る
  4. 一歩
    1. 二歩
      1. 三歩

(font)データリスト

dl)(dt)(dd

脂肪
主に脇腹に寄生する。走るとユレル。ちなみに、走り続けると寄生する力が弱くなる。
足の小指
箪笥にぶつけると、とても痛い。柔道で足払いを掛ける際に、まれに骨折する人がいる。ポキッと。小指を鍛えるにはやっぱり箪笥にブチ当てるのが一番。
トラックバック - http://css.g.hatena.ne.jp/aquatail/20050712