すみません。現在下記のようなコードでフレームを配置しています。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>
<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>
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-html4 … )」です。【必読】
divの目的は『id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』です。outer-frameとかinner-frameは、HTML4.01で強く否定されている「ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」と発想は変わりません!!。
次のようにマークアップされるのじゃないですか??
<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
- 回答日時:
<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にコピペして結果が出ないと、もうお手上げ状態のレベルでして…基礎がわかっていないと厳しいですね。もうちょっと時間をかけて勉強してみます。お返事が遅くなってしまってすみませんでした。ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- PHP ランキングを表示する際の画像の大きさを固定することは可能でしょうか? <?php if ( has_ 1 2022/07/21 14:55
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
goo は、放置?
-
htmlの文字が縦書きになる
-
スマホ(android)のタッチパネ...
-
css初心者 フレックスボックス...
-
メモ帳の段落の揃え方
-
CSS、Bootstrapについて contai...
-
テーブルの行を折りたたみたい...
-
WEBページを強制的に横画面で見...
-
WEBサイト 画像の直接リンクに...
-
CSSについて教えてください。 ...
-
列のどこをクリックしてもソー...
-
ボタンが押されたらWebページの...
-
アコーディオンメニューが思う...
-
テーブルタグのセルの幅の一部...
-
iPhoneで HTMLファイルを閲覧
-
角丸画像の背景色を透明にした...
-
htmlソース文の 各行 改行位置...
-
ホームページのURLをコピー...
-
pythonのコードについてご教示...
-
すいません HTMLです この画像...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたい...
-
htmlで<form>~</form>を並べて...
-
WEBページを強制的に横画面で見...
-
コードを書いて下さい( ; ; )...
-
css初心者 フレックスボックス...
-
テーブルのセルデータを自動改...
-
CSSデータの作成方法について(...
-
HTMLで画像をポップアップで表...
-
メモ帳の段落の揃え方
-
スマホ(android)のタッチパネ...
-
HTMLで特定の文字だけ色を変え...
-
プログラミングの勉強が進みません
-
スマホでHTMLファイルを開いて...
-
テーブルタグのセルの幅の一部...
-
CSSでつくったメニューのアニメ...
-
大至急。webのシングルページを...
-
角丸画像の背景色を透明にした...
-
HTML入門でもう躓いてしまった。
-
HTMLの CSSのファイルというの...
おすすめ情報