• ベストアンサー

行間隔を無くす方法

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

  • HTML
  • 回答数2
  • ありがとう数2

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

  • ベストアンサー
  • sight
  • ベストアンサー率53% (199/370)
回答No.1

P要素は段落を意味するブロック要素です。 ですから、当然行間があきます。 レイアウトのために、その場にふさわしくない意味を持った要素を使たマークアップをするのはおすすめできません。 この場合、onMouseoverなどのJavascript部分をAタグの中に入れてしまうか、または意味を持たないインライン要素であるSPANタグを使ってください。 <SPAN onMouseover=\"this.className=\'on\'\" onMouseout=\"this.className=\'off\'\">コメント</SPAN> とし、改行を入れたいならば行末に<BR>を入れればOKです。

budouaji
質問者

お礼

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

budouaji
質問者

補足

ごめんなさい。私かなり素人なので、もう少し教えてもらってもいいですか?「¥」の中にFONT-sizeなどをいれたらいいんですか?もしよかったらサンプルソースを教えてください。ずーずーしくてごめんなさい

その他の回答 (1)

  • ARC
  • ベストアンサー率46% (643/1383)
回答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>

budouaji
質問者

お礼

くわしーですね。うん・・・でも今の私には全てが理解できませんが、忙しい中本当にありがとうございました。何とか解決できました。ご協力ありがとうございました。うれしいです。

関連するQ&A

  • タグが閉じれないのですが...

    <FONT STYLE='FONT-SIZE:30PT'><FONT COLOR=#000000>文字</FONT> というタグ(全て半角で)を使いたいのですが、タグが閉じれません...。 ちゃんとサイズは大きくなるのですが、その後に書いた文字まで大きくなってしまいます; 誰か教えてください...!!

  • CSS、おかしいですか?

    CSSですが、本を見てやっています。 下記のように記述したのですが、書かなくてもよい記述とか、おかしいところ、ありますでしょうか? <style type=text/css> body{font-size:10pt} td {font-size:10pt; line-height:12pt} tr {font-size:10pt line-height:12pt} dive {font-size:10pt;line-height:12pt} a:link {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#990000} a:visited {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#990000} a:active {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#ff0099} a:hover {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#ff0099} </style>

    • 締切済み
    • CSS
  • CSSについて

    CSSについて質問させてください。 CSSをタグの中に直接書き込む場合 <div style="color:#ffa500; font-size:20pt; font-weight:bold; text-decoration:underline;"> このような場合のstyle="部分は、styleタグと呼んで いいのでしょうか? divタグの中に記述しているので、styleプロパティと 呼ぶのでしょうか? CSSのリファレンスにはstyleプロパティはありません。 ということは、やっぱりdivタグのstyleプロパティで CSSを指定していると考えるのでしょうか?

  • 2beeブログで行間と文字の間隔を指定したい

    みなさん、こんにちは。 私は2beeのブログを利用しているのですが、行間と文字の間隔をCSSで空けようとすると、改行がおかしくなってしまいます。ちなみに私のヘッダーに打ったタグは… <style type="text/css"> <!-- H1{font-size:10px; font-weight:lighter; line-height:18px; letter-spacing:4px;} H2{font-size:10px; font-weight:lighter; color:#555; line-height:18px; letter-spacing:4px;}--> </style> の2種類です。また、これを使わずに、ボディに <span style="font-size:10px; font-weight:lighter; line-height:18px; letter-spacing:4px;"><!--body--></span> と打っても、行間が揃わず、改行も上手くいきませんでした。 とても困っているので、いい方法がありましたら、ご回答おねがいします。

  • ビルダー 不要なタグの生成を止めたい

    Dreamweaverを使用してWEBサイトを作っています。 依頼人が更新作業をしているのですが 相手はホームページビルダーを使用しています。 CSSでいろいろ指示をしているテンプレートを作り、 テキスト部分を打ち変えるだけで更新できるようにしているのですが ビルダーでテキストを打つと不必要なタグがやたらと入ります。 たまにフォント指定がバラバラだったりして、明朝とゴシックが混じったような文章になってたりします。 これは相手の操作に問題があると思うのですが(^-^; ソース画面にして、テキスト部分に直接打ち込んで下さいとお願いしているのですが どうしても見やすさから、通常の作業場面(?)でテキストを打ってしまうようです。 「表示がおかしくなったから見てくれ」と頼まれ見ると すごい指定タグの量でびっくりします。 HTMLソースの自動整形やエラー修正のチェックを外したり、 その他いろいろ困る設定は外す事ができたのですが、 このフォントタグの細かな生成には参っています。 こんな感じです↓ <span lang=EN-US style='font-size:11.0pt;color:red'></span>○○テキスト部分○○<span lang=EN-US style='font-size:11.0pt;color:red'></span><BR> <span lang=EN-US style='font-size:11.0pt;color:red'></span>○○テキスト部分2○○<span lang=EN-US style='font-size:11.0pt;color:red'></span><BR> …不要な指示がなぜ入っているのでしょう?? また、文章が終わって何もない所に↓ <span lang=EN-US style='font-size:10.0pt'></span></p> <p class=MsoNormal><span style='font-size:10.0pt;font-family:"MS 明朝","serif"; mso-ascii-font-family:Century;mso-hansi-font-family:Century'></span></p> <span lang=EN-US style='font-size:10.0pt'></span><span lang=EN-US style='font-size:10.0pt'></span> …と、これがたくさん残っています。(なぜでしょう??) 改行タグの前の<SPAN lang=EN-US><o:p></o:p></SPAN>も困ります。 いろいろ書いてしまいましたが、設定でこれらのタグが入らないようにする方法はないでしょうか? また、相手の操作次第(ソース画面で直接打ち込む以外)でなおる方法はあるでしょうか? よろしくお願い致します。

  • HTMLの行と行の間隔のあけ方

    YAHOOオークションの出品時、簡単なHTMLを使って出品しています。 <html> <head> <title></title> </head> <body> <center> <font color="800080"size="2">・商品詳細・</font><br><br> <font color="ff69b4"size="2">ご覧頂きましてありがとうございます。<br> と、こんな感じです。 <font color="ff69b4"size="2">ご覧頂きましてありがとうございます。<br> の・・・・ありがとうございます。<br> 下に続く言葉の行と行の間隔がなくて読みにくいのです。 出来ればこのページで使われているくらい間隔を開けたいので どんな言葉をどこに入れればいいのか教えて下さい。 いろいろと調べていろんな言葉を入れてみたのですがうまくいきません。 <font color="ff69b4"size="2"style="line-height:数字">とか… よろしくお願します。

  • 段落の最初の1文字を大きくする

    段落の最初の1文字を大きくするためのスタイルシートですが、html の中に直接記述するなら、 <style type="text/css"><!-- p:first-letter { font-size:24pt; } --></style> なのですが、外部ファイル(.css)に記述する場合はどうすればいいのかわかりません。 p {first-letter: font-size: 24pt%;} としてみたのですが、指定どおり表示されません。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • フォントの種類や大きさを文字ごとに変えたいんですが

    <style type=text/css> <!-- body,td { font-size:文字の大きさ; color:#5E5BC4; font-family:'フォントの種類'; line-height:行間かなんか; --></STYLE> でページ全体の文字の大きさや種類を変えられるということがわかったのですが, これを,文字ごとに変えることはできないでしょうか? たとえば,「あいうえお」という分があれば,「あ」は大きさが6ptで「い」は9ptとか,「う」はフォントの種類が違うとかそんな感じにしたいんですが, できるんでしょうか? できるんなら教えてください。 あとフォントの種類のところに入るものはどんなものがあるんでしょうか? そういうのがのってるサイトなんかもおしえてくれると助かります。 よろしくおねがいします。

  • [html フォント複数指定]

    お伺いしたいのですが… HTML内でフォントを複数指定することはできますでしょうか? 下のもので、アルファベットと日本語の2つを指定したいのですが …それともいちいち<body>内で どちらかを指定しないといけないのでしょうか。 基本的な質問ですがよろしくお願いいたします。 <style type=text/css> <!-- body,td { font-size:文字サイズpt; color:#文字の色; font-family:'フォントの種類'; line-height:行間pt;} --></STYLE>

    • ベストアンサー
    • HTML
  • 外部スタイルシートについて・・・

    外部スタイルシートを書きたいのですが、 まだ良くわかってない点があるので教えてくださると嬉しいんですが・・・(TT) 今はHTMLのヘッダ内に書いております。 <style TYPE="text/css"> </style> Q1,上の部分は外部スタイルシートにすると、いらないのでしょうか? Q2,下の部分は外部スタイルシートにしてもスタイルシート内に、書く事ができますか?書くと不具合の原因になるのでしょうか? <!-- //忘れてしまうので、ここにコメント書きたいです。 できれば、スタイルシートを表示できない?ブラウザの人へ配慮したいと思うので、 <!-- は、あった方が自分が忘れなくていいかと思うのですが・・・。 Q3,ブラウザによって変になる、例えばとっても古いバージョンのネスケなどでも表示できるといいのですが 下記で問題あるのでしょうか? もし良かったら下の内容をこうした方がいいという アドバイスがあると嬉しいです。 質問の仕方が良くないかもしれませんが教えて下さい(TT) <style TYPE="text/css"> <!-- //忘れてしまうので、ここにコメント書きたいです。 a:link {font-size: 11pt; text-decoration:none; color:#C7A17E;} a:visited {font-size: 11pt; text-decoration:none; color:#C7A17E;} a:active {font-size: 11pt; text-decoration:none; color:#C7A17E;} a:hover {font-size: 11pt; text-decoration:underline; color:#FF9966;} td {font-size: 11pt;} span {font-size: 11pt;} BODY {font-size: 11pt; } LI {font-size: 11pt;} --> </style>

    • ベストアンサー
    • HTML