• ベストアンサー

ＣＳＳで文字間隔を指定すると<br>が反映されなくなる

<HTML> <HEAD> <TITLE>TAG index Webサイト</TITLE> </HEAD> <BODY> p{ letter-spacing: 2px; font-size:20px; font-family:'ＭＳ Ｐゴシック'; line-height:130%; } </BODY> </HTML> このようにすると、 <p><b>文章１。 <br><br> 文章２。 </b></p> の<br>が反映されなくなります。<br>を余分に入れると１行あきます。 <br>を余分に入れずにあけることはできるのでしょうか？

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

  • ベストアンサー
noname#20377
noname#20377
回答No.1

IEのバグです http://cssbug.at.infoseek.co.jp/detail/winie/b022.html

sybylla
質問者

お礼

試してみたら、無事にできました。バグなどがあるとは知りませんでした。どうも、ありがとうございました。m(_"_)m

その他の回答 (1)

noname#20371
noname#20371
回答No.2

<BR> が多数連続しています。 http://htmllint.itc.keio.ac.jp/htmllint/explain.html#continuous-brs <p>文章１。</p> <p>文章２。</p>

sybylla
質問者

お礼

ご回答のようにやってみたらできました。お教えいただいたサイトも今後の参考になります。ありがとうございました。(^^)

  1. カテゴリ
  2. インターネット・Webサービス
  3. その他（インターネット・Webサービス）

関連するQ&A

  • 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> の２種類です。また、これを使わずに、ボディに <span style="font-size:10px; font-weight:lighter; line-height:18px; letter-spacing:4px;"><!--body--></span> と打っても、行間が揃わず、改行も上手くいきませんでした。 とても困っているので、いい方法がありましたら、ご回答おねがいします。

  • CSSで文字サイズを指定するとWINでは固定なのに…

    CSSで文字サイズを指定するとWINでは固定なのに MACではブラウザで文字サイズを変えると サイズが変わってしまうのです。 MACでも固定する方法がわかりません。 教えてください。 ドリームウエヴァ－で作って 外部ファイルにしていて a { font-family: "ＭＳ Ｐゴシック", "Osaka"; font-size: 11px; text-decoration: none; } p { font-family: "ＭＳ Ｐゴシック", "Osaka"; font-size: 14px; line-height: 18px; text-decoration: none; color: #666666; letter-spacing: 1px; } です。 どこがおかしいのでしょうか？

    • ベストアンサー
    • HTML
  • HTML CSS で文字を点滅させたい

    HTMLにCSSを含める学習中です。 以下のようにHTMLを書き、edgeで表示してみましたが点滅してくれません。 どこが違うのか教えてもらえませんでしょうか。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html;charset=SHIFT_JIS"> <TITLE>テスト　ホームページ</TITLE> <style type="text/css"> p { color: orange; font-size: 20px; animation: blinkEffect 1s ease infinite; } </style> </HEAD> <BODY> □□□□□□□□□□□　<BR> <p class="p">この部分の文字を点滅</p> ■■■■■■■■■■■　<BR> <BR> <p>これは例文です。</p> <BR> </BODY> </HTML>

  • スタイルシートで指定した大きさにならない・・・

    スタイルシートにチャレンジしているのですが、 文字の大きさが指定したとおりになりません。 以下のようにした場合、 ＢＯＤＹの文字を１２ＰＸにしているのですが、 １４ＰＸの文字の方が大きく見えてしまいます。 ---------------------------------------------- <HTML> <HEAD> <TITLE>CCS勉強</TITLE> <STYLE type="text/css"> <!-- BODY{ font-size : 12pt; } .16 { font-size: 16px ; } /* 16 */ .14 { font-size: 14px ; } /* 14px */ .10 { font-size: 10px ; } /* 10px */ --> </STYLE> </HEAD> <BODY><SPAN class="16">16pxの文字</SPAN> <BR> <SPAN class="14">14pxの文字</SPAN><BR> <SPAN class="10">10pxの文字</SPAN> <P>ＢＯＤＹのもじ12px</P> </BODY> </HTML> ---------------------------------------------- 初心者なのでどこが間違っているのかよく分からず 困っていますので、ご存知の方がおられましたらよろしくお願いします。

  • ＣＳＳで指定してます。プラザーによっては文字の位置

    よろしくお願いします。 文字の大きさ、行間を指定しているのですが プラウザーによっては文字の位置が一行ほどずれてしまいます。 何か対策はないのでしょうか？ ＩＥは文字半角分左に、Chromeは一行上に、Operaは半角分右によってます。 ＣＳＳを自力で書き込むのは初めてで、サンプルブックを見ながらしてます。 書き方を間違えているのでしょうか。 ------------------------------------------- 【スタイルシート】 *{ margin:0; padding:0; } #boxA{ background : none 0% 0% / auto auto repeat scroll padding-box border-box #ffffff; } #boxB{ background:#ffffff; } #boxE{ background : none 0% 0% / auto auto repeat scroll padding-box border-box #ffffff; } body{ text-align:center; } #container{ width:892px; margin-left:auto; margin-right:auto; text-align:left; } h1{ font-size : 11.5px; color:#333333; font-weight : 500; text-indent:0px; letter-spacing : -0.1em; } .text1{ font-size : 11.5px; letter-spacing : -0.1em; } .text2{ font-size : 70%; } .text3{ font-size : 85%; line-height : 1.3em; } #boxA{ width : 892px; } #boxA2{ width : 708px; margin-top : 10px; margin-left : 90px; background-image : url(../img/top_img.jpg); height : 328px; } #boxA3{ width : 708px; margin-top : 10px; background-image : url(../img/porishi.jpg); background-repeat : no-repeat; background-position : 50% 50%; margin-left : 90px; height : 130px; } #boxE{ width:100%; clear:left; } #boxB{ width : 892px; float : none; } #boxB2{ margin-top : 10px; margin-left : 100px; width : 708px; } ------------------------------------------- 【webページ】 </head> <body background="img/bgcolor.png"> <div id="container"> <div id="boxA"> <br /> <div id="boxA2" class="text1"> <br /> <br /> <br /> <br /> <a href="http://www.wakayama2015.jp/" target="_blank"><img src="img/top_kokutai.png" width="106" height="276" border="0" align="left" alt="2015年紀の国わかやま国体　わかやま大会" /></a><br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <h1>　　　　　　　　　　暮らしに欠かせない食・住・遊に関する事業を展開する丸長グループ。 </h1> 　　　　　　　　　 　日々の生活が安心・快適で、そして豊かであってほしい…<br /> 　　　　　　　　　　その想いがグループ企業の分野を超えたノウハウの共有につながり、<br /> 　　　　　　　　　　さらなるサービスの向上へと結びついているのです。<br /> 　　　　　　　　　　これからも郷土和歌山県を拠点に県内外に事業フィールドの拡大に<br /> 　　　　　　　　　　邁進してまいります。<br /> </div> <div id="boxB" style="text-align : center;" align="center"> <div id="boxB2"> <img src="img/top_mainimg.png" width="703" height="815" border="0" /> </div> </div> <div id="boxE" style="text-align : center;" align="center"> <p style="text-align : center;" align="center" class="text2"><br /> <font color="#000000">Copyright (C) 2000 MARUCHO GROUP Corporation. All Rights Reserved.</font></p> </div> </div> </div> </body> </html> 【webテスト】 http://www.dream-web.jp/test/maru/ サンプルブック見れば見るほど解らなくなってしまって困ってます。 助力よろしくお願いします。

    • 締切済み
    • CSS
  • ブログのレイアウトについて

    シンプルなブログを借り、日付やコメント欄を消して 1枚サイトのように見えるものを作っています。 画像を見ると質問内容が一目で分かるようになっているのでご照覧の上、 どこに何を書き加えれば希望レイアウトになるのか教えてください。 cssは初心者なので可能な限り丁寧にお願いします。 ※600px画像は縮小しない 現在css編集を開くと以下のようになっています。 ＦＣ2ブログの共有テンプレートのひとつです。 <STYLE TYPE="text/css"> <!-- body{ color: #4F0000; font-family: 'Verdana','ＭＳ Ｐゴシック'; font-size: 11px; line-height: 140%; margin:20px; } a{ color: #4F0000; text-decoration: underline; } A:hover{ color: #4F0000; text-decoration: none; } td{ color: #4F0000; font-family: 'Verdana','ＭＳ Ｐゴシック'; font-size: 10px; line-height: 140%; letter-spacing: 0; } .box{ color: #4F0000; font-family: 'Verdana','ＭＳ Ｐゴシック'; font-size: 11px; letter-spacing: 0; line-height: 120%; } .msg img{ border:0px; margin:0px 0px 0px 0px; display:inline; float:none; } .title{ font-family: 'Verdana','ＭＳ Ｐゴシック'; letter-spacing: 10px; font-size: 10px; line-height: 180%; } .small{ font-size: 8px; font-family: 'Verdana','ＭＳ Ｐゴシック'; } .r{ font-size: 10px; } --> body { background-image : url("背景画像.jpg"); background-repeat : repeat; background-position : 50% 50%; background-attachment : fixed; } img { vertical-align: baseline; } </STYLE> どう調べても希望通りにならないので何卒お願い致します！

    • 締切済み
    • CSS
  • 外部CSSと　HEAD内のCSSの違い

    現在、macで Dreamweaver8を使用してHPを作っています。 外部のcssがうまく反映されません。 そこで、head内に同じcssを入れたところ、きちんと反映されました。 どうして違いがでるのか教えてください。 『head内に入れた時』 <!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> <style type="text/css"> body { font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; font-weight: normal; background-position: center; padding: 0px; margin: 0px; } #page { background-color: #009900; height: 800px; width: 760px; margin-right: auto; margin-left: auto; position: relative; top: 0px; } #title { background-color: #CCFF00; height: 120px; width: 700px; position: relative; left: 0px; top: 0px; margin-right: 15px; margin-left: 15px; padding-right: 15px; padding-left: 15px; } </style> </head> <body> <div id="page"> <div id="title"> </div> </div> </body> </html> 『外部cssの時』 [styel.cssは] body { font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; font-weight: normal; background-position: center; padding: 0px; margin: 0px; } #page { background-color: #009900; height: 800px; width: 760px; margin-right: auto; margin-left: auto; position: relative; top: 0px; } #title { background-color: #CCFF00; height: 120px; width: 700px; position: relative; left: 0px; top: 0px; margin-right: 15px; margin-left: 15px; padding-right: 15px; padding-left: 15px; } [反映されるhtmlは] <!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="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="page"> <div id="title"> </div> </div> </body> </html> です。 誰かお答えくださいませ。

    • ベストアンサー
    • Mac
  • CSSでの背景色の指定について

    以下のソースで右下に空白ができます。 それはいいのですが、背景色を指定がうまく行きません。 heightは動的に変わるので、idやclassを増やさずに実現したいと考えています。 IEでは実現できてきますが、Firefoxではダメでした。 よい方法はないでしょうか？ ■test.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <link href="css/test.css" rel="stylesheet" type="text/css" /> <title>test</title> </head> <body> <div id="wrap"> <div id="left"> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> </div> <div id="right"> ああああ<br /> ああああ<br /> ああああ<br /> ああああ<br /> </div> </div> </body> </html> ■test.css body { margin-top: 20px; margin-left: 70px; margin-bottom: 0px; padding: 0px; line-height: 1.4em; font-size: 12px; font-weight: normal; color: #333333; } #wrap { width: 690px; background-color: #000000; } #left { margin: 0px; padding: 0px; width: 510px; height: 100%; float: left; background-color: #ffff00; } #right { margin: 0px; padding: 0px; width: 180px; float: right; background-color: #ff00ff; }

    • ベストアンサー
    • CSS
  • 外部CSS使用で異なる大きさの文字を使いたい

    はじめまして。 素材サイトからDLしたテンプレートなのですが、外部CSSにより文字の大きさが固定されており、個別に大きさを変えたいのですが変更できずに困っています。 CSS初心者で、ソースを見てもいまいちわかりません。 どこを変更すればよいかお教え願えないでしょうか。 変更したいページのソースはこちらになります。 <body id="main"> 更新日<br> <h3>テキスト</h3> <ul class="submenu01"> <li><a href="text.html" target="right">TITLE01</a> </ul> <h3>テキスト2</h3> <ul class="submenu02"> <li>TITLE02 <li><a href="text.html" target="right">1</a> </ul> </body> TITLE01、02の下に小さく説明文を入れたいのですが、文字の大きさを変えることができません。更新日、という文字も小さくしたいのです。 外部CSSのソースはこちらです。 body { height:100%; font-size : 90%; line-height : 180%; color : #666666; text-align : center; background-color :#ffffff ; font-family : Verdana, Chicago, osaka, sans-serif, "ＭＳ Ｐゴシック"; } img { border : 0; } br { letter-spacing : normal; } a { color : #666666; text-decoration : none; } a:hover { color : #000000; } h3 { font-size : 150%; color : #000000; padding: 10px 0 0 0; } /* メイン */ body#main { width : 200px; text-align : left; background-color :#FDDED9; margin: 0 10px 0 20px; } #main ul{ padding: 10px 0 0 0; } /* テキストページ*/ ul.submenu02 li{ display: inline; padding : 0 3px 0 0; } bodyタグのサイズを変更すると全体が変更されてしまうし、いっそ小さくした文字を<h4>のようなものを新しく書き足して囲ってみたのですが反映されません。 どうぞよろしくお願いします。

    • ベストアンサー
    • HTML
  • ＨＴＭＬの行と行の間隔のあけ方

    YAHOOオークションの出品時、簡単なＨＴＭＬを使って出品しています。 <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:数字">とか… よろしくお願します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する