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

質問

すみません。現在下記のようなコードでフレームを配置しています。1番上の3つのフレームだけセンターに配置したいと思っているのですが、下記のコードでもっとも効果的な方法はどのように入力すればよろしいのでしょうか？簡単な事なのかも知れませんが素人なのでよくわかりません。すみませんがよろしくお願いいたします。

<style type="text/css"><!--
.outer-frame { width:1000px; overflow: hidden; } .inner-frame { width: 150px; height: 150px; overflow: hidden; border: 1px solid; color: #a9a9a9; padding: 3px; float: left; margin: 5px;} div.inner-frame:hover {border-color: #ff0000;}
--></style>&nbsp;

<div class="outer-frame">
<div class="inner-frame"></div>
<div class="inner-frame"></div>
<div class="inner-frame"></div>
↑
この3つだけ中央に表示したいです。

<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 class="outer-frame">
<div class="inner-frame"></div>
<div class="inner-frame"></div>
<div class="inner-frame"></div>
<div class="inner-frame"></div>
</div>
&nbsp;

回答No.2

ORUKA1951 · ベストアンサー

そのような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"><!-- 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"><!-- 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;}

でよい。

お礼

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

回答No.1

noname#206842

<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として記述します。

お礼

すみません。せっかく書いていただいたのに、自分のWordpressにコピペして結果が出ないと、もうお手上げ状態のレベルでして…基礎がわかっていないと厳しいですね。もうちょっと時間をかけて勉強してみます。お返事が遅くなってしまってすみませんでした。ありがとうございました。