YUZU*CANDY / ゆずぶろ 日々気ままに、あひら ゆずの文と少しの絵。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサー広告| --/--/-- at --:--| コメント:-*ed 

CSSで説明文をポップアップ(改)

以前書いた「CSSで説明文をポップアップ」をIE6でも動くよう改良してみました

サンプル01/テキストの中で使用する場合

サンプル02/メニューとして使用する場合

以下、サンプルソース。
赤字の部分は書き換えてください。
必要であれば文字色や画像の設定なども自由に変更してください。


【CSSの内容】


/*ポップアップする際、マウスカーソルを合わせる方を「項目名」、*/
/*カーソルを合わせて出てきた文・画像をあわせて「説明文」として書いてあります。*/


/*------項目名の設定------*/

.popup dfn{
font-style:normal; /*この行を消すと文字が斜体になります*/
margin:0px;
}


.popup{
font-size:12px; /*フォントサイズ*/
line-height:18px;
background-color:#CCEEFF; /*背景色*/
}

.popup a{
color:#0099FF; /*項目名の文字色*/
text-decoration:none;/*下線等の装飾なし*/
margin:0px;
}

.popup img{
border:0px none; /*画像ボタンのボーダーを表示しない*/
}


/*------説明文の設定------*/


/*初期状態(非表示)*/
.popup dfn{
display:none;
}



/*マウスオーバー時(表示)*/

.popup a:hover{
display:inline;
}

.popup a:hover dfn{
font-size:12px;
line-height:18px;
display:block;
position:absolute;
margin-top:20px;
color:#999999; /*文字色*/
text-decoration:none; /*文字の装飾*/

border:1px solid #999999; /*説明文を囲む枠線の太さ・種類・色*/
background-color:#FFFFFF; /*背景色*/
width:250px; /*枠の幅*/
height:auto; /*枠の高さ・特に理由がなければautoのままで*/
padding:10px; /*枠内の余白*/
}

.popup a:hover dfn img{
margin-bottom:10px; /*画像の下に余白を入れる*/
}



/*説明文の見出し*/
.popup a:hover dfn span{
display:block;
border-bottom:1px dashed #CCCCCC; /*下線*/
margin-bottom:10px; /*見出しと本文の間の余白*/
color:#666666; /*見出しの文字色*/

/*ここからアイコンの設定・必要ない場合は削除 (末尾のカッコは消さないで下さい) */
background-image:url(アイコン画像のURL); /*アイコン画像のURL*/
background-repeat:no-repeat; /*アイコンの画像を繰り返し表示しない*/
background-position:top left; /*アイコンの表示位置・左上に表示*/
padding-left:20px; /*アイコン画像の幅+アイコンから見出し文字までの余白*/
line-height:20px; /*テキスト一行分の高さ・アイコン画像の高さと同じにする*/
}



【HTMLの内容】

例としてサンプル01を挙げてみます。(不要な部分は省略してあります)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>ウインドウのタイトル名</title>
<link href="スタイルシートのURL" rel="stylesheet" type="text/css">
</head>

<body>

<div class="popup">

<!--///説明文に見出しを使わない場合-->
ある
<a href="#01" name="01">
アヒル
<dfn>
カモとは仲間同士の鳥です。白くてふわふわ。
</dfn>
</a>
が男の子か女の子かを見分ける簡単な方法があります。<br>


<!--///説明文に見出しを使う場合-->

<a href="#02" name="02">
おしりの羽毛を見て、
<dfn>
<span>出典は…。</span>
この見分け方を知ったのはアフ○ックのwebサイトで。<br>
アヒル好きすぎてよく見てたから…
</dfn>
</a>
羽毛がくるっと丸まっていたら男の子、そうでないのが女の子です。

</div>


</body>
</html>


項目名を増やす場合は、

<a href="#02" name="02">

の部分を

<a href="#03" name="03">

<a href="#04" name="04">

のようにして、数字を増やしていくとよいです。

また数字ではなく、アルファベットで任意の名前を付けることもできます

対になった href="#●●"とname="●●"は必ず同じ数字(名前)を使い、複数の項目名で同じ数字(名前)は用いないで下さい。
web:CSS/HTML| 2008/04/02 at 03:03| コメント:0*ed 

Comment

Post a comment

管理者にだけ表示を許可する

profile

あひら ゆず
'84生まれ/♀/アヒル好き/
webデザイナーとかを経てお店で販売のおしごとに。

*mixi *pixiv *tinami *booklog *twitter

search

archive

Booklog

link

旧:ゆずぶろ
yuzu*photo (写真ブログ)
one’s opinion
らいむにかい
100円玉の対価
隠れ腐女子ズム
まとめのインテリア
73-シチサン-Blog
* まいにちトイデジ *
薫風茶屋
RosePonpon  

PR

FC2Ad

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