複数のdivを横並びさせる際、一つだけセンタリングする方法
- 複数のdivを横並びさせる際、一つだけセンタリングする方法について教えてください。
- widthを狭めてもカラム落ちや片方に寄らせずにする方法についても知りたいです。
- margin: 0 auto;で指定しても左の画像に寄ったり離れたりしてしまいます。
- ベストアンサー
複数のdivを横並びさせる時一つだけ中央
複数のdivを横並びさせる時一つだけセンタリングする方法はありますか？ widthを狭めてもカラム落ちや片方に寄らせずに l--口----------l３カラム l--------------l l---------------l左右可変l--------------l l-----------------------------------------l l-----------------------------------------l margin: 0 auto;で指定しても左の画像に寄ったり離れたりしてしまいます。 body{ width:1500px;} #3カラム{margin-left: 0 auto; margin-right: 0 auto; width:500px; ～～ } #左画像{width:100px; margin-left:10px; z-index:2; }
- vvv78
- お礼率100% (4/4)
- CSS
- 回答数1
- ありがとう数7
- みんなの回答 （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>
関連するQ&A
- divをセンタリングで横並び
1920px×1080pxのPCで確認しています。 container_main を画面いっぱいにして、 container_a とcontainer_b をセンタリングで横並びにしたいのですが、 container_a とcontainer_b が縦に並んでしまいます。 センタリングで横並びにするにはどのようにすれば良いでしょうか。 #container_main { width:100%; height:auto; } #container_a { width:500px; height:400px; margin:0 auto 0 auto; } #container_b { width:500px; height:400px; margin:0 auto 0 auto; }
- ベストアンサー
- CSS
- overflow-x : hiddenが効かない;
mac、html5でwebサイトを作ってます。 せっかく、以前ここで3カラム左右可変をやり方を教えていただいたのですが、うまく出来なかったので３カラムとも固定で@media screen and で一定のwidthになったらサイズを変更する方法をとる事にしました。 それで、widthが狭まった時スクロールを表示しないようにしたいんですが、 overflow-x : hidden; (position:relative;)が効きません。どのブラウザでも同じで理由が解りません。 widthを狭めてもカラム落ちや片方に寄らせずに.. html５で書いてるのですがhtml5.jsが重いそうなのでhtm4でも使えるタグで使ってます。 l----------------------------------------------------l l------------------id=header-------------------l l_____________________________________l --口-----------l最初は左I右固定l----------------l l-----------------lの３IカラムI。l----------------l l----------------------------------------------------l l----------------------------------------------------l body{ width:1500px; position:relative; overflow-x : hidden; } . header{ ～～～ ～～～ } #3カラム{ margin-left: auto; margin-right: auto; width:500px; position: relative;かposition: absolute; ～～ } .clearfix:after{ content: ""; clear: both; display: block; } #左画像{ position: absolute; width:100px; margin-left:10px; z-index:2; } htmlで左画像はカラムの外に置きました。 widthがある一定の数まで縮まった段階で@media screen and を使って中央も可変にするつもりです。 可能でしょうか？
- ベストアンサー
- HTML
- 2つのDIVを中央と右に横並びにしたい
いつも大変お世話になっております。 wordpressのヘッダー個所に、真ん中にロゴ画像、右手にソーシャルメディアの画像を横並びに配置したいのですが、うまくいきません。 Topというdivの中に「logo」と「social」という２つのdivを入れ、下記のcss、htmlで制作すると、ロゴは中央に配置され、ソーシャルメディアの画像は右に寄るのですが、 横の配置がソーシャルメディア画像が右下にきてしまい、うまくいきません。 是非どなたかご教授いただけますと、非常に助かります。 <div id="top"> <div id="logo"></div> <div id="social"> <div class="fb"></div> <div class="twitter"></div> </div> </div> #top { height: 36px; } #logo { background-image: url(images/logo.png); background-repeat: no-repeat; margin: 0 auto; height: 36px; width: 397px; } #social { float:right; height: 36px; width:56px; } #social .fb { background-image: url(images/fb.png); background-repeat: no-repeat; padding-right: 3px; height: 26px; width: 25px; float:right; } #social .twitter { background-image: url(images/twitter.png); background-repeat: no-repeat; padding-right: 3px; height: 26px; width: 25px; float:right; }
- ベストアンサー
- CSS
- IE８ではtext-align: center;でdivタグが中央にならない。改善策は？
IE８ではtext-align: center;でdivタグ又はbodyが中央にならなくなってしまったので、修正方法を探していたところ、以下の質問・回答履歴を見つけました。 http://oshiete1.watch.impress.co.jp/qa4989799.html 上記の回答履歴では最終的にNo.6さんの以下の回答で問題が解決されています。 CSSでは以下のように記述： div.center { width: 80%; margin-right: auto; margin-left: auto; } HTMLではセンタリングさせたいdiv要素を以下のように記述： <div class="center">文章等<div> ＜質問1＞ ここで私の質問ですが、なぜ上記の回答では<div class="center">文章等<div> を中央に表示するためにCSSにwidth: 80%;が必要なのでしょうか（width: 80%はdivタグのセンタリングには特に必要ないのですか？なぜ、width: 80%が記述されているのか分かりません。）？この80%という値はどこから導き出されたのでしょうか（なぜ、例えば60%、70%等ではだめなのですか？）？ また、bodyタグをセンタリングしたい場合は、どうですか？CSSにwidth: 80%;が必要なのでしょうか？ ＜質問２＞ 「margin-right: auto;とmargin-left: auto;」以外にもmargin:0 autoという方法が他のサイトで紹介されていましたが、「margin-right: auto;とmargin-left: auto;」を使用した場合とmargin:0 autoを使用した場合の表示結果は全く同じなのでしょうか？margin:0 autoの場合、上下のマージンも0（無し）となるので、その点で上下のマージンを指定していない「margin-right: auto;とmargin-left: auto;」と異なるように思いますが？「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoを使用する場合、他方を使用することに比べてメリット及びデメリットはあるのでしょうか？ また、もしも、「margin-right: auto;とmargin-left: auto;」の代わりにmargin:0 autoを使用する場合、記述は以下で正しいのでしょうか？ ＜divタグをセンタリングしたい場合＞ CSSでは以下のように記述： div.center { width: 80%; margin:0 auto } 上記の記述で div.center { width: 80%; margin-right: auto; margin-left: auto; } と全く同じ表示になるのでしょうか？ ＜bodyタグをセンタリングしたい場合＞ CSSでは以下のように記述： body { width: 80%; margin:0 auto } 上記の記述で body { width: 80%; margin-right: auto; margin-left: auto; } と全く同じ表示になるのでしょうか？ ＜質問3＞ IE6又はそれ以前のIEは、「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoではDivタグをセンタリングできず、text-align: center;を使用する必要あったような記憶があります。IE7/8に加えてIE6又はそれ以前のIEにおいても<div class="center">文章等<div>をセンタリングしたい場合、どのような記述となりますか？ 以下のように「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoをtext-align: center;と同じ場所に記述する方法はうまくいかないようですが。私の記述方法が悪いだけですか？ { text-align: center; margin-right: auto; margin-left: auto; } 又は { text-align: center; margin:0 auto; } 関連サイト等あれば、そちらも教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
- 3カラムのレイアウト、及びdivの入れ子等
初めまして。 とても基本的なことでお恥ずかしいのですが、 3カラムのレイアウト、及びdivの入れ子等について、行き詰ってしまいました。 どうぞ宜しくお願い致します。 下記のように、3カラムの段組みレイアウトを行いました。 左・右のナビゲーションに、width:150pxで幅指定し、それぞれleft・rightにfloat、 中心部分（#contents）は、左右ナビゲーション分のマージンを設定して、真ん中に配置させる方法です。 HTMLでは、可変？させたい真ん中部分は、ナビゲーションの後に記述すること、とのことでしたので、そのように致しました。 ＜CSS＞ #contents { margin-left:155px; margin-right:155px; } #left { float:left; width:150px; } #right { float:right; width:150px; } ＜HTML＞ <div id="left>あああああああ</div> <div id="right">いいいいいいい</div> <div id="contents">ううううううう</div> ここまでは、問題なく配置させられたのですが、 【#contents】の中に、<div>や<ul>などを使用すると、画像（http://blog.goo.ne.jp/ray-chimin）のような現象が起きます。 ちなみに、【#left】のheightを長く伸ばすと、IEではキレイに並びましたが、firefox等では、やはり崩れます。 と言いましても、それは実験的に行った結果で、【#left】のheightを無駄に長く伸ばすことは避けたいです…(;ω;) そもそも、【#contents】の中の、「中身の並べ方」の考え方に問題があるのでしょうか…？ 可能な限りシンプルに、 正しいCSSの使い方でレイアウトしたいと考えております…！(>_<) divの不必要な多用？ （ひとつひとつの画像をdivの中に入れたり、 横並びのミニバナーを、divの中にdivを入れて…のような入れ子構造） は避けたいと思っておりましたが、 もしかして、それがいちばん正しいのでしょうか…？ ご存じの方、どうぞご指南の程宜しくお願い致します！ 散文、失礼いたしました！
- ベストアンサー
- HTML
- IEでだけ1つのDivがずれる。
現在スタイルシートを使ってレイアウトをしているのですが、 なぜかIEだけ一部のDIVのセンタリングがうまくいきません。 ヘッダー、メニューは共に中央揃えなのですが、その下のメインDIVのみ 10pxくらいだけ左側にずれます。Firefoxではきちんと揃って表示されています。 色々試したのですがどうしても解決方がわかりません。よろしくお願いします。 css body{ text-align: center; margin-top: 0px; margin-bottom: 0px; margin-left: auto; margin-right: auto; padding: 0px; } #header{ display: box; margin: 0px; padding: 10px 0px 15px 0px; background-image: url(header.gif); background-repeat: repeat-x; background-position: center bottom; } #header div{ width: 780px; display: box; margin-top: 0px; margin-bottom: 0px; margin-left: auto; margin-right: auto; padding:0px; } #menu { clear: both; margin: 0px; padding: 0px; background-image: url(menu-bg.gif); background-repeat: repeat-x; height: 50px; } .main{ clear: both; margin: 0px auto 0px auto; padding:0px; text-align: left; width: 780px; bottom: 0px; } #menu ul{ width: 780px; margin: 0px auto 0px auto; padding: 0px; height: 50px; overflow: hidden; } ヘッダー、メニュー共に、背景画像を画面いっぱい横並びにしたいため その内の要素のみをセンターに寄せる形にしています。 htmlでは上記のdiv(ヘッダー・メニュー・メイン)を縦に三つ並べています。
- ベストアンサー
- HTML
- 3カラムのカラム落ちについて質問です。
3カラムのカラム落ちについて質問です。 IE6だけ3カラムのうち右カラムだけカラム落ちしてなおりません。 ネットで検索して色々試した結果「clear: right;」を追加したら右に戻ったのですが、今度は隙間ができました。 <div id="wrap"> <div id="left">左カラム</div> <div id="left">メインカラム</div> <div id="left">右カラム</div> </div> という形です。 --CSS-- #wrap{ width: 970px; margin: 0 auto; background-color: #FFFFFF; height: 100%; min-height: 100%; position:relative; overflow: hidden; } #left{ width: 175px; margin: 15px 15px 0 15px; padding: 0; float: left; display: inline; } #contents{ width: 560px; float: right; margin-top: 15px; display: inline; clear: right; } #right{ width: 175px; margin: 15px; float: right; display: inline; clear: right; } です。 それぞれの中にはmargin やpaddingを使っています。 2日間それで悩まされていますができずに困っています。 IE6以外はすべて大丈夫なので、分かるかた教えてください。
- ベストアンサー
- ホームページ作成ソフト
- スマホで横並びdiv
お世話になっております。 スマートフォンでdivの横並びをしようとしたのですが、 <html> <head> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> </head> <body> <div style="height:30px;line-height:30px;width:100%;"> <div style="overflow:hidden;float:left;width:50px;">日付</div> <div style="overflow:hidden;float:left;">本文</div> </div> </body> とした場合、 本文が長いと日付の下に本文が来るようになってしまいます。 本文の末尾が消えてdivが横並びになるようにしたいのですが 良い方法はないでしょうか？ よろしくお願いします。 以上です。
- ベストアンサー
- CSS
- 外側のdivの高さを入れ子のdivの高さに自動的に合わせたい
外側のdivの高さを入れ子のdivの高さに自動的に合わせたい 添付画像のようなコンテンツを作成しています。 外側のdiv(contents_box）内にcontents_imgとcontents_textのdivを配置しています。 このcontents_imgとcontents_textの高さに合わせて外側のcontents_boxも自動的に変動させたいのですが、どのようにしたら良いのでしょう？ 高さをautoですとただの棒のようになってしまい、ダメでした。 どうぞよろしくお願い致します。 xhtml <div id="contents_box"> <div id="contents_img">ここに画像</div> <div id="contents_text"> ここにテキスト</div> </div> css #contents_box { height: auto; width: 805px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #333; } #contents_img { height: auto; width: 300px; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 0px; float: left; } #contents_text { height: auto; width: 485px; margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 10px; float: right; text-align: justify; }
- ベストアンサー
- HTML
- FireFoxで見るとdiv間に隙間が・・・
divを３つ使い、CSSで指定した背景画像によって一つのボックスを作っています。 ＩＥ６で見たときは異常ないのですが、FireFoxで見ると、 それぞれ隙間が開いてしまい、背景画像が途切れて見えます。 同じような使い方をしている箇所にすべて同じ事が起きています。 Firefoxではマージン0の状態でdivの間に隙間が出来てしまうのでしょうか？ 直す方法があればご指導よろしくお願い致します＞＜ <div id="medi-top"> </div> <div id="media"> <p>何行かにわたり、画像や文章が入力されています</p> </div> <div id="medi-bottom"></div> #medi-top { background-image: url(img/media_01.jpg); background-repeat: no-repeat; height: 50px; width: 680px; margin-top: auto; margin-right: auto; margin-bottom: 0px; margin-left: auto; line-height: 0; } #media { width: 600px; background-image: url(img/media_03.jpg); background-repeat: repeat-y; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-right: 40px; padding-left: 40px; } #medi-bottom { background-image: url(img/media_05.jpg); background-repeat: no-repeat; height: 35px; width: 680px; margin-top: 0px; margin-right: auto; margin-bottom: 50px; margin-left: auto; } 本や検索などで同じようなものを探して対処してみたのですが、 直らなかったため質問させていただきます。 よろしくお願い致します。
- ベストアンサー
- CSS
お礼
ORUKA1951さん、 html5.jsが重いと聞いていてhtml５でしか使えないタグは使いたくなかったので div、ol、liで細かく説明しもらってとても助かりました。 ol、liは使い勝手が良いんですね。 どうもありがとうございました。参考にさせてもらいます。
補足
ORUKA1951さん、 html5.jsが重いと聞いていてhtml５でしか使えないタグは使いたくなかったので div、ol、liで細かく説明しもらってとても助かりました。 ol、liは使い勝手が良いんですね。 どうもありがとうございました。参考にさせてもらいます。