• ベストアンサー

spanでグループ化して二段組

二段組をしたいときはdivでグループ化して floatを使用し、回り込みさせて二段組をするのが多いですが divでグループ化するのではなく、spanを使ってグループ化し 二段組することも出来ますか？ spanは「divのインライン要素版」といわれますが、 そしたらブロック要素の改行になるdivとは違い、回り込みの floatを使わなくてもspanで二段組が出来ますよね？ 回答よろしくお願いします。

  • HTML
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • suzuki-_-
  • ベストアンサー率77% (152/195)
回答No.1

質問者さんの仰る二段組とは 　 ┌─┐┌─┐ 　 │１ ││２ │ 　 │１ ││２ │ 　 │１ ││２ │ 　 └─┘└─┘ このような状態のことでしょうか（二つの間は詰めた感じで） もしそうだとしたら、インライン要素のままで <span>１１１</span><span>２２２</span> のような記述をしても上記のような形には残念ながら出来ません インライン要素にwidth等の指定はできないので、 ただ文字を書き連ねている状態と同じになります 上記の場合は １１１２２２ と表示されるだけで、上階層の幅を縮めても １１ １２ ２２ のようになってしまいます spanは「divのインライン要素版」と言われているのはマークアップ的なものであって、 視覚的なレンダリングの違いはブロック要素とインライン要素でその差がはっきりと存在しているのです

3ks1oeew34
質問者

お礼

丁寧な回答ありがとうございます。 やっと疑問が解消されました。 本当にありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • clear:both;を単体で指定

    float:leftなどで回りこみを設定しました。その設定をclear:both;で解除する時に、インライン要素で指定したいです。 例えば、<div style="clear:both;"></div>で単体ですが、ブロックレベル要素です。 インライン要素で指定できますか？<span>ですと、解除できません。 <div style="float:left;">A</div> <div>B</div> <div>C</div> Cを回りこみさせたくないので、BとCの間にclear:both;を指定したいです。 <div style="clear:both;">C</div>ではない方法をお願いします。

    • ベストアンサー
    • CSS
  • 「インライン要素」と「ブロック要素」の違いは何

    SPANタグの意味を調べたくてググったら http://www.htmq.com/html/span.shtml を見たのですが、 ｄｉｖタグと、SPANタグの違いがよくわからないのですが、 「インライン要素」と「ブロック要素」の違いは何でしょうか？

    • ベストアンサー
    • CSS
  • wordの機能（段組）について

    教えてください！ 出来ないのか、出来るのに知らないだけか・・・、 ワードの段組の機能についてです。 縦書きにして、２段組にしています。 そしたら、上と下の段ができます。 ここがポイントです。 上下を独立したスペースにしたいのです。 つまり、上の段の最後まで入力した後で、 改行すると、次ページの上の段に来るようにしたい。 しかし、現行では上の段の最後を改行すると、 下の段の最初にきます。 どうにか、上下を独立させることができないか・・・ 教えてください。

  • EXCELで段組みできますか？

    縦長の表がありまして、これをA4サイズの横置きに、二段組みにすると丁度収まるサイズです。 段組みにするにはどうすればよいのでしょうか？ EXCEL2003を使用しています。

  • IDをspanとdivに適用させると表示はそれぞれ違いますか？？

    WEBを勉強中です。 spanとdivにそれぞれ外部ファイルで #header{height:100px;border-top:20px solid #99ff66;} と適用させたんですがspanだけborder-top:20px solid #000000の表示が出ませんでした。 spanはインライン要素だからIDは使えないということでしょうか？？ <span id="header"> と本文に記入したんですが、、、

    • ベストアンサー
    • HTML
  • CSSの段組で要素がかけてしまいます

    いつもお世話になります。 今CSSで段組をしています。 #content{ width:780px; height:auto; } #content{ float:left; width:440px; padding-left:20px; padding-right:20px; } #menu{ float:right; width:440px; padding-right:20px; } で左右のボックスを作り、 それぞれにテキストや画像などの子要素を入れていきます。 html <body> <div id="content"> <div　id="main"> <div class="sub1"> </div> <div class="sub2"> </div> </div> 　<div　id="menu"> <div class="sub3"> </div> <div class="sub4"> </div> 　　<div class="sub5"> </div> <div class="sub6"> </div> </div> </div> </html> という具合です。子要素(sub）には高さ指定はしていません。 問題なのは、 firefoxでは子要素がきちんとおさまるのですが、 IE（６，７とも）右の3番目(sub5)の要素が欠落し、（飛ばされている感じ） safariでは右の4番目(sub6）の要素が右の1番上の要素にかぶって表示されます。 どうしたらいいでしょう？どなたかご教授ください。 質問に慣れていないので、もし補足が必要であればお願いします。

  • CSS　段組で要素が表示されません

    いつもお世話になります。 今CSSで段組をしています。 #content{ width:910px; height:auto; } #content{ float:left; width:440px; padding-left:10px; padding-right:10px; } #menu{ float:right; width:440px; padding-right:10px; } で左右のボックスを作り、 それぞれににsubを作ってテキストや画像などの子要素を入れていきます。 htmlは <body> <div id="content"> <div id="main"> <div class="sub1"> </div> <div class="sub2"> </div> </div> 　<div id="menu"> <div class="sub3"> </div> <div class="sub4"> </div> 　　<div class="sub5"> </div> <div class="sub6"> </div> </div> </div> </body> という具合です。子要素(sub）には高さ指定はしていません。 問題なのは、 firefoxでは子要素がきちんと表示されているのですが、 IE（６，７とも）右の2番目(sub4)の要素を表示せず、（飛ばされている感じ） safariでは右の4番目(sub6）の要素が右の1番上の要素にかぶって表示されます。 全体の高さとしては右側の段組の方が高さがあります。 実際にはそれぞれのsubにテーブルやテキスト、画像などが入っています。 何が原因でしょう？どなたかご教授ください。 質問に慣れていないので、もし補足が必要であればお願いします。

  • divタグ（span）についての質問です。

    divタグ（span）についての質問です。 ふと気になったのですが、divタグ（span）の名前は必ずつけないといけないのでしょうか？（【id="任意の名前"】の部分です） ただのブロック要素としてのみ使うときには、特にスタイルシートには記述しないので、名無しでも大丈夫なのかな～？と思いまして、、、 ご存知の方いらっしゃいましたらアドバイスをいただけると幸いですm(__)m 宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSでの2段組レイアウトでdiv#containerを導入する理由

    CSSでの2段組レイアウトでdiv#containerを導入する理由 CSSを使って2段組みレイアウトを構成する場合、次のようにdiv#containerを導入したマークアップをよく目にします。 <body> <div id="container"> <div id="header"> </div> <div id="main"> </div> <div id="menu"> </div> <div id="footer"> </div> </div> </body> また、div#containerを導入せずにbody要素の直下に#header, #mainなどの領域を設けている場合も目にします。 body要素直下ではなく、div#containerを導入するのはどのような理由からなのでしょうか？

  • ワードの段組の方向について

    ワードで広報誌を作っています。 Ａ３版で段組になっています。 上手く説明できないので下の図を参考にしていただければと思います。 「あ」の段を修正・改行をすると左の「う」の段の記事がずれてしまいます。 追加をしても下の「い」の段にずれこめるような設定方法はないでしょうか？最終的に「Ｃ」の状態にしたいのですが。 Ａ４版のものを２枚横につなげるのが１番簡単な方法かもしれませんが、 中央の点線部分にグラフをいれる都合があり、大きいＡ３版のまま本文を入力しています。 よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する