OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

行間隔を無くす方法

  • 暇なときにでも
  • 質問No.115739
  • 閲覧数157
  • ありがとう数2
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 56% (39/69)

こんにちは、ちょっと困ってるんですけど分かる方がいらっしゃったら教えて下さい。リンクしたところにマウスを置くと、文字の色と大きさが変わるって感じにしたくて、下記のようなタグを使用しました。するとコメントの次に行間をあけずにコメントを書きたくても、おそらく<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
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

質問者が選んだベストアンサー

  • 回答No.1
レベル11

ベストアンサー率 53% (199/370)

P要素は段落を意味するブロック要素です。
ですから、当然行間があきます。
レイアウトのために、その場にふさわしくない意味を持った要素を使たマークアップをするのはおすすめできません。

この場合、onMouseoverなどのJavascript部分をAタグの中に入れてしまうか、または意味を持たないインライン要素であるSPANタグを使ってください。
<SPAN onMouseover=\"this.className=\'on\'\" onMouseout=\"this.className=\'off\'\">コメント</SPAN>
とし、改行を入れたいならば行末に<BR>を入れればOKです。
補足コメント
budouaji

お礼率 56% (39/69)

ごめんなさい。私かなり素人なので、もう少し教えてもらってもいいですか?「¥」の中にFONT-sizeなどをいれたらいいんですか?もしよかったらサンプルソースを教えてください。ずーずーしくてごめんなさい
投稿日時 - 2001-08-08 14:50:49
お礼コメント
budouaji

お礼率 56% (39/69)

ごめんなさい。意味がわかりました。ようするに<P>のタブの変わりに、<SPAN>を使うってことですよね。そうするとちゃんと行間が思うようになりました。本当にありがとうございました。
投稿日時 - 2001-08-08 15:13:21
-PR-
-PR-

その他の回答 (全1件)

  • 回答No.2
レベル13

ベストアンサー率 46% (643/1383)

こんな感じでしょうか? <!doctype html public "-//W3C//DTD HTML 4.0//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; char ...続きを読む
こんな感じでしょうか?

<!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>
お礼コメント
budouaji

お礼率 56% (39/69)

くわしーですね。うん・・・でも今の私には全てが理解できませんが、忙しい中本当にありがとうございました。何とか解決できました。ご協力ありがとうございました。うれしいです。
投稿日時 - 2001-08-10 09:33:11
このQ&Aで解決しましたか?
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ