ついに夏本番!さぁ、家族でキャンプに行くぞ! >>

こんにちは。
以下のようなHTMLがあります。
HTMLは自動生成のため編集不可なのですが、スタイルシートのみ編集可能です。

<span class="price">4,500円
</span><span class="price2">税込、送料別</span>

現在はそれぞれ、スタイルシートに
フォントカラーサイズ程度が与えられているだけなので

4,500円 税込、送料別

と表示されています。

これを価格のあとで改行させて

4,500円
税込、送料別

と表示にさせることはできないでしょうか。
よろしくお願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

spanはインラインエレメントですから改行しないのは当たり前です。


<br />使えないのなら…

CSSでブロックにするといいですよ。

span{
display:block;
}

これだと確実に改行されます。
    • good
    • 0
この回答へのお礼

こんにちは、どうもありがとうございます。
改行できるようになりました。
見よう見真似でまだまだ知らないスタイルがあるので大変助かりました。ありがとうございました。

お礼日時:2009/05/18 11:22

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qの中では折り返さないにするには

どうしたらいいのでしょうか?



<table><tr><td>
<span><input type="checkbox" name="goo[]" value="aaaa "/>aaaa</span>
<span><input type="checkbox" name="goo[]"
・・・・・・・・・・・・・・・・
<span><input type="checkbox" name="goo[]" value="zzzz "/>zzzz</span>
</td></tr></table>

において
<td>~</td>
の内部のデータは折り返されますが
折り返す際に<span>~</span>の途中では折り返されないようにするにはどうしたらいいのでしょう?

Aベストアンサー

実際に実験していないのでうまくいくかは判りませんが
CSS2にwhite-spaceプロパティというものがあるようです

http://hp.vector.co.jp/authors/VA022006/css/text.html#white-space

#ただ検索の途中で
http://cssbug.at.infoseek.co.jp/detail/winie/b047.html
なんてものを見つけたり(汗

Qで文字を右揃えにしたいのですが...(^-^;

こんばんは。私は今HPを作っています。
それで質問なんですけど、
HTMLで<SPAN>ってタグありますよね?
それにCSSを使って(? <SPAN>で囲まれた場所を
文字を右揃えに表示させたいのですが、何故かうまくいきません。
<SPAN style="text-align: right">○○</SPAN>
このようなタグで使いました(上)
何故なのでしょう、教えてください。
よろしくお願いします。

ちなみに、このようなものをつくりたいのです。(下)
リンク集なんですけど;

HPタイトル   管理者名
―――――――――――――――
バナー
―――――――――――――――
このHPの説明

これの管理者名のところを右揃えに表示したいのだが、
うまくいかないのです;<DIV>だと改行されてしまうし...

Aベストアンサー

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー">
<hr>
<p>このHPの説明</p>
</div>

こうすると、お望みどおりになるのではないかと思います。 なお、「<span style="float: right;">管理者名</span>」これは、回り込みさせるテキストの前、この場合はHPタイトルの前に入れてください。 HPタイトルの後ろに入れてしまうと、管理者名が一段下にずれて表示されると思います。

参考になれば幸いです。

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー...続きを読む

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qテーブル内の文字列を改行させたい

<TABLE border="1">
<tr> <TD>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD>
</tr>
</TABLE>

これを、ある一定の幅を指定して改行させたいのですが、
CSSを使おうが使わず指定しようが、反映されません。
全角文字だと反映されます。

IE6、IE7で対応させたいと思っています。

CSSでも何でも良いので、どうすれば対応出来るのか
ご教示下さい。

Aベストアンサー

英数半角文字だと、続けて入力した場合、一つの単語とみなして禁則処理をしてしまうんだと思います。
なので、<br>で改行するのがいいのかと思いますが、
IEで対応したいということなので、IE7で動作するかはわかりませんが、
word-break:break-all;
の指示で単語の切れ目を無視して改行してくれると思います。

参考URL:http://www.htmq.com/style/word-break.shtml

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Q連続したの改行

下記の2つのパターンでトータルの横幅は変わってくるのでしょうか?

■改行なし
<span>あ</span><span>い</span>

■改行あり
<span>あ</span>
<span>い</span>

chromeで確認したしたところ、「改行あり」のほうが、数px大きかったのですが、、、

Aベストアンサー

<span>あ</span
><span>い</span>

こうする
タグの中で改行する

もしくは

<span>あ</span><!--
--><span>い</span>

こうする
改行をコメントしちゃう

そのくらいしかないと思う

Q
  • の横並びで、のところで改行
  • <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;
    }

    <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段くらいで表示され...続きを読む

    Aベストアンサー

    改行禁止で対応。

    ul.list li a{
    white-space: nowrap;
    }

    Q文字列が入っているtdを削除せず非表示にしたい

    aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

    <style type="text/css">
    th.about,
    td.about{
    width:0px;
    border:0px;
    }
    </style>


    <table>
    <tr>
    <th class="about">右が1へのリンクになります</th>
    <th><a href="http://www1..com">ウェブサイト1</a></th>
    </tr>
    <tr>
    <tr>
    <td class="about">右が2へのリンクになります</td>
    <td><a href="http://www.2.com">ウェブサイト2</a></td>
    </tr>
    <tr>


    </tr>
    </table>

    aboutの長さ自体を0にするように設定したため、about列は表示されないはずなのですが、"右が1へのリンクになります"、"右が2への~"と表示されます。
    プログラムの動作にかかわるので、about列を削除することなく、CSSなどを設定することでabout列を非表示にしたいのですが、何か上手な方法はあるでしょうか。

    よろしくお願いします。

    aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

    <style type="text/css">
    th.about,
    td.about{
    width:0px;
    border:0px;
    }
    </style>


    <table>
    <tr>
    <th class="about">右が1へのリンクになります</th>
    <th><a href="http://www1..com">ウェブサイト1</a></th>
    </tr>
    <tr>
    <tr>
    <td class="about">右が2へのリンクになります</td>
    <td><a href="http://www.2.com">ウェブサイト2</a></td>
    </tr>
    <tr>


    </tr>
    </table>

    aboutの長さ自体を0にするように設定し...続きを読む

    Aベストアンサー

    <table summary="なんたらの表">
    <caption>なんたらの表</caption>
    <tbody>
    <tr>
    <th>・・・</th>
    <th>・・・</th>
    </tr>
    <tr>
    <td>・・・・</td>
    <td>・・・・</td>
    </tr>
    </tbody>
    </table>

    <table summary="ほげほげの表">
    <caption>ほげほげの表</cpation>
    <tbody>
    <tr>
    <th>・・・</th>
    <th>・・・</th>
    </tr>
    <tr>
    <td>・・・・</td>
    <td>・・・・</td>
    </tr>
    </tbody>
    </table>

    <table summary="むにゃむにゃの表">
    <caption>むにゃむにゃ</cpation>
    <tbody>
    <tr>
    <th>・・・</th>
    <th>・・・</th>
    </tr>
    <tr>
    <td>・・・・</td>
    <td>・・・・</td>
    </tr>
    </tbody>
    </table>

    <table summary="へんてこな表">
    <caption>へんてこ</cpation>
    <tbody>
    <tr>
    <th>・・・</th>
    <th>・・・</th>
    </tr>
    <tr>
    <td>・・・・</td>
    <td>・・・・</td>
    </tr>
    </tbody>
    </table>

    だとして、
    table{
    border-collapse:collapse;
    border:solid 1px gray;
    }
    td,th{border:dotted 1px gray;width:20em;
    }
    table[summary="なんたらの表"] td,table[summary="なんたらの表"] th{display:none;}
    table[summary="なんたらの表"] *+td,table[summary="なんたらの表"] *+th{display:table-cell;}

    table[summary="ほげほげの表"] td,table[summary="ほげほげの表"] th{visibility:hidden;}
    table[summary="ほげほげの表"] *+td,table[summary="ほげほげの表"] *+th{visibility:visible;}

    table[summary="むにゃむにゃの表"] td:first-child,table[summary="むにゃむにゃの表"] th:first-child{display:none;}

    table[summary="へんてこな"] td:first-child,table[summary="へんてこな表"] th:first-child{visibility:hidden;}


    消滅させるならdisplay:none;→display:table-cell;
    存在は残すけど表示させないならvisibility:hidden;→visibility:visibble;

    セレクタは適当に・・・
    隣接セレクタを使うなら +
    第一列なら、擬似クラス:first

    <table summary="なんたらの表">
    <caption>なんたらの表</caption>
    <tbody>
    <tr>
    <th>・・・</th>
    <th>・・・</th>
    </tr>
    <tr>
    <td>・・・・</td>
    <td>・・・・</td>
    </tr>
    </tbody>
    </table>

    <table summary="ほげほげの表">
    <caption>ほげほげの表</cpation>
    <tbody>
    <tr>
    <th>・・・</th>
    <th>・・・</th>
    </tr>
    <tr>
    <td>・・・・</td>
    <td>・・・・</td>
    </tr>
    </tbody>
    </table>

    <table summary="むにゃむにゃの表">
    <caption>むにゃむにゃ</cpation>
    <tbody>
    <tr>
    <th>・・・</th>
    <th>・・・</th>
    </tr>...続きを読む

    Qテーブルタグの中にdivを含めてはダメ?

    テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
    何か不都合でもあるのでしょうか?
    何かご存知の方がいれば教えていただけませんか?

    Aベストアンサー

    以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

    tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
    特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
    tr直下にはth,tdが書けることになっています(それ以外は不可)。

    th,tdの下にはブロック要素が書けるので、divも書けます。

    このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。


    このQ&Aを見た人がよく見るQ&A

    人気Q&Aランキング