プロが教えるわが家の防犯対策術!

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

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

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

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

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

A 回答 (3件)

<span>あ</span


><span>い</span>

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

もしくは

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

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

そのくらいしかないと思う
    • good
    • 0

まず仕様書を確認する癖をつける。

・・皆描いてある。それ以外にも知っておくべきことも・・

【引用】____________ここから
9.1 空白類
 文書文字集合には、多様な空白類文字が含まれている。 その多くは、特定の視覚的スペーシング効果を生成するために何らかのアプリケーションが用いる印刷術的要素である。 HTMLでは、次に挙げる文字だけが空白類文字であると定義される。
・ASCIIスペース (&#x0020;)
・水平タブ (&#x0009;)
・書式送り (&#x000C;)
・ゼロ幅スペース (&#x200B;)
 行区切り類もまた、空白類文字である。 ここで、&#x2028; 及び &#x2029; が[ISO10646]では行や段落を明確に分離するものと定義されているが、HTMLでは行区切り類に含まれないし、更に本仕様は両者を空白類文字一般にも含めないという点に、注意されたい。
 本仕様は、ここに空白類文字と明示的に定めたもの以外のスペース文字類については、レンダリングその他の挙動を示すことはない。 この理由から、著者は、空白類を含む視覚的整形効果を及ぼすためには、スペース類文字ではなく適切な要素あるいはスタイル指定を行う必要がある。
 ・・・【中略】・・・
 ここで、ソース文書中で語間に空白類が複数連なっている場合、PRE要素を除いて、レンダリング結果の語間スペース調整は全く異なるものになるという点に注意されたい。 特にユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある。 これは、lang属性やHTTP "Content-Language"ヘッダフィールド([RFC2616]の14.12参照)、ユーザの設定、等による言語情報が存在しない場合であっても、可能かつ必要な動作である。
 ・・・【中略】・・・
 SGMLの行区切り規則への抵触や、現存する実装間の矛盾を回避するため、著者は、ユーザエージェントが開始タグ直後または終了タグ直前の空白類をレンダリングするとは期待しないようにすべきである。 従って、著者――特にオーサリングツール――は、次のように書くべきであり:
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Paragraphs, Lines, and Phrases (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より

<span>あ</span>
<span>い</span>
のふたつのspan要素の間には、改行コードと言う空白文字がありますから、半角スペース分あきます。行内要素の場合は、間に改行のみならず、半角スペース、タブもそれが空白文字として意味無い限り入れない。

 
    • good
    • 0

改行が隙間に変換されているんだと思うわ

この回答への補足

そのように変換されないようにする方法はありますか?

補足日時:2014/05/13 13:10
    • good
    • 0

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

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

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

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

QCSS:span 改行させるには?

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

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

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

4,500円 税込、送料別

と表示されています。

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

4,500円
税込、送料別

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

Aベストアンサー

spanはインラインエレメントですから改行しないのは当たり前です。
<br />使えないのなら…

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

span{
display:block;
}

これだと確実に改行されます。

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
なんてものを見つけたり(汗

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の方も修正する方法でもよけ...続きを読む

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の仕様でそう決まっているからです。

Qrowsとcolsの意味

textareaタグとかに出てくるrowsとcolsについて悩んでいます。
どちらかが行でどちらかが列というのは分かるのですが・・。
和英辞典で列と行について調べてみると両方ともでrowが出てきて混乱してしまいました。
cols="20" rows="10"と指定したら横20縦10文字分確保するという風に理解してしまって良いのでしょうか?
後colsって何かの英単語の略なのでしょうか?

Aベストアンサー

rowsはrowの複数形ですが、colsはcolumnの複数形(の略)のことです。
rowは行、columnは列ですね。

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改行したときの幅を狭くする方法

    HTMLで文章を打っていると、改行なしの単純な折り返しの場合に比べて、改行したときに行間があいてしまいます。表を作成しても、表の中で改行すると同じことが起こります。
    これを防ぐにはどうしたらよいでしょうか。
    編集ソフトにファイルメーカーのHomepage Pro3.0 v1を使用していますが、HTMLを直接修正する方法でも結構です。

    Aベストアンサー

    たぶん、タグが<P>となっていると思われますので、
    これを<BR>に変更すれば、行間の空かない改行になります。

    また、ファイルメーカーのHomepage の場合の方法はわかりませんが、
    DreamWeaverでは、Shiftを押しながら、改行すると、<BR>となります。
    もしかしたら、同じ操作ができるかもしれません。

    Qpタグによる段落間のアキ調整について

    こんにちは。
    HTMLのpタグでくくった段落が連続すると、
    多くのブラウザでは段落間に1行程度のアキが生じると思います。

    このアキをCSSによってなくしたいのですが
    どう指定すればいいのでしょうか?

    たとえば段落の「margin-bottom」に0ではなく
    マイナス値を入れればなくせるようですが、
    「pによる1行アキ」というのがすべてのブラウザでの
    共通仕様なのか分からず、マイナス値使用に怖さを覚えます。

    どういうやり方がすべてのブラウザに通用する
    正しいやり方なのでしょうか?

    Aベストアンサー

    > > まあ、0などにすれば空きは見えなくはなりますが…
    > え? できますか?
     できますよ。
    ただ、pが上部にマージンをもうけるか下部にマージンをもうけるかは分からないので、
    下部マージンは元々0だった(空白に見えていたのは上部マージンだった)と言う可能性があると思いますよ。

    margin:0;などとして上下左右をいっぺんに指定すれば、ブラウザのデフォルトスタイルの介入がなくなるので、良いのではないかと思います。

    このようにして略記した場合は、四辺を一度に指定することが出来、
    しらべてみたところ、Operaでは
    margin:0; ← 上下左右0に指定
    margin:0 1px; ← 上下0, 左右1pxに指定
    margin:0 1px 2px; ← 上0, 左右1px, 下2pxに指定
    margin:0 1px 2px 3px;上右下左という順番で、0, 1, 2, 3pxに指定
     という風になっているようです。
    まあ、使いうるのは全方向指定と上下左右指定ぐらいなものかもしれませんが(^_^;

    Q

    現在、CSSでホームページを作っているのですが、IEではうまくセンター表示できるのですが、firefoxなどでは左によってしまいます。

    bodyに<div align="center">を記載せずにCSSだけでセンターに表示させることは出来ないものでしょうか?ちなみにIEでセンターによってしまうのはバグだと聞いたことがあるのですが、本当でしょうか?

    よろしくお願いします。

    Aベストアンサー

    まぁ、MozillaとIEで表示が違えば大抵IEのバグですが、IEが正解でMozillaが違ってる場合もあります。
    今回の件は具体的にどんなんだかわからないので分かりません。

    で、基本的なCSSでのセンタリングですが、例えばブロック要素を真ん中に持ってくる場合は、その真ん中に持ってきたいブロック要素自身のマージンでセンタリングします。

    例えば、
    <div style="width:100px; margin:0 auto 0 auto;">まんなかです</div>
    とすると、こいつは親要素に対して左右均等のマージンを取る。つまりセンタリングされます。

    ブロック要素の中のテキストやインライン要素をセンタリングするにはtext-alignを使います。
    <div style="width:100px; text-align:center;">まんなかです</div>

    それと、注意したいのは、一行目の文頭に<!DOCTYPE~>を書かないとIEは互換モードでレンダリングしだしますので、CSS解釈も(ますます)変になりますのでご注意を。

    こんな感じで。

    No.1の方のサイト、参考になりますよ。私も昔これ見て勉強しました(笑)。

    まぁ、MozillaとIEで表示が違えば大抵IEのバグですが、IEが正解でMozillaが違ってる場合もあります。
    今回の件は具体的にどんなんだかわからないので分かりません。

    で、基本的なCSSでのセンタリングですが、例えばブロック要素を真ん中に持ってくる場合は、その真ん中に持ってきたいブロック要素自身のマージンでセンタリングします。

    例えば、
    <div style="width:100px; margin:0 auto 0 auto;">まんなかです</div>
    とすると、こいつは親要素に対して左右均等のマージンを取る。つまりセンタリングされ...続きを読む

    Qテーブルのセルに画像をピッタリ表示するには

    よろしくお願いします。

    テーブルの以下のタグ並びで、
    <img src=>の部分の画像jpgを、枠にピッタリ表示したいのです。
    以前作った他のhtmlファイルでは、画像のサイズに変化があっても、自動的に枠にピッタリ表示でき、
    同じ通りタグを書いたはずなのですが、
    なぜか?今回は、この画像が、
    一行二列目の枠(これが大きくなってしまう)
    のその左端寄りに、幅よりも小さく浮いたように表示されてしまいます。(枠の右側に不要な余白ができてしまう)
    枠や画像のサイズを固定しても同じです。
    この画像の枠以外は、画像ではなくテキストです。
    うまくいかないのはなぜなのでしょう?
    どこに間違いがあるのでしょうか、教えてください、お願いいたします。

    <table width="85%"border="1" cellpadding="5" cellspacing="5" align="center">

    <tr><td>一行一列目
        </td>
    <td rowspan="3">1行二列目~ココの部分~<img src="" width="" height="" align="center" valign="top" alt="">
    </td></tr>
    <tr><td>2行一列
    </td></tr>
    <tr><td>3行一列
    </td></tr>
    <tr><td>4行一列目
    </td>
    <td>4行二列目
    </td></tr>
    <tr><td colspan="2">5行一列
              </td></tr>
    <tr><td colspan="2">6行一列
              </td></tr></table>

    よろしくお願いします。

    テーブルの以下のタグ並びで、
    <img src=>の部分の画像jpgを、枠にピッタリ表示したいのです。
    以前作った他のhtmlファイルでは、画像のサイズに変化があっても、自動的に枠にピッタリ表示でき、
    同じ通りタグを書いたはずなのですが、
    なぜか?今回は、この画像が、
    一行二列目の枠(これが大きくなってしまう)
    のその左端寄りに、幅よりも小さく浮いたように表示されてしまいます。(枠の右側に不要な余白ができてしまう)
    枠や画像のサイズを固定しても同じです。
    この画像...続きを読む

    Aベストアンサー

    私の場合これで反映されていますのでもうお力になれないと思いますが一つだけ。

    私もたまにタグでやってておかしくなるときがあります。
    そのときは、一部を修正して直る場合もありますがそうでない場合もあります。
    そういう場合一度その部分だけを、別のページで一からすべて作り直してみると直るときがあります。
    別のページでも一からすべてを記入するのではなく、徐々にタグを増やしていってどこが悪いのかを探してみるのも一つの手です。


    人気Q&Aランキング