🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

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

Q&A

解決済

1回答

946閲覧

中央配置(margin:0 auto;)が効きません。

manmaru

総合スコア31

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

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

0グッド

0クリップ

投稿2019/09/15 17:02

添付写真(全体像)の下部にある、google mapボタンと交通手段の画像が左に寄ってしまう問題です。

上のマップはmargin:0-auto;で中央配置できたのですが、下部は左寄りのままです。
青マーカーのようにガタンとなってるのをまっすぐに上と左右幅をきっちり合わせたいです。
イメージ説明

googleボタンと交通手段画像を包んでるdiv( class="access_map" )をmargin:0-auto;したのですが、
そもそも"access_map"は全体画像の赤線いっぱいまで要素の幅があって、当然margin0-autoしたところで
なんも変わらない状態です。
その子要素のgoogleボタンと交通数手段画像に余計なpaddingもmarginも入っておらず、
どうやったら中央配置できるのか分からず困っています。
イメージ説明

該当ページのphpとcssコードはすべて掲載いたします。

php

1<?php get_header(); ?> 2<div class="container"> 3 <div class="row"> 4 <div class="col-lg-12"> 5 <nav> 6 <h1 class="page-header"></h1> 7 <ol class="breadcrumb"> 8 <li><a href="<?php echo home_url('/'); ?>">Home</a></li> 9 <li class="active"><?php the_title(); ?></li> 10 </ol> 11 </nav> 12 </div> 13 </div> 14 <div id="access"> 15 <div class="hrm-block-row"> 16 <div class="hrm-block3"> 17 <div class="hrm-block3__row mb15"> 18 <div class="hrm-heading3"> 19 </div><!-- /.hrm-head.ing3 --> 20 <h2>山の川温泉</h2><br> 21 <h3>住所:〒413-0033 静岡県熱海市熱海1993-237<br>Tel:0557-52-3301</h3> 22 </div><!-- /.hrm-block3__row --> 23 <div class="hrm-block-gmap"> 24 <div class="hrm-block-gmap__map"><img src="<?php echo get_template_directory_uri(); ?>/images/map.jpg" alt=""></div> 25 </div><!-- /.hrm-block-gmap --> 26 <div class="access_map"> 27 <div class="googlemap_box"> 28 <p class="googlemap"><a href="https://www.google.co.jp/maps/place/%E3%80%92413-0033+%E9%9D%99%E5%B2%A1%E7%9C%8C%E7%86%B1%E6%B5%B7%E5%B8%82%E7%86%B1%E6%B5%B7%EF%BC%91%EF%BC%99%EF%BC%99%EF%BC%93%E2%88%92%EF%BC%92%EF%BC%93%EF%BC%97/@35.0844308,139.0751014,17z/data=!3m1!4b1!4m5!3m4!1s0x6019be572e540051:0x7d272addca4403fd!8m2!3d35.0844308!4d139.0772901" target="_blank" class="hrm-button4">Google Mapで見る<i class="hrm-icon-map"></i></a></p> 29 </div> 30 <div class="tab_wrap"> 31 <input id="tab1" type="radio" name="tab_btn" checked> 32 <input id="tab2" type="radio" name="tab_btn"> 33 <input id="tab3" type="radio" name="tab_btn"> 34 <div class="tab_area"> 35 <label class="tab1_label" for="tab1"><div class="button1">車でお越しの方</div></label> 36 <label class="tab2_label" for="tab2"><div class="button2">電車でお越しの方</div></label> 37 <label class="tab3_label" for="tab3"><div class="button3">飛行機でお越しの方</div></label> 38 </div> 39 <div class="panel_area"> 40 <div id="panel1" class="tab_panel"> 41 <img src="<?php echo get_template_directory_uri(); ?>/images/access_car.png" alt="car"> 42 </div> 43 <div id="panel2" class="tab_panel"> 44 <img src="<?php echo get_template_directory_uri(); ?>/images/access_train.png" alt="train"> 45 </div> 46 <div id="panel3" class="tab_panel"> 47 <img src="<?php echo get_template_directory_uri(); ?>/images/access_air_plane.png" alt="plane"> 48 </div> 49 </div> 50 </div> 51 </div> 52 </div><!-- /.hrm-block3 --> 53 </div><!-- /.hrm-block-row --> 54 </div> 55</div> 56<?php get_footer(); ?>

css

1/* ------------------------------------------------- * 2 * アクセスページ 3 * ------------------------------------------------- */ 4 #access { 5 margin: 0 auto ; 6 text-align: center ; 7} 8.hrm-block3__row h2, h3 { 9 text-align: left; 10} 11.hrm-block3__row h3 { 12 margin-top: 0 !important; 13 margin-bottom: 2.5rem !important; 14} 15.hrm-block3__row h2 { 16 margin-bottom: 0 !important; 17} 18.googlemap, .tab_wrap { 19 display: inline-block !important; 20} 21.access_map { 22 margin: 0 auto; 23} 24.tab_wrap{width:500px; margin:80px auto;} 25input[type="radio"]{display:none;} 26.tab_area{font-size:0; margin:0 10px;} 27.tab_area label{width:200px; height: 50px; margin:0 5px; display:inline-block;color:#333; border:solid 1px grey; border-bottom: none; background:white; text-align:center; font-size:13px; cursor:pointer; transition:ease 0.2s opacity;} 28.panel_area{background:#fff;} 29.panel_area img{ border:solid 1px grey;} 30.tab_panel{width:100%; display:none;} 31.tab_panel p{font-size:14px; letter-spacing:1px; text-align:center;} 32.button1, .button2, .button3 { 33 width: 100%; 34 height: 50px; 35 margin: auto; 36 line-height: 50px; 37} 38/*交通手段画像 ボタンアクティブ時の色変更*/ 39#tab1:checked ~ .tab_area .tab1_label > .button1, #tab2:checked ~ .tab_area .tab2_label > .button2, #tab3:checked ~ .tab_area .tab3_label > .button3 { 40 background-color: #d3d3d3; 41} 42#tab1:checked ~ .tab_area .tab1_label{background:#fff; color:#000;} 43#tab1:checked ~ .panel_area #panel1{display:block;} 44#tab2:checked ~ .tab_area .tab2_label{background:#fff; color:#000;} 45#tab2:checked ~ .panel_area #panel2{display:block;} 46#tab3:checked ~ .tab_area .tab3_label{background:#fff; color:#000;} 47#tab3:checked ~ .panel_area #panel3{display:block;} 48 49 50.access { 51 width: 980px; 52 margin: 0 auto !important; 53} 54.googlemap { 55 border: solid 1px grey; 56 width: 220px; 57 padding: 30px; 58 text-align: center; 59} 60.googlemap:hover { 61 background-color: #BEFF15; 62} 63.googlemap img { 64 width: 100%; 65 height: auto; 66} 67.googlemap a { 68 text-decoration: none; 69 color:#333; 70} 71.googlemap a:hover { 72 text-decoration: none; 73 color:#333; 74} 75.access_map { 76 overflow: hidden; 77} 78.googlemap_box { 79 float: left; 80 width: 215px; 81 margin: 80px 0; 82} 83.tab_wrap { 84 float: left; 85 width: 760px; 86 padding-left: 3rem; 87}

何卒ご教示頂きたく、宜しくお願い申し上げます。

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

.access_map にその上に配置されてる画像と同じ幅のwidthを設定すれば良いのではないでしょうか?

投稿2019/09/15 20:37

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

manmaru

2019/09/16 05:59

その通りでした。 初歩的なミスですみません。。 大変助かりました、ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問