- ベストアンサー
CSSでdiv要素を中央に配置する方法
- CSSを使用してdiv要素を中央に配置する方法について学びます。
- margin: 0 auto; という記述では中央に配置できない場合、margin-left: 100px; 等を試してみましょう。
- 例えば、.ngg-galleryoverviewクラスの幅を指定し、margin: 0 auto; を追加することで中央に配置することができます。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
下書きのほうをアップしちゃった メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ( http://jigsaw.w3.org/css-validator/#validate_by_input ) まず、HTMLをしっかり。 <body> <div class="header"> <h1>タイトル</h1> </div> <div class="section"> <h2>見出し</h2> <div class="section"> <h3>章見出し</h3> <p>全角スペースでインデントさせているのでHTMLソースの全角スペースはタブに戻すこと</p> </div> </div> <div class="footer"> <h2>文書情報</h2> </div> </body> のようなHTMLがあって、それぞれのブロック(header,section,footer)をウィンドウの80%幅にして中央配置したい場合は、 div.header,div.section,div.footer /* とグループ化して */ { width:80%; margin-top:0; margin-right:auto; margin-bottom:0; margin-left:auto; /* わかりやすいように枠と色をつけておく */ border-style:solid; border-width:1px; border-color:gray; background-color:silver; } とします。 これらは簡略化できるので div.header,div.section,div.footer{ width:80%; margin:0 auto; border:solid 1px gray; background-color:silver; } と書けます。 通常は、(スマホ対象に)最小幅と、(幅広ディスプレイ用の)最大幅も指定して div.header,div.section,div.footer{ width:80%;min-width:640px; max-width:800px; margin:0 auto; border:solid 1px gray; background-color:silver; } /* これでは、二階層目のdiv.sectionにも適用されますので */ div.section div.section{ margin:0 0 0 2em; min-width:0; border:none; } とかしておきます。 [スタイルシートの書き方] お分かりのように、どの要素に適用させるかはセレクタで記述します。このとき.[class名]という書き方はCSS1の名残で、CSS2.1では、[基点となるセレクタ].class名と言う風に書きます。.[class名]は*.[class名]と解釈されます。*は全称セレクタで詳細度は0。 div.headerとは、classのリストにheaderをもつdiv要素と言う意味で、タイプセレクタ(HTMLの要素のこと).(クラスセレクタ)クラス名ですし、 div.section div.section は、classリストのひとつにsetionを持つdiv要素の子孫のclassリストのひとつにsetionを持つdiv要素と言う意味です。 セレクタの書き方とカスケーディングの仕組みはプロパティより重要です。しっかり身につけること。プロパティはその後 ★セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html ) ★値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html ) [HTMLの書き方] 上記で例に挙げたHTMLソースは、『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』にしたがって、class名を記述しています。じつはHTML4.01のこの説明、実例もなくわかりにくく認知されなくて、HTML5ではその反省から「文書をよりよく構造化するために、次の要素が新しく追加されました。 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )」・・ ここを読まれると、どのようなclass名が良いかわかるでしょう。 [再びスタイルシートの書き方] スタイルシートは、それを元に「本文中の小項目については、字を一回り小さくする」なら div.section div.section{font-size:0.95em;} とか指定していきます。デザインのためにclass名をつけません。 .ngg-galleryoverview とか .ngg-galleryoverview .desc は論外です。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ( http://jigsaw.w3.org/css-validator/#validate_by_input ) まず、HTMLをしっかり。 上記で例に挙げたHTMLソースは、『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』にしたがって、class名を記述しています。じつはHTML4.01のこの説明、実例もなくわかりにくく認知されなくて、HTML5ではその反省から「文書をよりよく構造化するために、次の要素が新しく追加されました。 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」・・ ここを読まれると、どのようなclass名が良いかわかるでしょう。 スタイルシートは、それを元に「本文中の小項目については、字を一回り小さくする」なら div.section div.section{font-size:0.95em;} とか指定していきます。デザインのためにclass名をつけません。 .ngg-galleryoverview とか .ngg-galleryoverview .desc は論外です。
