- ベストアンサー
CSS:span 改行させるには？
こんにちは。 以下のようなHTMLがあります。 HTMLは自動生成のため編集不可なのですが、スタイルシートのみ編集可能です。 <span class="price">4,500円 </span><span class="price2">税込、送料別</span> 現在はそれぞれ、スタイルシートに フォントカラーサイズ程度が与えられているだけなので 4,500円 税込、送料別 と表示されています。 これを価格のあとで改行させて 4,500円 税込、送料別 と表示にさせることはできないでしょうか。 よろしくお願いいたします。
- sgmsgm
- お礼率69% (32/46)
- その他([技術者向] コンピューター)
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
spanはインラインエレメントですから改行しないのは当たり前です。 <br />使えないのなら… CSSでブロックにするといいですよ。 span{ display:block; } これだと確実に改行されます。
関連するQ&A
- 置換の正規表現
Win版Golive6を使用しています。 正規表現については初心者なのですが、 検索/置換で、$1がうまく使えず困っています。 具体的には <span class="price">￥2,100（税込・送料無料）</span> というタグの中から（税込み・送料無料）という表記だけを 消したいのです。ちなみに数字部分はそれぞれ異なります。 そこで、自分なりに、色々と試し最終的に以下のような 方法に行き着きました。 ▼検索 <span class="price">(.+)（税込み・送料無料）</span> ▼置換 <span class="price">$1</span> これで、検索はうまくいくのですが、$1という記号部分が 希望の数字ではなく記号そのままに表示されてしまいます。 ちなみに、 ・対象のページは数千ページあり、手作業では不可能です。 ・class="price"以外の場合は置換されると困ります。 ・￥（税込み・送料無料）は全角です。 何か間違えているのでしょうか？それともGoliveでは $1が使用できないのでしょうか。できればGoliveだけで できると助かりますが、他のソフトでもかまいません。 どうかよろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- <li>の横並びで、<span>のところで改行
<li>をfloatで横並びにした場合、IE7のみ、<span>のところで改行されてしまい、最後の部分だけ以下のようになります。 ddd ( xx x ) IE8やそれ以外のブラウザは<li>のところで改行され、以下のようになります。 aaa ( xxx ) bbb ( xxx ) ccc( xxx ) ddd ( xxx ) どのようにすれば、IE7も<li>のところで改行され他と同じようになりますか。 実際にはaaa,bbb,xxxの文字などはもっと長いものでたまたま画面右端ぎりぎりにdddまで表示され</span>が区切りになって( xxx )の部分がddd下部に縦に3段くらいで表示されます。 IE8や、他のブラウザは、ddd ( xxx ) がセットで画面に収まらないので、<li>でおりかえされており、このようになってほしいのですが。 よろしくお願い致します。 <ul class="list"> <li><a href="a.html"><span style="color: #cccc99">aaa</span> ( xxx )</a></li> <li><a href="b.html"><span style="color: #cccc99">bbb</span> ( xxx )</a></li> <li><a href="c.html"><span style="color: #cccc99">ccc</span> ( xxx )</a></li> <li><a href="d.html"><span style="color: #cccc99">ddd</span> ( xxx )</a></li> </ul><div style="clear: left;"></div> ul.list{ list-style:none; width:100%; margin: 0 0 .8em 0; padding: 0; } ul.list li { float:left; display: inline; margin-right:.7em; }
- ベストアンサー
- HTML
- span要素にのみwhite-space: nowrapを指定したい
CSSによる改行指定が思う様にできなくて困っています。 幅400pxのボックスの中で、<span>～</span>の間では改行せず、</span>と<span>の間で自動改行するようにしたいと考えています。 スタイルシートに div{width:400px;} span{white-space: nowrap;} HTMLに <div> <span>type1</span><span>type2</span><span>type3</span>... </div> のように表記したのですが、実際にはdivで指定した幅を無視してどこまでも改行なしで表示されてしまいます。 どのように指定すれば目指している形にできるでしょうか？
- ベストアンサー
- HTML
- 初めてCSSをデザインに取り入れたらレイアウトが崩れてしまいました・・。
dreamweaverMX2004を使用しているホームページ作成初心者です。 スクロールバーが付いているテキストボックス（更新画面用）の下に文字なり画像なりを入れると、なぜかだいぶん間が空いて表示されてしまいます。テキストボックスの高さを400くらいの大きな数字を指定すると間はなくなるのですが、どうしても高さ200～250くらいに指定したいんです…。 参考になるかも知れないので、コードを貼り付けておきます。 以前、教えてgooで同じような質問があって、そのときにどなたかが、 http://cssbug.at.infoseek.co.jp/detail/winie/b053.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> <style type="text/css"> <!-- .style1 { color: #000000; font-size: 12px; } .style2 {font-size: 12px} .style4 {color: #000099; font-weight: bold; } --> </style> </head> <body> <style type="text/css"><!-- html, body { scrollbar-base-color: #D5D0F7; } --></style> <table width="800" border="0" cellpadding="0" cellspacing="0"> <!--DWLayoutTable--> <tr> <td width="279" height="357"> </td> <td colspan="2" valign="top"><style type="text/css"> <!-- .memo { width: 470px; height: 220px; overflow: auto; } --> </style> <div class="memo style1"> <p align="left" class="style1 style2"> </p> <p align="left"><span class="style4">2008年1月4日更新</span><br> あけましておめでとうございます。<br> </p> <p align="left" class="style1 style2"> </p> <p align="left" class="style1 style2"> </p> <p align="left" class="style1 style2"> </p> <p align="left" class="style1 style2"> </p> <p align="left" class="style1 style2"> </p> <p align="left" class="style1 style2"> </p> <p align="left" class="style1 style2"> </p> <p align="left" class="style1 style2"> </p> <p align="left" class="style1 style2">あけましておめでとうございます。<br> </p> </div></td> </tr> <tr> <td height="43"></td> <td width="248" valign="top">pppp</td> <td width="273"> </td> </tr> </table> <br> </body> </html>
- ベストアンサー
- その他([技術者向] コンピューター)
- CSSで見出し（タイトル）行の右端に日付を表示させる正しい方法は？
みなさま初めまして。OKWebコミュニティに初めて登録したMxanaduと申します。 CSSを用いて、見出し（タイトル）行の右端に日付を表示させようと思い、以下のような設定をしています。 [スタイルシートの定義] <STYLE TYPE="TEXT/CSS"> <!-- H4 { PADDING: 5PX; WIDTH: 99%; COLOR: #FFFFFF; BACKGROUND-COLOR: #008080 } SPAN.DATE { FLOAT: RIGHT } --> </STYLE> [HTMLドキュメントへの適用例] <H4>タイトル<SPAN CLASS=DATE> Mon, Aug 8, 2005</SPAN></H4> この方法で、Safari 1.3 (v312)（Mac OS X(10.3.9)付属）とiCab 3.0 Beta 337では意図した通り表示できます。 しかし、IE 5.2.3 (5815.1)（Mac OS X版）では見出しタイトルと日付の行がつぶれてしまいます。（<SPAN></SPAN>を外すとつぶれなくなりますが、日付を右端に表示できません） また、Mozilla系のNetscape 7.1、Mozilla 1.7.11、FireFox 1.0.6J、Camino 0.7JおよびCamino 0.8.4（全てMac OS X版）では見出しタイトル行で日付が改行され、paddingの中に埋もれてしまいます。 Windowsのブラウザでどうなるかは、Windowsマシンを持っていないので分かりません。 意図した表示ができるブラウザが限られてしまうのは、私のCSSの使い方に間違いがあるのでしょうか？ それとも、意図した表示ができないブラウザのCSS実装に問題があるのでしょうか？ 私のCSSの使い方に間違いがある場合は、正しい方法を教えて戴ければと思います。 以上よろしくお願い致します。<(_ _)>
- ベストアンサー
- CSS
- span 前後に半角の空白が入るのですが
1<span class="test">2</span>3 とすると、2の前後に半角の空白が入るのですが、 これを入らないようにする方法はありますか？ スタイルシートは、 span.test{ color: red; } としています。
- ベストアンサー
- CSS
- CSSでのフォントサイズ指定におけるジレンマ
以下の例文では、 * {font-size: 10pt;} があるゆえに、赤太字で示された .ddd {color: #ff0000;font-weight: bold;} のフォントサイズがばらばらになってしまいます。 各所の指定フォントサイズを遵守させ、かつ赤太字を有効化するにはどのようにればよいでしょうか。 * {font-size: 10pt;}は事情あってやめられません。 「.ddd」に、font-size: middleを入れたりしてもだめでした。 !importantとか、何か簡単な「おまじない」の追記で解決できるといいのですが。 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css"> <!-- * { font-size: 10pt; } dd { font-size: x-small; } dt { margin-left: 30px; } .eee { border: 1px solid #000; font-size: small; } .ccc { font-size: xx-large; } .aaa { font-size: medium; } .bbb { font-size: small; } .ddd { color: #ff0000; font-weight: bold; } --> </style> </head> <body> <h2> <a href="./a.htm" style="font-size: large;">2014年の<span class="ddd">雪</span>景色</a></h2> <a href="./index.php" class="eee"><span class="ddd">雪</span>下くんの感想</a> 1月には何度も降雪、周りは<span class="ddd">雪</span>、<span class="ddd">雪</span>、<span class="ddd">雪</span>… <dl> <dt class="Tab"><span class="ccc">首都圏では不慣れな<span class="ddd">雪</span>かきなどに追われた</span></dt> <dt><span class="aaa"><span class="ddd">雪</span>下大介</span> <span class="bbb">大阪府立降<span class="ddd">雪</span>下小学校3年</span></dt> <dd>大阪ではひさしぶりに<span class="ddd">雪</span>が降りました。この時期での降<span class="ddd">雪</span>は珍しい。</dd> </dl> </body> </html>
- ベストアンサー
- CSS
- HTMLとCSSを駆使して棒グラフを作る際にラベルを表示させたい
下記のHTMLで、ラベル（30～60の数値）を赤棒の上に表示する書き方をご教示下さい。 Excelグラフで、棒グラフに数値を表示させるようなイメージです。 なお、IE6だけで動作すれば十分です。 <html> <head> <style type="text/css"> .1 {vertical-align: bottom;} .2 {background-color: red;width: 20px; writing-mode:tb-rl;} </style> </head> <body> <table border="0"> <tr> <td class="1"><span class="2" style="height:30px;"></span><span class="3">30</span></td> <td class="1"><span class="2" style="height:40px;"></span><span class="3">40</span></td> <td class="1"><span class="2" style="height:50px;"></span><span class="3">50</span></td> <td class="1"><span class="2" style="height:60px;"></span><span class="3">60</span></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- <SPAN>で文字を右揃えにしたいのですが...(＾-＾；
こんばんは。私は今HPを作っています。 それで質問なんですけど、 HTMLで<SPAN>ってタグありますよね？ それにCSSを使って(? <SPAN>で囲まれた場所を 文字を右揃えに表示させたいのですが、何故かうまくいきません。 <SPAN style="text-align: right">○○</SPAN> このようなタグで使いました(上) 何故なのでしょう、教えてください。 よろしくお願いします。 ちなみに、このようなものをつくりたいのです。(下) リンク集なんですけど； HPタイトル 管理者名 ――――――――――――――― バナー ――――――――――――――― このHPの説明 これの管理者名のところを右揃えに表示したいのだが、 うまくいかないのです；<DIV>だと改行されてしまうし...
- ベストアンサー
- HTML
- 次のhtml・cssでspan内の文字を点滅させる
次のhtml・cssでspan内の文字を点滅させるには、どのようにしたらよいのでしょうか。 但し、テスト1が表示されている間は、テスト2と3は消えており、 テスト2、3が表示されている間はテスト1が消えている状態にしたいです。 なぜか、反復の意味を持つdurationタグの後ろに連結して、duration:blinkはできませんでした。 <div class="test"> <span class="brinking1">テスト1</span> <span class="brinking2">テスト2</span> <span class="brinking3">テスト3</span> </div> <style> .test { margin: auto; background-color: white; position: relative; } .test blinking { width: 50%; animation-name: test; -webkit-animation-name: test; animation-duration:blink 10s; -webkit-animation-duration: 10s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; opacity: 0;} .test .brinking1 { display: block; margin: 0 auto; } .test .brinking2,.test .brinking3 { animation-delay:5s; -webkit-animation-delay:5s; position: absolute; top: 0; left: 25%; } @keyframes test { 0% { opacity: 0; } 50% { opacity: 1; } } @-webkit-keyframes test { 0% { opacity: 0; } 50% { opacity: 1; } } </style>
- 締切済み
- CSS
お礼
こんにちは、どうもありがとうございます。 改行できるようになりました。 見よう見真似でまだまだ知らないスタイルがあるので大変助かりました。ありがとうございました。