Q&A
ブロック要素は通常「margin: 0 auto;」で中央によりますが、他の要素で寄らない場合もありますので、関連するHTMLのコードも提示されると、より良い回答を得れると思います。
前提・実現したいこと
HPのボックスのマージンを、左右のマージンをautoに、上下を０にするスタイルにしたいです。
しかし、入力しても左寄せのまま変化がありません。
更新をし直しても変化が見られませんでした。
発生している問題・エラーメッセージ
現在ボックススタイルについて下記の通りに入力したのですが変化が見られません。
以下、index.html(反映されていないHTML、)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link href="css/style.css" rel="stylesheet"> <meta name="keywords" content="fruvege,オススメの果物をご紹介"> <meta name="description" content="フルーツ農園へ"> <title> フルーツのススメ </title> </head> <!--headここまで--> <body> <header> <div class="header box"> <h1><a href="index.html"><img src="images/logo_header.png" alt="fruvegeロゴ" width="240" height="55"></a></h1> <nav> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="fruit.html">フルーツ</a></li> <li><a href="vegetable.html">ベジタブル</a></li> <li><a href="about.html">fruvegeとは</a></li> </ul> </nav> <!--navここまで--> </div> </header> <!--ヘッダーここまで--> <main> <img src="images/key_v.png" alt="width=1024" height="480"> <h2>Welcom!! fruvege</h2> <p>フルーツと野菜のほんとうのおいしさを<br> みなさまにお届けする”fruvege”です。<br> <strong>自然の恵みを生かした生産方法</strong>で育てたフルーツとベジタブルを<br> みなさまにご提供いたします。</p> <div class="main box"> </div> </main> <!--メインここまで--> <footer> <div class="footer box"> <p><img src="images/logo_footer.png" alt="fruvegeロゴ" width="141" height="39"></p> <small>© 2017 fruvege Inc.</small> </div> </footer> <!--フッターここまで--> </body> </html>
以下、about.html(おそらくきちんと反映されているhtml)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link href="css/style.css" rel="stylesheet"> <title>fruvegeとは|fruvege</title> </head> <body> <header> <div class="header_box"> <h1><a href="index.html"><img src="images/logo_header.png" alt="フルベジロゴ" width="240" height="55"></a></h1> <nav> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="fruit.html">フルーツ</a></li> <li><a href="vegetable.html">ベジタブル</a></li> <li><a href="about.html">fruvegeとは</a></li> </ul> </nav> </div> </header> <!--ヘッダ-ーこまで--> <main> <div class="main_box"> <h2>about fruvege</h2> <section> <h3>fruvege情報</h3> <table> <tr><th>名称</th> <td>fruvege株式会社</td> </tr> <tr> <th>住所</th> <td>東京新宿区中新宿1-2-3</td> </tr> <tr> <th>電話</th> <td>03-1111-2222</td> </tr> <tr> <th>創立</th> <td>2007年4月</td> </tr> <tr> <th>資本金</th> <td>1億円</td> </tr> <tr> <th>営業時間</th> <td>11時から19時まで</td> </tr> <tr> <th>メールでのお問い合わせ</th> <td>お試し@gmail.com</td> </tr> </table> </section> <section> <h3>fruvegeCM</h3> <video src="images/cm.mp4" controls="controls"> </video> </section> </div> </main> <!--メインここまで--> <footer> <div class="footer_box"> <p><img src="images/logo_footer.png" alt="フルベジロゴ" width="141" height="39"></p> <small>© 2017 fruvege Inc.</small> </div> </footer> <!--フッーここまで--> </body> </html>
以下、style.CSSです。
@charset "utf-8"; html{ font-size: 16px; } body{ color: #666666; font-family: sans-serif; letter-spacing: 2px; margin: 0; min-width: 1024px; } h1{ margin: 0; } h2{ font-size: 3rem; font-family: Arial , sans-serif; color: #000000; border-left: 30px solid #d7391d ; border-radius: 10px 0 0 10px; padding-left: 10px; } strong{ font-weight: normal; color: #ee7600; } footer{ text-align: right; background-color: #486b0b; color: #ffffff; padding: 30px 0; } p{ line-height: 2; } header{ border-bottom: 5px dotted #d7301d ; padding: 30px 0; } main{ padding: 30px 0; } .header_box,.main_box,.footer_box{ width: 1024px; margin: 0 auto; } /* absoluteの場合 */ .parent { position:relative; } .child { positon: absolute; width: 1024px; margin: 0 auto; left: 0; right: 0; } /* flexの場合 */ .parent { display: flex; justify-content: center; } .child { width: 1024px; }
該当のソースコード
.header_box,.main_box,.footer_box{ width: 1024px; margin: 0 auto; }
試したこと
もしかしたら上下左右をそれぞれ設定してあげればなんとかなるのではと思い、下記のように書き換えて見ましたが変化は見られませんでした。
コロンやセミコロンの抜け、div要素の定義の記入の仕方が間違っている
.header_box,.main_box,.footer_box{ width: 1024px; margin: 0 auto 0 auto; }
ありがとうございます。きちんとは反映されていると思われるabout.htmlと反映されていないindex.htmlを載せました。（fruit.html、vegetable.htmlも同じく反映されていないですが情報量の一番多いindex.htmlを載せれば問題ないと判断しました）
「kei344」さんの回答にあるように、Googleのデベロッパーツール（IEやFFにもあります）を基本的な部分だけでも使えるようになると、解決への糸口と成る事が多々ありますので、チャレンジしてみてください。
ありがとうございます！解決に向けてチャレンジしてみます！
回答2件
0
ベストアンサー
動くサンプル：https://jsfiddle.net/dkcnurb9/
中央に寄っていますよ。画面幅が1024pxを超えないと寄っているかどうかがわからないと思います。
【開発者ツールを使おう！ カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/
【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01
【第1回 詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2
投稿2018/06/10 14:04
総合スコア69400
追記分について：
クラス名が違いますよ。
<div class="header box">
↓↓↓↓↓↓↓↓↓↓↓↓
<div class="header_box">
ありがとうございます！
クラス名の記載を見直しました。
更に<div class>の括りの中に中央寄せにしたい項目を含めると中央寄せになりました！
括りの中に含まれていないのに中央寄せになるわけないですよね。
また一つ学びました！
0
margin:autoだけでは中央寄せにはなりません。
display:absolute;もしくはflexによる中央寄せが必要です。（現代はflexで中央寄せするのが主流です）
css
1/* absoluteの場合 */ 2.parent { 3 position:relative; 4} 5.child { 6 positon: absolute; 7 width: 1024px; 8 margin: 0 auto; 9 left: 0; 10 right: 0; 11} 12 13 14/* flexの場合 */ 15.parent { 16 display: flex; 17 justify-content: center; 18} 19.child { 20 width: 1024px; 21} 22
投稿2018/06/10 12:35
総合スコア216
早速ありがとうございます。
今CSSを基礎から学んでいる者です。
新たなワード「display:absolute;」「flex」が出てきたので、まずそこから調べていこうと思います。
Bracketsというソフトウェアを使用して学んでいます。
事前情報をもっと書くべきでした。
すみません。追記です。
１冊の本「ゼロからわかるHTML＆CSS超入門」という本を読みながら進めているところでして・・・
その中のP168に載っている「６、ボックスのマージンを設定する」というところで
ーーーーーーーーーーーーーーーーーーーーーーー
.header_box,.main_box,.footer_box{
width: 1024px;
}
ボックスの横幅が定義されたので、このボックスの位置を定義するスタイル「margin: 0 auto;」を入力します。
ボックスがブラウザの水平方向の中央に配置されるよう、左右のマージンをautoに、上下を０にするスタイルを追加記述します。
ーーーーーーーーーーーーーーーーーーーーーーー
と書いてあったので、その通りに入力をしたのですが左寄せのまま変化がありません。
sagami1991さんが記述してくれた内容で自動で中央寄せになるか試してみます。
この回答誤りでした。てへぺろ
あなたの回答
tips
プレビュー
