Q&A
「<th>タグの文章と同じ位置」が不明瞭です。「住所」の左端と「Googleマップ」の左端が揃うとしたら、縦位置は? 「住所」の上端と「Googleマップ」の上端が揃うとしたら、横位置は?
### 実現したいこと
<session>タグ内の<div>が一部反応しないのを直したい。
発生している問題・分からないこと
<session>タグ内にある[Googleマップ]のみCSSを反映せず、左よりに表記されてしまいます。正しくは<th>タグの文章と同じ位置に持っていきたいです。ご教授頂けますと幸いです。
該当のソースコード
HTML
1<body> 2 <div class="sub-cover cover-contact"> 3 <header class="page-header wrapper"> 4 <h1 class="align-center"> 5 <a href="singlcoloum.html"><img class="logo" src="images/WCBCafe/images/logo.svg" alt="WCBカフェホーム"</a> 6 </h1> 7 <nav> 8 <ul class="main-nav font-english"> 9 <li><a href="images/WCBCafe/news.html">News</a></li> 10 <li><a href="images/WCBCafe/menu.html">Menu</a></li> 11 <li><a href="images/WCBCafe/contact.html">Contact</a></li> 12 </ul> 13 </nav> 14 </header> 15 <h2 class="page-title font-english">Contact</h2> 16 </div> 17<mein class="wrapper"> 18 <section class="location"> 19 <div class="location-info"> 20 <h3 class="heading-medium font-english">Information</h3> 21 <table class="info"> 22 <tr> 23 <th>住所</th> 24 <td>東京都杉並区六本木0-0○◯○</td> 25 </tr> 26 <tr> 27 <th>電話</th> 28 <td>03-1111-xxxx</td> 29 </tr> 30 <tr> 31 <th>営業時間</th> 32 <td>10:00~22:00</td> 33 </tr> 34 <tr> 35 <th>店休日</th> 36 <td>水曜日</td> 37 </tr> 38 </table> 39 </div> 40 <div class="location-map">Googleマップ</div> 41 </section> 42 </mein> 43<footer class="page-footer"> 44 <h3 class="heading-large font-english">Information</h3> 45 <table class="info"> 46 <tr> 47 <th>住所</th> 48 <td>東京都杉並区六本木0-0○◯○</td> 49 </tr> 50 <tr> 51 <th>電話</th> 52 <td>03-1111-xxxx</td> 53 </tr> 54 <tr> 55 <th>営業時間</th> 56 <td>10:00~22:00</td> 57 </tr> 58 <tr> 59 <th>店休日</th> 60 <td>水曜日</td> 61 </tr> 62 </table> 63 <div class="copyright"> 64 <small>© 2010 WCBCafe</small> 65 </div> 66 </footer> 67</body>
CSS
1/* contact 2-------------------------*/ 3/* 店舗情報 */ 4.location{ 5 margin-bottom: 3.5rem; 6} 7.location-info{ 8 margin-bottom: 2rem; 9} 10.location-info .info{ 11 padding: 0; 12}
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
ソースコードを自分なりに書き換えても変化がありませんでした。
補足
特になし
> <session>タグ内にある[Googleマップ]のみCSSを反映せず、左よりに表記されてしまいます。
どのCSSがどんなふうに適用されて、どこに配置されることを意図していたのでしょうか？
お返事が遅くなり大変申し訳ございません。また質問の説明に不足があり申し訳ございません。文章だと言い表しにくいので写真を追加いたしました。現在ですと写真のように左側にマップが寄っている状態です。これをアンダーバーの下に持っていきたいです。まだまだ不足があるかと思いますがご教授頂けますと幸いです。
「Information」とテーブルは水平方向のセンタリングか右寄せなのでしょうか。質問文にあるスタイルシートではセンタリングにも右寄せにもならないですよね。必要な情報を隠していませんか。
これだけだと、全部左側に寄っています。
https://jsfiddle.net/t2z3oqv6/
ご指摘いただきありがとうございます。HTMLのbodyを全て追加いたしました。こちらでもまだ不足があるかと思いますがご教授頂けますと幸いです。
> こちらでもまだ不足があるかと思いますが
質問文にあるコードだけで問題を再現できるかどうか確認してください。
ご提示以外のCSSを指定していませんか？
回答1件
0
これを追加するとどうですか？
css
1.location-info .info { 2 padding: 0; 3 border-collapse: collapse; /* 追加 */ 4} 5 6.location-info .info :where(th, td) { /* 追加 */ 7 padding: 0; 8}
投稿2024/07/10 04:50
総合スコア36791
余計なアドバイスだと思いますが、ご容赦ください。
ブラウザがデフォルトでつけるマージンやパディングにお悩みでしたら、リセットCSSの使用を検討された方がいいかと思います。
https://coliss.com/articles/build-websites/operation/css/css-reset-for-modern-browser.html
ご教授頂きありがとうございます。お教え頂いたコードを入力してみましたが変化を得ることが出来ませんでした。現状どのようになっているか文でお伝えするのが難しかったので写真を追加いたしました。現在ですと写真のように左側にマップが寄っている状態です。これをアンダーバーの下に持っていきたいです。この写真でも不足があるかと思いますがご教授頂けますと幸いです。
ご提示のコードだけではメモのようになりませんので、ご提示いただいていない部分に原因があるかと思います。
ご指摘いただきありがとうございます。HTMLのbodyを全て追加いたしました。こちらでもまだ不足があるかと思いますがご教授頂けますと幸いです。
おそらく、CSSに問題があると思います。
コードをご提示される前に、その部分のコードだけで問題が再現するかどうかをご自身で確かめてみると話が早いかもしれませんね。
相手に問題点を伝えるだけで2日もかけるの、時間がもったいなくないですか？
あなたの回答
tips
プレビュー
