![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
こんにちは、ちょっと困ってるんですけど分かる方がいらっしゃったら教えて下さい。リンクしたところにマウスを置くと、文字の色と大きさが変わるって感じにしたくて、下記のようなタグを使用しました。するとコメントの次に行間をあけずにコメントを書きたくても、おそらく<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>
No.1ベストアンサー
- 回答日時:
P要素は段落を意味するブロック要素です。
ですから、当然行間があきます。
レイアウトのために、その場にふさわしくない意味を持った要素を使たマークアップをするのはおすすめできません。
この場合、onMouseoverなどのJavascript部分をAタグの中に入れてしまうか、または意味を持たないインライン要素であるSPANタグを使ってください。
<SPAN onMouseover=\"this.className=\'on\'\" onMouseout=\"this.className=\'off\'\">コメント</SPAN>
とし、改行を入れたいならば行末に<BR>を入れればOKです。
この回答への補足
ごめんなさい。私かなり素人なので、もう少し教えてもらってもいいですか?「¥」の中にFONT-sizeなどをいれたらいいんですか?もしよかったらサンプルソースを教えてください。ずーずーしくてごめんなさい
補足日時:2001/08/08 14:50ごめんなさい。意味がわかりました。ようするに<P>のタブの変わりに、<SPAN>を使うってことですよね。そうするとちゃんと行間が思うようになりました。本当にありがとうございました。
No.2
- 回答日時:
こんな感じでしょうか?
<!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>
くわしーですね。うん・・・でも今の私には全てが理解できませんが、忙しい中本当にありがとうございました。何とか解決できました。ご協力ありがとうございました。うれしいです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS HTMLで特定の文字だけ色を変えたいのですが、指定した色と違う色が反映してしまいます。 下記、「前」 5 2023/06/27 12:08
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- CGI perlで書いたcgiでsqliteの使い方を教えてください 2 2023/05/08 21:29
- PHP htmlspecialcharsが機能していないです。 バグですか? 1 2022/04/05 01:22
- Excel(エクセル) PHPプログラムをエクセルに張り付けると検索ボックスがでてくる! 3 2022/05/08 07:10
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- PHP ここでの ②if($su_d<>"")の比較演算子 を使う理由は 1 2022/03/26 02:33
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
IE8でhタグの行間が詰まること...
-
Excel VBA メール作成について ...
-
全角半角含めて等幅で表示したい
-
指定の文字だけ色を変える
-
特定の文字のみcssを適用するに...
-
リンク文字
-
SMILのReal textでの文字化け
-
正規表現
-
h1タグのパンくずリストへの設置
-
CSSを一部無効にしたい
-
フォントカラー指定
-
文字の位置、上下のマージンが...
-
セレクトボックス内の文字の文...
-
TD内で日本語を単語単位で扱いたい
-
cssで指定するfontサイズについ...
-
(スタイルシート)文字サイズ...
-
ブラウザによって異なるフォン...
-
FC2ブログの改行幅の質問です。
-
CSS2.1とCSS3の違いを教えて下...
-
<input type="file"> の幅
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストの前後の行間をなくす方...
-
特定の文字のみcssを適用するに...
-
リンク文字
-
文字の位置、上下のマージンが...
-
Format 関数 表示書式指定文字...
-
テキストファイルの行を指定し...
-
API Sleep関数について
-
テキストエリア内の文字の装飾
-
CSSを一部無効にしたい
-
fontサイズ指定の ”-(マイナ...
-
ホームページビルダー作成HPがi...
-
全角半角含めて等幅で表示したい
-
CSSについて教えてください。 ...
-
<input type="file"> の幅
-
background-color: #ddd;の意味...
-
上付き文字と下付き文字を同時...
-
h1タグのパンくずリストへの設置
-
Excel VBA メール作成について ...
-
Excel VBA メール作成について ...
-
指定の文字だけ色を変える
おすすめ情報