- ベストアンサー
複数のdivを横並びさせる際、一つだけセンタリングする方法
- 複数のdivを横並びさせる際、一つだけセンタリングする方法について教えてください。
- widthを狭めてもカラム落ちや片方に寄らせずにする方法についても知りたいです。
- margin: 0 auto;で指定しても左の画像に寄ったり離れたりしてしまいます。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
＞複数のdivを横並びさせる これ意味不明です。DIVは「id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」であって、デザインのためじゃありません。HTML5では「Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )--他に適切な要素がないときの最後の手段として使用すること」となります。 プレゼンテーション(表現)をスタイルシートで行なう最大の目的は「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」です。そこや、「スタイルシートは・・・HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、・・・その他様々なプロパティの設定が簡単にできる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」書かれているように。 ここ、HTML/スタイルシート書く時に最も重要な根幹に関わる部分です。しっかり読んで復習しておきましょう。 例えば、ナビゲーションリストとして次のようにマークアップされているものとしたら、HTMLには一切手を加えないでスタイルシートで ・複数のdivを横並びさせる時一つだけ中央 ・ウィンドウトップ（または最下段）に固定して横並び ・左または右に縦に配置 ・画像の上にボタン的に配置 ・ディスプレイ幅に合わせて中央に横並び など、自由自在にHTMLに頼らずにデザインできます。先でデザインの変更もHTMLには無関係にできますよ。 <div class="header"> <h1>ページタイトル</h1> <div class="nav"><!-- ナビゲーションだよ!!HTML5ではnav --> <ol><!-- 序列リストだよ --> <li><a href=""></a></li><!-- リストの項目とリンクだよ --> <li><a href=""></a></li> <li><a href=""></a></li> </ol> </div> </div> ちなみにHTML5だと <header> <h1>ページタイトル</h1> <nav> <ol> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ol> </nav> </header> さて、ここで「３つのリンクを横並びさせる時一つだけ中央」とデザインしたければ div.nav{ width:100%; min-width:470px;/* スマホ縦置き用 */ max-width:1000px;/* 幅広ディスプレイ用 */ line-height:40px;/* ボタンの高さ */ position:relative;/* 子孫の位置やサイズの基準とする */ margin:0 auto; height:40px; } div.nav ol{ list-style:none;/* リストとは表示しない */ margin:0;padding:0;/* ブラウザのもつスタイルを消す */ } div.nav ol li{ margin:0;paading:0;/* ブラウザのもつスタイルを消す */ top:0;left:0;width:100%;/* div.nav内に */ text-align:left; position:relative; } div.nav ol li+li{ text-align:center;/* 二つ目は中央 */ } div.nav ol li+li+li{ text-align:right;/* 三つ目は中央 */ } div.nav ol li a{ display:inline-block;/* ブロック */ width:25%;min-width:200px;max-width:300px;/* サイズを指定 */ text-align:center; background-color:yellow; position:relative; z-index:100; } div.nav ol li+li a{top:-40px;} div.nav ol li+li+li a{top:-80px;} とHTML見なくても書ける。他にもいろいろ方法はあります。 他のデザインも考えて見ましょう。(HTMLは触らず) ⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) 全体サンプル ★タブは＿に置換してあるので戻す。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) のDATAでチェック済みHTML4.01strict+CSS2.1 ★スマホから幅広ディスプレイまで対応 印刷には適用されない(印刷プレビューで確認) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;} /* ここに上記をコピペ */ body{background-color:gray;} div.header,div.section,div.footer{background-color:silver;] --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<div class="nav"><!-- ナビゲーションだよ!!HTML5ではnav --> ＿＿＿<ol><!-- 序列リストだよ --> ＿＿＿＿<li><a href="/">Top</a></li><!-- リストの項目とリンクだよ --> ＿＿＿＿<li><a href="/Products">Products</a></li> ＿＿＿＿<li><a href="/Contact">Contact</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<div class="section"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>
お礼
ORUKA1951さん、 html5.jsが重いと聞いていてhtml５でしか使えないタグは使いたくなかったので div、ol、liで細かく説明しもらってとても助かりました。 ol、liは使い勝手が良いんですね。 どうもありがとうございました。参考にさせてもらいます。
補足
ORUKA1951さん、 html5.jsが重いと聞いていてhtml５でしか使えないタグは使いたくなかったので div、ol、liで細かく説明しもらってとても助かりました。 ol、liは使い勝手が良いんですね。 どうもありがとうございました。参考にさせてもらいます。