- ベストアンサー
CSSのdivでボックスセンタリングができない
- CSSのdivでボックスセンタリングができない原因や対処方法を説明します。
- HTMLの記述方法やCSSのプロパティをチェックしましょう。
- ナビゲーションのみがセンタリングされる原因についても考えてみましょう。
- thanksv
- お礼率97% (689/704)
- ホームページ作成ソフト
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
スタイルシートの一部を div.header,div.section,div.footer{width:85%;min-width:600px;margin:0 auto;} ↓max-widthを追加 div.header,div.section,div.footer{width:85%;min-width:600px;max-width:950px;margin:0 auto;} したほうが良いでしょう。 別途用意する画像./imagesホルダに入れる index_r2_c2.gif width="850" height="79" index_r5_c6.jpg width="198" height="129" index_r4_c3.gif width="110" height="92" 画像名は、ファイル名を見ただけで内容が分かるようなものをつけないと後で困ります。 [例]2013_Mar_hanami_shugou.jpg とかね。 スタイルシートは、./styleSheet2フォルダーに standard.css という名称で入れる。下記のふたつのスタイルシートもそれぞれの名前で入れて、HTMLを下記のように変更する。 これでブラウザの表示メニューから[スタイルシート]で反転を選択すると、HTMLはそのままでデザインが変わります。好きなだけ様々なスタイルが指定できます。 ★大事なことは、デザインをイメージしたら、fireworksにしろdreamweverにしろIlustltorにしろ、スライスで切り取ったとしても、それはそれぞれを要素にしてしまう事です。 将来、どのようにデザインを変更しようとHTMLを触る必要はありませんし、HTML自体もスタイルシートを気にせず編集が出来ます。そして何よりも、HTMLもスタイルシートも簡潔で分かりやすくなりますし、検索エンジンもページの内容を正確に理解してくれます(SEO)から、多くの人に利用してもらえるでしょう。聴覚障害者がスクリーンリーダーを用いて読み上げさせても、点字端末で点字出力しても、視覚弱者が「スタイルシートを使用しない」表示をさせても・・ <link rel="stylesheet" type="text/css" media="screen" href="./styleSheet2/standard.css"> ↓変更 <link rel="stylesheet" type="text/css" href="./styleSheet2/default.css"> <link rel="stylesheet" type="text/css" media="screen" href="./styleSheet2/standard.css" title="標準"> <link rel="Alternate StyleSheet" type="text/css" media="screen" href="./styleSheet2/reversal.css" title="反転"> [default.css] @charset "UTF-8"; html,body{margin:0;padding:0;} p{text-indent:1em;} h1,h2,h3,p{margin:0;line-height:1.6em;} h1{text-align:center;} [reversal.css] @charset "UTF-8"; body{background-color:black;} a:link{color:red;} a:visited{color:maroon;} a:active{color:red;} div.header,div.section,div.footer{ width:90%;min-width:480px;max-width:950px;margin:0 auto; background-color:navy;color:white;} div.header h1{text-align:center;margin-top:40px;} div.header h1 img{display:block;width:100%;height:auto;} div.header div.nav ol,div.header div.nav ol li, div.contentTable ol,div.contentTable ol li{ display:block;list-style:none; margin:0;padding:0; text-align:center; } div.header div.nav{ position:fixed;top:0;left:0; width:100%;line-height:40px; z-index:100; } div.header div.nav ol{ width:90%;height:46px;min-width:480px;max-width:950px;margin:0 auto; background-color:navy; } div.header div.nav ol li{ display:inline-block; width:20%; } div.header div.nav ol li a{ display:block;width:100%;height:100%; border:outset 3px navy; text-decoration:none;background-color:blue;color:white; font-size:30px;font-weight:bold; } div.header div.nav ol li a:hover{ background-color:aqua; color:black; } div.header div.nav ol li a:active{ border-style:inset; } div.section{position:relative;} div.section h2,div.section div.section{ margin:0 180px 0 10px; background-color:transparent; } div.section div.section h3,div.section div.section p{ margin:0 1em; } div.section div.section{ min-height:100px; min-width:0; width:auto; clear:right; } div.section div.section:after{ content:""; clear:left; display:block; } div.section div.section p.figure{ text-indent:0;text-align:center; width:205px;height:135px; float:left; padding:5px; background-color:white; margin:20px 10px; } div.section div.aside{ position:absolute; top:10px;right:0; width:160px;height:100%; line-height:40px; text-align:center; } div.contentTable ol li{line-height:40px;} div.contentTable a{ display:block; text-decoration:none; background-color:blue; width:120px; height:40px; margin:5px auto; border-radius:5px; } div.aside form{display:block;line-height:1.6em;margin-top:30px;border-top:solid 3px white;padding-top:10px;}
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
こちらはスタイルシートです。文字コードは同じくUTF-8です。 ★ウィンドウ幅600px以上なら表示され、広いウィンドウでは中央に表示されます。 スマホでも幅広ディスプレイでも利用できます。もちろんスクリーンリーダーや点字端末、携帯電話でも利用できますし、印刷だとシンプルに ★HTMLにはデザイン要素はありませんから、HTMLに手を加えることなく、まったく異なるデザインに出来ます。 せっかくの高価なCS6、そのままでは宝の持ち腐れどころか、角をためて牛を殺すことになりかねません。オーサリングツールを使えば、HTMLやCSSを知らなくてもウェブページが作れる(と言っているホームぺじビルダーのような糞もありますが）、DreamWeaver7 Fireworksは、そんな誇大広告は言ってません。ウェブオーサリングツールをうまく使うためには、テキストエディタでウェブページが作成できる人以上に、HTMLやCSSの知識が必要なのですよ。 一度、基本から学んでください。そのほうがはるかに早道です。 @charset "UTF-8"; html,body{margin:0;padding:0;} p{text-indent:1em;} div.header,div.section,div.footer{width:85%;min-width:600px;margin:0 auto;} h1,h2,p{margin:0;line-height:1.6em;} h1{text-align:center;} div.header h1 img{display:block;width:100%;height:auto;} div.header div.nav{margin:40px 0;} div.header div.nav ol,div.header div.nav ol li, div.contentTable ol,div.contentTable ol li{ display:block;list-style:none; margin:0;padding:0; text-align:center; } div.header div.nav ol li{ display:inline-block; width:15%; margin:0 3%; line-height:28px; } div.header div.nav ol li a{ display:block;width:100%;height:100%; text-decoration:none;background-color:blue;color:white; } div.section{position:relative;} div.section h2,div.section div.section{ margin:0 0 0 180px; background-color:orange; } div.section div.section h3,div.section div.section p{ margin:0 1em; } div.section div.section{ min-height:100px; min-width:0; width:auto; clear:right; } div.section div.section:after{ content:""; clear:right; display:block; } div.section div.section p.figure{ text-indent:0;text-align:center; width:205px;height:135px; float:right; background-color:white; padding:5px; margin:20px 10px; } div.section div.aside{ position:absolute; top:0;left:0; width:160px;height:100%; background-color:orange; line-height:40px; text-align:center; } div.contentTable ol li{line-height:40px;} div.contentTable a{ display:block; text-decoration:none; background-color:rgb(255,128,0); width:120px; height:40px; margin:5px auto; border-radius:5px; } div.aside form{display:block;line-height:1.6em;position:absolute;bottom:10px;}
お礼
ご回答、ありがとうございます。大変参考になりました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
最初に基本的な問題点を指摘しておきます。 HTML4.01の仕様書の ⇒14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )の項目に ・テキストを画像に置き換えて表現する。 ・余白制御のために画像を用いる。 ・ページレイアウトの目的で表を用いる。 ・HTMLでページを作らずにプログラムに頼る。 指摘されている、これらすべての問題のある典型的な例になってしまっています。 ★とても大事なところなので読んでおくこと(必須!!) DreamWeabverにしろfireworksにしろ、とても優れたオーサリングツールですが、HTMLやCSSを知らないと、テキストエディタで作成する場合よりも酷いものを作ってしまいます。 簡単なサンプルをあげておきます。 ★HTMLには、文書構造だけ書きます。文章を書いては適当な要素で括る。なければ文書構造を保管する目的でdivやspanをidやclass名をつけて使います。 この状態で、HTML Lintなどを使ってチェックしておきます。正しくかけていないとスタイルシートでデザインしてもブラウザ間で異なったりします。 ★HTML4.01strictで文字コードUTF-8で記述してあります。 ★タブは＿に置換してあるので戻すこと。 ★スタイルシートなしで素のHTMLの確認をする。 上記、Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )で、右上のDATAタブをクリックして書きあがったHTMLをペーストしてチェックします。 <!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=UTF-8"> ＿<title>Je suis delisieux ラウンドトリップ更新</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"> ＿<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet2/standard.css"> </head> <body> ＿<div class="header"> ＿＿<h1><img src="./images/index_r2_c2.gif" width="850" height="79" alt="Je suis delisieux ラウンドトリップ更新"></h1> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="/">Home</a></li> ＿＿＿＿<li><a href="./news">News</a></li> ＿＿＿＿<li><a href="./photo">Photo</a></li> ＿＿＿＿<li><a href="./about">About</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<div class="section" id="APR"> ＿＿＿<h2>This Month PicUp</h2> ＿＿＿<p class="figure"><img src="./images/index_r5_c6.jpg" width="198" height="129" alt="入学式"></p> ＿＿＿<p>テキストルールを選択し、テキストエリアにテキストを入力して、フォントやサイズなどの書式を設定します。</p> ＿＿</div> ＿＿<div class="section" id="MAR"> ＿＿＿<h2>This Month PicUp</h2> ＿＿＿<p class="figure"><img src="./images/index_r5_c6.jpg" width="198" height="129" alt="花見"></p> ＿＿＿<p>テキストルールを選択し、テキストエリアにテキストを入力して、フォントやサイズなどの書式を設定します。</p> ＿＿</div> ＿＿<div class="section" id="FEB"> ＿＿＿<p class="figure"><img src="./images/index_r5_c6.jpg" width="198" height="129" alt="節分"></p> ＿＿＿<h2>This Month PicUp</h2> ＿＿＿<p>テキストルールを選択し、テキストエリアにテキストを入力して、フォントやサイズなどの書式を設定します。</p> ＿＿</div> ＿＿<div class="section" id="JAN"> ＿＿＿<h2>This Month PicUp</h2> ＿＿＿<p class="figure"><img src="./images/index_r5_c6.jpg" width="198" height="129" alt="山登り"></p> ＿＿＿<p>略</p> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<div class="contentTable"> ＿＿＿＿<h3><img src="./images/index_r4_c3.gif" width="110" height="92" alt="目次"></h3> ＿＿＿＿<ol> ＿＿＿＿＿<li><a href="#APR">四月</a></li> ＿＿＿＿＿<li><a href="#MAR">三月</a></li> ＿＿＿＿＿<li><a href="#FEB">二月</a></li> ＿＿＿＿＿<li><a href="#JAN">一月</a></li> ＿＿＿＿</ol> ＿＿＿</div> ＿＿＿<form action="./"> ＿＿＿＿<div class="form"> ＿＿＿＿＿<input type="text" name="mail" size="20" value=""> ＿＿＿＿＿<input type="submit" value="送信"> ＿＿＿＿</div> ＿＿＿</form> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
お礼
ご回答、ありがとうございます。大変参考になりました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
折角のCS6が役立ってません。 今晩にでもサンプルあげて起きます。 とりあえず ⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html ) でそれをチェックしてみてください。
お礼
ご回答、ありがとうございます。大変参考になりました。
- outbrave
- ベストアンサー率60% (231/380)
#contena はセンタリングされています、border:solid 1px #f00; でも入れて確認してください。 問題は position を使っているから基準が #contena の中ではなくなっていること。 position を使わず、padding か margin で余白を調整すればいいです。 また、id や class 名は、a ～ z で始まる半角英数でなければなりませんので、修正してください。
お礼
ご回答、ありがとうございます。大変参考になりました。
お礼
実に詳しいご回答、ありがとうございます。 とても参考になりました。