質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.81%

  • CSS

    4993questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

style.cssについて「ボックスのスタイルを左右の幅をmargin: 0 auto;」で自動で中央に寄せたい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 66

 前提・実現したいこと

HPのボックスのマージンを、左右のマージンをautoに、上下を0にするスタイルにしたいです。
しかし、入力しても左寄せのまま変化がありません。
更新をし直しても変化が見られませんでした。

 発生している問題・エラーメッセージ

現在ボックススタイルについて下記の通りに入力したのですが変化が見られません。
以下、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>&copy; 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>&copy; 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;
 }
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yoshinavi

    2018/06/10 23:44

    ブロック要素は通常「margin: 0 auto;」で中央によりますが、他の要素で寄らない場合もありますので、関連するHTMLのコードも提示されると、より良い回答を得れると思います。

    キャンセル

  • chashubutabuta

    2018/06/11 01:24

    ありがとうございます。きちんとは反映されていると思われるabout.htmlと反映されていないindex.htmlを載せました。(fruit.html、vegetable.htmlも同じく反映されていないですが情報量の一番多いindex.htmlを載せれば問題ないと判断しました)

    キャンセル

  • yoshinavi

    2018/06/11 11:58

    「kei344」さんの回答にあるように、Googleのデベロッパーツール(IEやFFにもあります)を基本的な部分だけでも使えるようになると、解決への糸口と成る事が多々ありますので、チャレンジしてみてください。

    キャンセル

  • chashubutabuta

    2018/06/11 15:28

    ありがとうございます!解決に向けてチャレンジしてみます!

    キャンセル

回答 2

checkベストアンサー

+1

動くサンプル: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/11 01:29

    追記分について:
    クラス名が違いますよ。
    <div class="header box">
    ↓↓↓↓↓↓↓↓↓↓↓↓
    <div class="header_box">

    キャンセル

  • 2018/06/11 15:34

    ありがとうございます!
    クラス名の記載を見直しました。
    更に<div class>の括りの中に中央寄せにしたい項目を含めると中央寄せになりました!
    括りの中に含まれていないのに中央寄せになるわけないですよね。
    また一つ学びました!

    キャンセル

-1

margin:autoだけでは中央寄せにはなりません。

display:absolute;もしくはflexによる中央寄せが必要です。(現代はflexで中央寄せするのが主流です)

/* 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;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/10 22:11 編集

    早速ありがとうございます。
    今CSSを基礎から学んでいる者です。
    新たなワード「display:absolute;」「flex」が出てきたので、まずそこから調べていこうと思います。
    Bracketsというソフトウェアを使用して学んでいます。
    事前情報をもっと書くべきでした。
    すみません。追記です。
    1冊の本「ゼロからわかるHTML&CSS超入門」という本を読みながら進めているところでして・・・
    その中のP168に載っている「6、ボックスのマージンを設定する」というところで
    ーーーーーーーーーーーーーーーーーーーーーーー
    .header_box,.main_box,.footer_box{
    width: 1024px;
    }
    ボックスの横幅が定義されたので、このボックスの位置を定義するスタイル「margin: 0 auto;」を入力します。
    ボックスがブラウザの水平方向の中央に配置されるよう、左右のマージンをautoに、上下を0にするスタイルを追加記述します。
    ーーーーーーーーーーーーーーーーーーーーーーー
    と書いてあったので、その通りに入力をしたのですが左寄せのまま変化がありません。

    sagami1991さんが記述してくれた内容で自動で中央寄せになるか試してみます。

    キャンセル

  • 2018/06/11 00:55

    この回答誤りでした。てへぺろ

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.81%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • CSS

    4993questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • トップ
  • CSSに関する質問
  • style.cssについて「ボックスのスタイルを左右の幅をmargin: 0 auto;」で自動で中央に寄せたい