- ベストアンサー
行間隔を無くす方法
こんにちは、ちょっと困ってるんですけど分かる方がいらっしゃったら教えて下さい。リンクしたところにマウスを置くと、文字の色と大きさが変わるって感じにしたくて、下記のようなタグを使用しました。するとコメントの次に行間をあけずにコメントを書きたくても、おそらく<P>というタグを使用しているため、どうしても行間が空いてしまいます。しかし<P>を抜くとブラウザの中にタグが出てきてしまいました。こういう場合、どうすればいいんでしょうか。 ・HEAD部の記述 <STYLE TYPE=\"text/css\"> <!-- .on {color:red; font-size:14pt } .off {color:blue; font-size:11pt } --> </STYLE> ・BODY部の記述 <P onMouseover=\"this.className=\'on\'\" onMouseout=\"this.className=\'off\'\"> コメント </P>
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
P要素は段落を意味するブロック要素です。 ですから、当然行間があきます。 レイアウトのために、その場にふさわしくない意味を持った要素を使たマークアップをするのはおすすめできません。 この場合、onMouseoverなどのJavascript部分をAタグの中に入れてしまうか、または意味を持たないインライン要素であるSPANタグを使ってください。 <SPAN onMouseover=\"this.className=\'on\'\" onMouseout=\"this.className=\'off\'\">コメント</SPAN> とし、改行を入れたいならば行末に<BR>を入れればＯＫです。
その他の回答 (1)
- ARC
- ベストアンサー率46% (643/1383)
こんな感じでしょうか？ <!doctype html public "-//W3C//DTD HTML 4.0//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"/> <meta http-equiv="Content-Style-Type" content="text/css"/> <title>TEST</title> <style> <!-- .Lnk a:link { text-decoration:none; color:Blue; font-size:11pt} /*未訪問のリンク*/ .Lnk a:visited { text-decoration:none; color:Purple; font-size:11pt} /*訪問済*/ .Lnk a:active { text-decoration:none; color:Purple; font-size:11pt} /*訪問中*/ .Lnk a:hover { text-decoration:underline; color:Red; font-size:14pt} /*マウスで選択中のリンク*/ .Lnk {margin-top:0em; margin-bottom:0.2em; line-height:100%} /*上余白無し、下余白0.2字、行間1行*/ --> </style> </head> <body> <p class="Lnk"><a href="hoge.htm">ほげほげ</a></p> <p class="Lnk"><a href="moga.htm">もがもが</a></p> <p class="Lnk"><a href="fugo.htm">ふごふご</a></p> </body> </html>
お礼
くわしーですね。うん・・・でも今の私には全てが理解できませんが、忙しい中本当にありがとうございました。何とか解決できました。ご協力ありがとうございました。うれしいです。
お礼
ごめんなさい。意味がわかりました。ようするに<P>のタブの変わりに、<SPAN>を使うってことですよね。そうするとちゃんと行間が思うようになりました。本当にありがとうございました。
補足
ごめんなさい。私かなり素人なので、もう少し教えてもらってもいいですか？「￥」の中にFONT-sizeなどをいれたらいいんですか？もしよかったらサンプルソースを教えてください。ずーずーしくてごめんなさい