1番上の3つのフレームだけセンターに配置したいです

2014/03/06 02:40

このQ&Aのポイント

現在のコードでは、フレームを配置していますが、1番上の3つのフレームだけを中央に配置したいと思っています。
どのように入力すれば効果的な方法で配置することができるでしょうか？
素人なので、よく分かりません。お手数ですが、アドバイスをお願いいたします。

crywithjoy2014
お礼率69% (9/13)

CSS
回答数2
ありがとう数3

みんなの回答 （2）
専門家の回答

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/03/06 14:33 回答No.2

そのようなHTMLの描き方は誤りですが・・ <div class="test"> 　<div></div> 　<div></div> 　<div></div> 　<div></div> ・・・ </div> であったとしても、 div.test{width:1000px;text-align:center;} div.test div{ width: 150px; height: 150px; overflow: hidden; border: 1px solid; color: #a9a9a9; padding: 3px; display:inline-block; } div.test div+div+div+div{display:block;float:left;} ですむはずです。 ★スタイルシートを使用する最大の目的は「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」です。【必読】　divの目的は『id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』です。outer-frameとかinner-frameは、HTML4.01で強く否定されている「ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」と発想は変わりません!!。次のようにマークアップされるのじゃないですか？？ <div class="nav"> ＿<ol> ＿＿<li> ＿＿＿<ol> ＿＿＿＿<li><a href="">1</a></li> ＿＿＿＿<li><a href="">2</a></li> ＿＿＿＿<li><a href="">3</a></li> ＿＿＿</ol> ＿ </li> ＿＿<li><a href="">4</a></li> ＿＿<li><a href="">5</a></li> ＿＿<li><a href="">6</a></li> ＿＿<li><a href="">7</a></li> ＿＿<li><a href="">8</a></li> ＿＿<li><a href="">9</a></li> ＿＿<li><a href="">10</a></li> ＿</ol> </div> このように、HTMLはひたすら、文書構造だけをマークアップします。そして、 div.nav{ min-width:480px;max-width:1000px;/* ただし最小470px(スマホ)、最大1000px */ margin:0 auto;/*左右中央 */ } div.nav ol{/* ナビゲーションブロック内のolは */ list-style:none;/* リストじゃないよ */width:100%;/* ディスプレイの幅一杯 */ display:block;/* ブロックだよ */ padding:0; position:relative; margin:0; } div.nav ol li ol{ width:100%; text-align:center; min-height:100px; } div.nav ol li{ width: 100%; margin: 0; } div.nav ol li ol li, div.nav ol li+li{ width:150px;height:150px; float:left; margin:5px; padding:3px; text-align:left; } div.nav ol li ol li{ float:none; display:inline-block; } div.nav:after{content:"";display:block;clear:left;} HTMLの改定も楽ですし、デザインも独立しているから自由に変更できる。もちろん、 <div class="nav"> ＿<ol> ＿＿<li><a href="">1</a></li> ＿＿<li><a href="">2</a></li> ＿＿<li><a href="">3</a></li> ＿＿<li><a href="">4</a></li> ＿＿<li><a href="">5</a></li> ＿＿<li><a href="">6</a></li> ＿＿<li><a href="">7</a></li> ＿＿<li><a href="">8</a></li> ＿＿<li><a href="">9</a></li> ＿＿<li><a href="">10</a></li> ＿</ol> </div> でしたら、 div.nav{ min-width:480px;max-width:1000px;/* ただし最小470px(スマホ)、最大1000px */ margin:0 auto;/*左右中央 */ } div.nav ol{/* ナビゲーションブロック内のolは */ list-style:none;/* リストじゃないよ */width:100%;/* ディスプレイの幅一杯 */ display:block;/* ブロックだよ */ padding:0; position:relative; margin:0; text-align:center; } div.nav ol li{display:inline;} div.nav ol li a{ width:150px;height:150px; display:inline-block; margin:5px; } div.nav ol li+li+li:after{content:"";display:block;clear:left;} div.nav ol li+li+li+li:after{content:none;} div.nav ol li+li+li+li a{ display:block; float:left; } div.nav:after{content:"";display:block;clear:left;} div.nav ol li a{background-color:aqua;} でよい。

質問者

お礼 2014/03/15 07:49

お返事が遅くなってすみません。せっかく答えていただいたのに私のレベルではあまりにも難解な為に思考停止になっていました。時間を見つけて書いていただいたのを参考にしてなんとか作ってみたいと思います。ありがとうございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

noname#206842

2014/03/06 08:30 回答No.1

<div class="outer-frame" style="textalign:center;"> <div class="inner-frame"></div> <div class="inner-frame"></div> <div class="inner-frame"></div> </div> <div class="outer-frame"> <div class="inner-frame"></div> <div class="inner-frame"></div> <div class="inner-frame"></div> <div class="inner-frame"></div> </div> <div class="outer-frame"> <div class="inner-frame"></div> <div class="inner-frame"></div> <div class="inner-frame"></div> <div class="inner-frame"></div> </div> ********************************************** レイアウトにテーブルを利用することは、あまりお勧めできませんが、入れ子が、正しく記述されていないだけでは？・・・レイアウトとして使用する場合は、idを使った方が、いいのでは？・・・（classよりもidの方が、優先力がある) 実際には、CSS部分は、別途CSSに、classとして記述します。

質問者