こんにちは。
以下のような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静止画に動きをつける動画作成ソフト

なんと説明してよいのか分かりませんが、
静止画をスパンさせたりして動きをつける
動画作成ソフトをご存知でしたら教えてください。

例・このような動画作りたいのです。
YouTube - Bug Manga AMV/MMV -
http://jp.youtube.com/watch?v=ekRrcfujTwc

私の知っているソフトは普通にスライドショーのようにしか扱えません。

フリーソフトであれば一番いいのですが・・・・

Aベストアンサー

この程度でしたら、ズームやパンの繰り返しですから、何でも出来ると思います。
動き的にはスライドショーのLiFE with PhotoCinemaに似ているけど、私なら一般的な動画編集ソフトでも作れます。

http://www.digitalstage.jp/life/

ソフトの選択より使い方だけかと・・・。

VideoStudioでもPremiereでもAfterEffectsでも何でも出来ます。

Q見出しのタグ

CSSを勉強しながらメモ帳で地道にサイトを作っています。

ところで、<h1>と<h2>のタグを記述してブラウザで確認すると普通は改行されると思うのですが、これを同じ行にすることはできるのでしょうか?

以前どこかでそのようにしているサイトを見たような気がするので、サイト作りの参考にしたいと思いまして…。

Aベストアンサー

こんにちは

h1のような見出しは、ブロック要素ですので
これをインライン形式で表示する(同じ行にする)には、displayを使用して

<style type="text/css">
<!--
h1,h2 {
display: inline;
}
-->
</style>

が、ブラウザへの互換性も高くよいかなと思います。
ご参考になれば…
http://www.tagindex.com/stylesheet/box/display.html

参考URL:http://www.tagindex.com/html_tag/basic/blo_element.html

Qで2重にかけているものをひとつにまとめれる?

cssについての質問です。
<span class="hoge01"><span class="hoge02">テキスト</span></span>
となっているのを、
<span class="hoge01,hoge02">テキスト</span>
や、
<span class="hoge01;hoge02">テキスト</span>
のようにまとめることはできませんか?
ちなみに上の2つは使えませんでした。
よろしくお願いいたします。

Aベストアンサー

複数のクラスを付ける場合、半角スペースで区切ります。
<span class="hoge01 hoge02">テキスト</span>

参考URL:http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#h-7.5.2

Q[RFC821]について

RFC821
http://www.ietf.org/rfc/rfc0821.txt
を見ると次のように記述されています。

<mailbox> ::= <local-part> "@" <domain>
<domain> ::= <element> | <element> "." <domain>
<element> ::= <name> | "#" <number> | "[" <dotnum> "]"
<name> ::= <a> <ldh-str> <let-dig>
<ldh-str> ::= <let-dig-hyp> | <let-dig-hyp> <ldh-str>
<let-dig> ::= <a> | <d>
<let-dig-hyp> ::= <a> | <d> | "-"

<a> ::= any one of the 52 alphabetic characters A through Z in upper case and a through z in lower case
<d> ::= any one of the ten digits 0 through 9

で、これを読むと,

<domain>は1つのelementまたは,ピリオド区切りで任意の個数のelementのどちらかであり,

<element>は"#"<num>や"["<dotnum>"]"
の指定でなければ<name>であり,
<name> ::= <a> <ldh-str> <let-dig>
であるからnameは3文字以上でなければならない

・・・と思うのだけれど

yahooのフリーのアドレスは
example@yahoo.co.jp
のようにcoやjpが既に2文字でこれに当てはまらないような気がするのですが,俺は何か間違っているんでしょうか?
===============
もう一つオマケ。
<special> に含まれるのは ( "@" """ )であって,
( "@" | """ ) ではないんですよね?

RFC821
http://www.ietf.org/rfc/rfc0821.txt
を見ると次のように記述されています。

<mailbox> ::= <local-part> "@" <domain>
<domain> ::= <element> | <element> "." <domain>
<element> ::= <name> | "#" <number> | "[" <dotnum> "]"
<name> ::= <a> <ldh-str> <let-dig>
<ldh-str> ::= <let-dig-hyp> | <let-dig-hyp> <ldh-str>
<let-dig> ::= <a> | <d>
<let-dig-hyp> ::= <a> | <d> | "-"

<a> ::= any one of the 52 alphabetic characters A through Z in upper case and a through z in...続きを読む

Aベストアンサー

RFC821はobsoleteです。RFC2822を見てください。
こっちでは、ドメインの要素は1文字以上となっています。
数字で始まっても良くなりました。

dot-atom = [CFWS] dot-atom-text [CFWS]
dot-atom-text = 1*atext *("." 1*atext)

Qjqueryを使って無駄なspanタグを削除したい

お世話になります。

jqueryを使って無駄なspanタグを削除したいのですが、可能でしょうか?

例えば以下のhtmlがあった場合、
------------------------------------------
<span class="a">あいうえお</span>
<span>かきくけこ</span>
<span class="b">さしすせそ</span>
<span>たちつてと</span>
------------------------------------------

jqueryを使うことで、
------------------------------------------
<span class="a">あいうえお</span>
かきくけこ
<span class="b">さしすせそ</span>
たちつてと
------------------------------------------

このように無駄なspanタグを削除したいのですが、可能でしょうか?
ご存知の方、ご回答いただければ幸いです。
よろしくお願い致します。

お世話になります。

jqueryを使って無駄なspanタグを削除したいのですが、可能でしょうか?

例えば以下のhtmlがあった場合、
------------------------------------------
<span class="a">あいうえお</span>
<span>かきくけこ</span>
<span class="b">さしすせそ</span>
<span>たちつてと</span>
------------------------------------------

jqueryを使うことで、
------------------------------------------
<span class="a">あいうえお</span>
かきくけこ
<span class="b">さしすせそ</span>
たちつてと
-...続きを読む

Aベストアンサー

質問文を素直に実行するのなら。


$("span:not([class])").each( function(i){
var childNodes = this.childNodes;
$(this).replaceWith(childNodes);
});


検証データ

動作前
<div>
<p>
<span class="a">あいうえお</span>
<span>かきくけこ</span>
<span class="b">さし<span>す</span>せそ</span>
<span>たち<span>つ</span>てと</span>
なに<span>ぬ</span>ねの
</p>
</div>


動作後
<div>
<p>
<span class="a">あいうえお</span>
かきくけこ
<span class="b">さしすせそ</span>
たちつてと
なにぬねの
</p>
</div>


改行コードは半角スペースとして表示されます。(HTMLの文法に準拠。)
.children()にtextNodeが入っておらず、意外と苦労しました。

質問文を素直に実行するのなら。


$("span:not([class])").each( function(i){
var childNodes = this.childNodes;
$(this).replaceWith(childNodes);
});


検証データ

動作前
<div>
<p>
<span class="a">あいうえお</span>
<span>かきくけこ</span>
<span class="b">さし<span>す</span>せそ</span>
<span>たち<span>つ</span>てと</span>
なに<span>ぬ</span>ねの
</p>
</div>


動作後
<div>
<p>
<span class="a">あいうえお</span>
かきくけこ
<span class="b">さしすせそ</span>
たちつてと
なにぬねの
...続きを読む

Qブログのメニュー設定時にテンプレートの中に

すいません。
教えてください。

ブログのメニュー設定時に、テンプレートの中に
「出来上がったリンクに対して自動的にリスト化されるように
<ul ><li>
</li></ul>
をつけましょう」
と書いてある本があります。

しかしながらこれでは理由が今ひとつわかりません。
どうしても
<ul ><li>
</li></ul>
をつけなければならないのかどうか。
どなたか教えていただけませんでしょうか。

Aベストアンサー

 <ul> は自動リスト化機能のためのタグです。
 ご自分で実際にデザインしてみて、必要がなければ付ける必要はありません。

 あなたがお読みになった下記の文、
>出来上がったリンクに対して自動的にリスト化されるよう(中略)をつけましょう
 これは、「リンクは必ずリスト化しましょう」という意味になります。
 なんでそんなにリスト化にこだわらなきゃいけないのか、俺には解せません。

Q連続したの改行

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

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

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

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

Aベストアンサー

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

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

もしくは

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

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

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

Q<属性/>

タグの属性の後にスラッシュを付ける表記がXMLに存在している事情を知りましたが、
それに関する疑問が残りました。

タグの属性の後にスラッシュを付ける遣り方と、そのタグ自体を省く遣り方とは、
効果が違うのでしょうか?

Aベストアンサー

補足に在る通りだとすると、

やはり、と言う感じか。XMLなど全く興味が無く、まったく知らない方が、リストに従って、質問をねじりだした。

と言う感じですかね。

他の方が説明している通り、XML、SGML、HTMLなど規定されているマークアップランゲージでは属性は、タグの属性であり、

<属性 /> なんて書式は無い。これはすでに、質問者が示されている通り、エセ質問である。

この部分を指すなら、「タグ名」であり、ノードネームである。ただ、SGML的に言えば、DTDやその元を規定しているSGML宣言(文字コードなど規定している)ファイルからすると、確かに属性と言う表現もあるが、質問の趣旨からは、そぐわない。

それさえ、認めないで、補足で「属性」なんて表現している。

質問者はまず、

http://www.systemk.co.jp/products/xml/xml-secindex.html
http://search.yahoo.co.jp/search?b=1&n=10&ei=UTF-8&fr=ie8sc&p=XML%E3%81%A8%E3%81%AF

などから、もう一度、勉強しなおして、投稿する事をお勧めする。

>そのタグ自体を省く遣り方とは、

読むだけなら10分程度。

理解するなら1時間もあれば、質問の回答も理解できるでしょう。

なお、XMLを理解する上で、最初に目を通しておくと理解が早くなるのがSGML関連知識。

http://search.yahoo.co.jp/search?p=SGML%E3%81%A8%E3%81%AF&aq=-1&oq=&ei=UTF-8&fr=ie8sc&n=10&x=wrt
http://yamanjo.net/knowledge/internet/internet_25.html

となるか。

そこには

<要素></要素>

などと説明している、SGMLからの呼び方としては「要素名」が正しいが、HTMLから入る人に対しては、「タグ名」として説明するのがいいでしょう。ただ、これをプログラミング(JavaScriptなど)の世界へ入ると、教則本で、XMLを扱う箇所へ行くと、突然「要素をしていする」とか、「要素名を取得する」「ノード名の取得」なんて突然でてくる。

混乱する方がたくさんいます。最初からマークアップランゲージについて、基本を学びましょう。

>タグの属性の後にスラッシュを付ける遣り方と、そのタグ自体を省く遣り方とは、 効果が違うのでしょうか?

この誤りは、教則本の最初の50ページまでに代々記載されています。

XML、SGMLのインスタンスには、2種類あり、

http://ykr414.com/xml/xml02.html

に記述されている。これらを理解しないと、理解できないと思います。質問する前に検索して、ちゃんと理解してから投稿しようね。

まあ、警告しても無駄だと思いましたが、とりあえす説明しておきましたよ。

補足に在る通りだとすると、

やはり、と言う感じか。XMLなど全く興味が無く、まったく知らない方が、リストに従って、質問をねじりだした。

と言う感じですかね。

他の方が説明している通り、XML、SGML、HTMLなど規定されているマークアップランゲージでは属性は、タグの属性であり、

<属性 /> なんて書式は無い。これはすでに、質問者が示されている通り、エセ質問である。

この部分を指すなら、「タグ名」であり、ノードネームである。ただ、SGML的に言えば、DTDやその元を規定しているSGML宣言(文字...続きを読む

Qspan要素にのみ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で指定した幅を無視してどこまでも改行なしで表示されてしまいます。
どのように指定すれば目指している形にできるでしょうか?

Aベストアンサー

例えば

<div>
<span>type1</span> <span>type2</span> <span>type3</span>...
</div>

こんな感じで半角スペースを挿入すると改行はされるはずです。

Qフォント<書体>についての考察

アルバイト先で、研修会があるのですが
事前課題として
『ワープロ等で使用されているこの書体について考察してください』
というものが出されました。

書体は多分明朝なのですが・・

出題者の意図もわからず、
何を考察していいのか・・・
一分以内で後日発表することになっているのですが、、。
どういうことなのでしょうか?
ヒントや見解を教えてください!

Aベストアンサー

大した意図はありませんよ!

1分と言えば、

私は、5つ程の特徴を持つ書体であると認識しています。
一つは、周知のように、楷書体とともに代表的な書体です。
二つは、誰もが知っているように、横線が細く縦線が太いという特徴があります。
三つは、英字の場合、小文字のエル(l)と1が混同しやすいという難点もあります。

と述べていけば「アッ!」と言う間です。

ここまでで、大体30秒。
残り30秒は、自分で考えて下さい。


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

人気Q&Aランキング

おすすめ情報