Q&A
どこにズレがあるのか明記をお願いします。
下記コードで作成しているのですが、CSSでtext-alignを指定すると中心に移動はするのですが、左右で若干のズレが出てしまいます。
コードを見返しても分からずです、、、
解決策わかる方いらっしゃったらご教授お願いします。
ページ全体が左によっています。
特にわかりやすいのはメインビジュアルが左にズれています。
目視で目立ってズレているわけではありませんがよくみると気になります。
HTML <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" charset="utf-8"> <title>Next Revolution</title> <meta name="description" content=""> <meta name="keywords" content=""> <link rel="stylesheet" href="public/css/company.css"> <link rel="stylesheet" href="public/css/header_footer.css"> </head> <body> <!--header--> <header> <div class="header-main"> <div class="logo-left"> <a href="index.html">Next Revolution</a> </div> <div class="header-right"> <ul class="global-menu"> <li><a href="">わたしたちについて </a></li><span>   /</span> <li><a href="">HP・ランディングページ制作</a></li><span>   /</span> <li><a href="">PPC広告・WEB広告</a></li><span>   /</span> <li><a href="">SNS運用</a></li><span>   /</span> <li><a href="">ブランディング</a></li><span>   /</span> <li><a href="">利益以上に大切なこと </a></li><span>   /</span> <li><a href="">マーケティング研修</a></li> <li class="cv"> <a href="">問い合わせ</a></li> </ul> </div> </div> </header> <!--トップ--> <div class="top-section"> <div class="top-catch"> <ul> <li class="top-left"><h3>“</h3></li> <li><h1>終着点は重要じゃない。<br> 旅の途中でどれだけ楽しいことをやり遂げているかが大事なんだ。</h1></li> <li><h4>- スティーブ・ジョブズ -</h4></li> <li class="top-right"><h3>„</h3></li> </ul> </div> </div> <!--企業理念--> <div class="philosophy-section"> <div class="philosophy-box"> <ul> <li class="philosophy-box-img"><h1>Next Revolution</h1> <li class="philosophy-box-tit"><h3>わたしたちの考える【終着点】</h3></li> <li class="philosophy-box-text"><p>わたしたちの終着点は、自分自身の生活に豊かさを求めること。<br>わたしたちの求める豊かさとは、経済的な豊かさだけでなく、終着点に向かう旅の途中で<br>「他者のために向き合い」「他者のために尽力し」「他者の豊かさに貢献できたか」<br>これをどれだけ楽しみ、やり遂げられているかがわたしたちの求める豊かさです。</p></li> </ul> </div> </div> <!--考え方--> <div class="thinking-section"> <div class="thinking-box"> <div class="thinking-box-item"> <ul> <li class="thinking-box-tit"><h2>When<br><span>“企業が求めている時”</span></h2></li> <li class="thinking-box-text">ダミーテキストですダミーテキスですダミーテキストです</li> </ul> </div> <div class="thinking-box-item"> <ul> <li class="thinking-box-tit"><h2>Where<br><span>“場所を選ばす”</span></h2></li> <li class="thinking-box-text">ダミーテキダミーテキストです</li> </ul> </div> <div class="thinking-box-item"> <ul> <li class="thinking-box-tit"><h2>Who<br><span>“わたしたちが”</span></h2></li> <li class="thinking-box-text">ダミーテキストです</li> </ul> </div> <div class="thinking-box-item"> <ul> <li class="thinking-box-tit"><h2>What<br><span>“最高の結果を”</span></h2></li> <li class="thinking-box-text">すダミーテキストです</li> </ul> </div> <div class="thinking-box-item"> <ul> <li class="thinking-box-tit"><h2>Why<br><span>“求める終着点の為に”</span></h2></li> <li class="thinking-box-text">す</li> </ul> </div> <div class="thinking-box-item"> <ul> <li class="thinking-box-tit"><h2>How<br><span>“戦略立案します”</span></h2></li> <li class="thinking-box-text">ダミーテキストですダミーテキストですダミーテキストですダミーテキストです</li> </ul> </div> </div> </div> <!--メッセージ--> <div class="corporate-message"> <div class="corporate-message-box"> <div class="corporate-title">CORPORETA-MESSAGE</div> <div class="corporate-message-box-item"> <ul> <li class="corporate-catch"><h4>初めまして、NextRevolutionの細江です。</h4></li> <li class="corporate-text">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</li> </ul> <div class="corporate-pic"><img src="public/img/company/top-pic.png" alt=""></div> </div> </div> </div> <!--会社概要--> <div class="company-section"> <div class="company-box"> <div class="company-item"> <ul> <li class="right">社名<br><span>Company Name</span></li> <li>Next Revolution</li> </ul> </div> <div class="company-item"> <ul> <li class="right">代表<br><span>President</span></li> <li></li> </ul> </div> <div class="company-item"> <ul> <li class="right">顧問弁護士事務所<br><span>Consulting Lawyer</span></li> <li>ーーーーーーー</li> </ul> </div> <div class="company-item"> <ul> <li class="right">設立<br><span>Establish</span></li> <li>1922年3月22日</li> </ul> </div> <div class="company-item"> <ul> <li class="right">資本金<br><span>Capital</span></li> <li>000,000円</li> </ul> </div> <div class="company-item"> <ul> <li class="right">従業員数<br><span>Employee Number</span></li> <li>1名(2021年現在)</li> </ul> </div> <div class="company-item"> <ul> <li class="right">所在地<br><span>Address</span></li> <li>愛知県名古屋市</li> </ul> </div> <div class="company-item"> <ul> <li class="right">連絡先<br><span>Tel/Fax</span></li> <li>TEL:000-000-0000<br>FAX:000-000-0000</li> </ul> </div> <div class="company-item"> <ul> <li class="right">事業内容<br><span>Works</span></li> <li>・広告<br>・制作<br>・運用</li> </ul> </div> </div> </div> <!--フッター--> <footer> <div class="contact-box"> <div class="contact-title">制作・運用・お悩みなど<br>ご相談お待ちしております。</div> <div class="contact-mail"> <a href="">メールでお問い合わせ<img src="public/img/top/mail.jpg" alt=""></a> </div> <div class="contact-zoom"> <a href="">オンラインで相談<br><span>Zoomにて対応</span><img src="public/img/top/DL.jpg" alt=""></a> </div> <div class="contact-dl"> <a href="">資料・料金表<br><span>ダウンロード</span><img src="public/img/top/DL.jpg" alt=""></a> </div> </div> <div class="footer-main"> <div class="footerlogo-left"> <img src="public/img/top/NextRevolution_footer_logo.png" alt="NextRevolution"> </div> <div class="footer-right"> <ul class="footerglobal-menu"> <li><a href="">TOP</a></li> <li> <a href=""><span>業務内容</span></a><br> <a href="">・HP・ランディングページ制作</a><br> <a href="">・PPC広告・WEB広告</a><br> <a href="">・SNS運用</a><br> <a href="">・ブランディング</a><br> </li> <li> <a href=""><span>スタッフ紹介</span></a><br> <a href="">・ディレクター</a><br> <a href="">・プログラマー</a><br> <a href="">・広告担当</a><br> </li> <li> <a href=""><span>お客様の声</span></a><br> <a href="">・住宅業界メーカー</a><br> <a href="">・美容院店長</a><br> <a href="">・人材派遣会社：広報担当</a><br> </li> </ul> </div> </div> <div class="recruit"> <div class="recruit-main"> <a href="">採用情報</a></div> <div class="sns-link"> <a href=""><img src="public/img/top/twitterlogo.png" alt=""></a> <a href=""><img src="public/img/top/facebooklogo.png" alt=""></a> <a href=""><img src="public/img/top/instagramlogo.png" alt=""></a> </div> </div> </div> </footer> </body> </html>
CSS *{ margin: 0; padding: 0; border: 0; font-family: "ヒラギノ明朝 ProN","Hiragino Mincho ProN"; border: none; word-break: break-all; } body{ margin: 0; padding: 0; border: 0; } ul{ list-style: none; padding: 0; } .top-section{ text-align: center; padding: 240px 0 130px 0; } .top-catch{ text-align: center; } .top-catch h4{ margin-top: 20px; } .top-right{ text-align: right; } .top-left{ text-align: left; } .philosophy-section{ background-image: url(../img/company/top-bg.png); background-repeat: no-repeat; background-size: cover; } .philosophy-box{ margin: 0 0 40px 250px; } .philosophy-box-text{ padding: 10px 0; } .thinking-box{ display: flex; justify-content: center; width: 60%; margin: auto; text-align: center; } .thinking-box-item{ width: 60%; margin: auto; } .thinking-box-item span{ font-size: 15px; } .thinking-box-text{ text-align: center; font-size: 12px; } .corporate-message{ margin-bottom: 90px; margin: auto; width: 50%; margin-bottom: 60px; } .corporate-title{ font-size: 40px; border-bottom: black solid 2px; font-family: 'Vollkorn', serif; display: inline-block; } .corporate-message-box-item{ display: flex; margin-top: 50px; } .corporate-catch{ width: 90%; margin-bottom: 40px; } .corporate-text{ width: 90%; } .corporate-pic img{ width: 400px; height: 400px; margin: auto; } .company-section{ margin-bottom: 100px; } .company-box{ background-color:#4d4d4d; padding: 40px 0; color: white; } .company-box span{ color: rgb(80, 130, 240); font-size: 11px; } .company-box li{ margin: 10px 0; } .company-item ul{ display: flex; justify-content: center; } .company-item li{ width: 10%; font-size: 13px; font-weight: bold; } .right{ text-align: right; position: relative; right: 10%; font-size: 13px; font-weight: bold; }
分かりづらいかもですが記載しました。
うーん、どこを見ても私にはズレているようには見えないしデベロッパーズツールで数値を確認してもおかしなところは見当たらないですね。
メインビジュアルとはどこのことですか？
私もHTMLを起こしてみてみましたが、ズレ、と思われるものを認識できませんでした。
ちなみに、このページに使われているCSSは、質問に記載してあるもので全てでしょうか？
header_footer.css の内容が足りないように見受けられますので、一度確認いただけますか。そちらも追記いただくと状況が再現できるかもしれません。
回答1件
0
ベストアンサー
こんにちは。
CSSが足りないようで、状況が再現できなかったのですが、
スタイルシートを見て気づいたことをお伝えします。
text-align: center
で中央にそろうのは、文字（や画像）です。
divなどのボックスを、スクリーン または親要素に対して、中央に置きたい場合は、
margin: 0 auto;
と指定すると、水平方向に対して、とりあえず中央に配置できることが多いです。
投稿2021/08/06 07:44
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
