- ベストアンサー
floatを使用して両サイドを揃えたい
ウェブの勉強を始めて2ヶ月になりますが、 わからないことばかりで、質問をさせてください。 float:leftを使用して、左から順に並べたいのですが、 総幅に対して、ピッタリと収まるように出来ません。 文章では分かりづらいと思いますので画像も添付いたします。 総幅：900px ABCのボックス幅：292px ABCの間：12px くらいになるようにしたいのですが、 どうしても画像の上段のようになってしまいます。 どなたかアドバイス戴けますと幸いでございます。
- jigoujitoku
- お礼率75% (3/4)
- CSS
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
単体ですとちょっと余計な記述が必要ですが、 ネガティブマージンを使えば出来ます。 #box-area { position:relative; overflow:hidden; width:900px; } #box-area-inner { margin-right:-12px; } .box { float:left; width:292px; margin-right:12px; background-color:#ff0000; } </style> <div id="box-area"> <div id="box-area-inner"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </div>
その他の回答 (3)
- utun01
- ベストアンサー率40% (110/270)
No.2です。 ちょっとJavascript入っちゃってますが、こんな感じでどうでしょう？ （ちなみに「*」はIEハック用です） <html> <head> <title>テスト</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type='text/javascript'> $(document).ready(function(){ var max=$('#boxwrapper .boxes').size(); for(i=0;i<max;i++){ if(i%3!=0){ $('#boxwrapper .boxes:eq('+i+')').css('margin-left','12px'); } } }); </script> <style type="text/css"> #boxwrapper{ margin: 0; padding: 0; border: 1px solid #000000; width: 900px; *width: 902px; height: 60px; } .boxes{ margin: 0; padding: 0; border: 1px solid #000000; width: 290px; *width: 292px; height: 18px; float: left; } </style> </head> <body> <div id='boxwrapper'> <div class='boxes'>test</div> <div class='boxes'>test</div> <div class='boxes'>test</div> <div class='boxes'>test</div> <div class='boxes'>test</div> </div> </body> </html>
お礼
この度は、2回もお答え戴きまして、ありがとうございました。 javascriptをかませるなんて方法もあるのですね！ 勉強になります。 今回、質問をさせて頂いて、まだまだ先が長いことを思い知らされましたが、 これに懲りず、頑張っていきたいと思います！ 素人の質問にお答え戴き、さらにベストアンサーまで選ぶなんていうのは、 甚だおこがましい気が致しますが、今回はcssのみでシンプルに教えてくださった方にさせて頂きたいと思います。 2回もお答え戴いたのに、大変恐縮ではございますが、 この度は本当にありがとうございました！！
- utun01
- ベストアンサー率40% (110/270)
ちゃんと計算すれば合うはずですよ。 ・AのCSS margin: 0; padding: 0; ・BCのCSS margin: 0 0 0 12px; pidgin: 0; としていますか？ また、ボーダーを設定している場合、このピクセル数も計算に入れる必要があります。 例としてはこんな感じです。 ・ABCのCSS margin: 0; padding: 0; border-top: 1px solid #000000; width: 290px; ・BCのCSS margin-left: 12px;
補足
具体的なソースを教えて頂きまして、 誠にありがとうございます。 教えて頂いたこちらのカラムAとカラムB/Cを分けて、 border分まで計算したcssは 自分でもなんとか書けてはいたのですが、、、 というより、私の説明不足にて大変申し訳ございませんが、 ABCは同じcssでどうにかしたいと言いますか、 どうにかならないかと悩んでいるのが、 率直なところでして・・・ A→B～～E→Fと投稿していった際、 カテゴリによっては、、、 ABC DEF とは必ずしもならず、 BCD GHJ 等の状況が生まれてくるので、 何かうまくできればいいなと考えております。 せっかく、具体的に教えて戴いたのに、 大変申し訳ございませんでした。 意を決してこちらのサイトに質問させて頂いたのですが、 今後、質問する際は質問の中身なども具体的にするよう注意して参ります。 ありがとうございました！！
- ORUKA1951
- ベストアンサー率45% (5062/11036)
floatでは出来ません。とても複雑になります。 また、安直なので良く使われていますが、本来の段組の方法ではありません。 Webデザインにおける段組 ( http://ja.wikipedia.org/wiki/%E6%AE%B5%E7%B5%84#Web.E3.83.87.E3.82.B6.E3.82.A4.E3.83.B3.E3.81.AB.E3.81.8A.E3.81.91.E3.82.8B.E6.AE.B5.E7.B5.84 ) ・floatでは、本来の文書構造に逆らって文書を並べなければなりません。 ・ウインドウ巾を関わらず固定しなければなりません。 最近のように様々なウィンドウ巾があるとき対応でません。 これが新聞記事のような段組なら、CSS3のMulti-columnを使うことになりますが、減少は時期尚早なのでCSS2.1で作成せざるを得ません。 いずれにしても、HTMLは文書構造をマークアップし、スタイルシートでプレゼンテーションを指定するという基本は守ること。HTML5では、これが最重要となります。 ３つのカラムが、まったく同等な文書構成要素でしたら、floatでも良いでしょう。 [例] ・順不同リストでマークアップされるような内容 <ul> <li>記事A</li> <li>記事B</li> <li>記事C</li> </ul> 綿密にサイズを決定してfloat、あるいはinline-blockでスタイルを指定します。 ３つのカラムが本文、目次、脚注のように異なる文書構成要素の場合 [例] <div class="section"> 本文Ｂ <div class="tableContent"> 目次Ａ </div> <div class="aside"> 脚注Ｃ </div> </div> この場合は、positionです。 大事なことは、HTMLではデザインを考えてはならないということです。あくまで文書構造をマークアップするものです。【最初の最初に理解しておかなければならないことです。】 それさえ出来れば、逆にデザインは自由自在に出来ます。 ★2.4.1 構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) A,B,Cになにが入るのか・・それをまずお示しください。いずれの場合も、３つのカラムを中央に(ほぼ)均等に並べることが出来ます。
お礼
このサイトの使い方もあまり理解しておらず、大変失礼致しました。 補足の方へ色々と書き込んでしまいました。 大変失礼致しました。 この度は、本当にありがとうございました。 先を見て、一生懸命勉強したいと思います。
補足
この度は、こんな素人の質問に 早々にご対応戴きまして、ありがとうございました！ > ３つのカラムが、まったく同等な文書構成要素でしたら、floatでも良いでしょう。 今回のケースですと、写真＋タイトルだけなので、 width/hight共に同等な文書構成要素に当たるかと思うのですが、 その場合は、floatを使って作れるということですよね。。。 明け方まで四苦八苦してみたのですが、サッパリわからず、 諦めて寝てしまったのですが、頑張ってみたいと思います！ また、ご教示戴きましたようにHTML/CSSの 基本を理解できていないことを痛感しつつ、 教えて戴いたサイトも今後理解できるようになりたいなと。。。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
こんなやり方があったんですね。。。 今の私では全く想像もつきませんでした。 お陰さまで、やりたかったことにピッタリはまりました。 ありがとうございます！！ これからも精進して参りたいと思います！ この度はありがとうございました！！