Q&A
HTMLをご提示ください。
実現したいこと
テキスト右下図のようにコンテンツ部分を中央寄せにしたい
発生している問題・分からないこと
テキスト通りにコードを書いているつもりが、結果が反映されずに上図のような表示になってしまう。
どこが間違えているのかが分からない。
該当のソースコード
.innerWrap { border: 4px solid lightblue; width: 1240px; margin: 0 auto; padding: 80px 20px 0; }
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
html/cssの初歩的なミスを検索しつつ見直しましたが、改善はできませんでした。
補足
超初学者の為、質問の仕方等到らぬところもあると思いますがどうぞよろしくお願い致します。
【追記】
長いかもです よろしくお願いします
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/reset.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Sawarabi+Mincho&display=swap">
<link rel="stylesheet" href="css/style.css">
<title>Wedding Party Invitation</title>
</head>
<body>
<header>
<div class="innerWrap">
<h1>
<img src="images/hero_text.png" alt="Welcome to Our Wedding Party">
</h1>
<nav>
<ul class="ffJosefin">
<li><a href="#msgArea">Message</a></li>
<li><a href="#dateArea">Date</a></li>
<li><a href="#formArea">Form</a></li>
</ul>
</nav>
<p class="scroll ffJosefin">Scroll<br><img src="images/bar.png" alt=""></p>
</div>
</header>
<main>
<section class="msgSec" id="msgArea">
<div class="innerWrap">
<h2 class="ffJosefin">Message</h2>
<p>
この度、カピぞうとカピ子は<br>
ウェディングパーティーを開催することとなりました。<br>
</p>
<p>
お忙しいとは思いますが、ご参加いただけたら嬉しいです。<br>
ご出欠のお知らせは、ページ下のフォームよりお願い申し上げます。<br>
</p>
<p class="illust"><img src="images/message_img.png" alt="カピぞうとカピ子"></p>
</div>
</section>
<section class="dateSec" id="dateArea">
<div class="innerWrap">
<h2 class="ffJosefin">Save the Date</h2>
<p><img src="images/date_img.jpg" alt=""></p>
<p class="dateDetailSec">
3022.8.8 Thu<br>
Start 18:30-
</p>
<section class="accessSec">
<h3 class="ffJosefin">Access</h3>
<p>
レンガ街ストリート1-2-3<br>
Ristorante Capita にて<br>
03-XXXX-XXXX<br>
</p>
</section>
</div>
</section>
<section class="formSec" id="formArea">
<div class="innerWrap">
<h2 class="ffJosefin">RSVP</h2>
<form action="" method="">
<p class="attendRadio">
<label><input type="radio" name="attend" value="ご出席" checked="checked">ご出席</label>
<label><input type="radio" name="attend" value="ご欠席">ご欠席</label>
</p>
<p>
お名前<input type="text" name="user_name">
</p>
<p>
メールアドレス<input type="email" name="user_mail">
</p>
<p>
ご自身のタイプ
<select name="user_type">
<option value="草食動物">草食動物</option>
<option value="肉食動物">肉食動物</option>
<option value="人間さん">人間さん</option>
</select>
</p>
<p class="allergyCheck">
アレルギーのある食べ物<br>
<label><input type="checkbox" name="allergy" value="卵">卵</label>
<label><input type="checkbox" name="allergy" value="乳">乳</label>
<label><input type="checkbox" name="allergy" value="小麦">小麦</label>
<label><input type="checkbox" name="allergy" value="大豆">大豆</label>
</p>
<p>
メッセージ
<textarea name="message"></textarea>
</p>
<p class="submitBtn">
<input type="submit" value="Send" class="ffJosefin">
</p>
</form>
</div>
</section>
</main>
<footer class="ffJosefin">
<p><small>© Capyzou ＆ Capyco</small></p>
</footer>
</body>
</html>
上図のような表示になってしまうのは、4つのうちどれですか？
全部です泣
質問は編集できますので、HTMLコードは質問に追記してください。
CSSコード自体には問題なさそうですが、提示以外の部分のCSSコードは反映されてますか。
＞質問は編集できますので、HTMLコードは質問に追記してください。
了解しました！
はい、反映されています。下記が全部です。
@charset "utf-8";
body {
font-family: 'Sawarabi Mincho' , serif;
font-size: 18px;
color: #121212;
}
.ffJosefin {
font-family: 'Josefin Sans' ,'sans-serif';
}
.innerWrap {
border: 4px solid lightblue;
width: 1240px;
margin: 0 auto;
padding: 80px 20px 0;
}
ページ幅を1240px以上にして確認してますか。
現状のスクリーンショットをアップしてもらえますか。
ご提示のコードをこちらで試したところ、問題は起きませんでした。
ご提示いただいていない部分に原因がありそうです。
ぺージ幅を変更しても変化はありませんでした
補足にスクショを追加しました！
回答にも書きましたが（参考書にもそうなっていますが）、1240の幅を保ちながら画面上にセンタリングされています。ブラウザの幅をぐーっと引き延ばせばセンタリングされていることが確認できるはずです。またわかりやすくするにはinnerWrap自体の幅を狭くすることです。（回答に追記してあります）
ブラウザ全画面表示にしてこの結果になってしまっていたのですが、ご回答の追記方法を試してみたらきちんと反映されました！
ここからは自分で調節できそうです
皆様ありがとうございました！！
回答1件
0
ベストアンサー
参考書の書き方が悪いんでしょうね。
innerWrapクラスにmargin autoしても中身はセンタリングされません。
innerWrapクラス要素自体がセンタリングされるということです。
つまりページの幅がかりに3000pxあれば1240幅のinnerWrapクラス要素がその幅を保ったままセンタリングされるということです。
参考
innerWrapクラスの幅を調整するというのはこういうことです
html
1<style> 2.innerWrap { 3 border: 4px solid lightblue; 4 width: fit-content; 5 margin: 0 auto; 6 padding: 80px 20px 0; 7} 8</style> 9<div class="innerWrap"> 10<h1> 11<img src="#" alt="Welcome to Our Wedding Party"> 12</h1> 13<nav> 14<ul class="ffJosefin"> 15<li><a href="#msgArea">Message</a></li> 16<li><a href="#dateArea">Date</a></li> 17<li><a href="#formArea">Form</a></li> 18</ul> 19</nav> 20<p class="scroll ffJosefin">Scroll<br><img src="#" alt="bar"></p> 21</div>
投稿2025/05/15 00:25
編集2025/05/15 01:06総合スコア117726
あなたの回答
tips
プレビュー
