Q&A
ゴールが明示されずにコードだけ平で投げられても、ちょっと。
せめてコードはマークダウン使ってください
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
HTML
<DOCTYPE!>
</div> <main> <div id="section1"> <div class="inner"> <div class="section1-img"><a href="https://www.yoga-plus.jp/class/new.php"><img src="https://www.yoga-plus.jp/yoga-plus/common/img/top/slider/slider-welcome.jpg"></a></div> </div> </div><dl class="menu2"> <div class="hidden-box"> <label for="label2"><dt>レッスン内容</dt></label> <input type="checkbox" id="label2"> <dd class="hidden-show"> <ul> <li><a href="https://www.yoga-plus.jp/class/new.php">NEWクラス</a></li> <li><a href="https://www.yoga-plus.jp/class/">クラス一覧</a></li> <li><a href="https://www.yoga-plus.jp/class/regular.php">レギュラーレッスン</a></li> <li><a href="https://www.yoga-plus.jp/private/">プライベートレッスン</a></li> <li><a href="https://www.yoga-plus.jp/class/maternity.php">マタニティヨガ</a></li> <li><a href="https://www.yoga-plus.jp/class/kids.php">キッズヨガ</a></li> </ul> </dd> </div> </dl> <dl class="menu3"> <dt><a href="https://www.yoga-plus.jp/studioInfo/studiomap.php">スタジオ一覧</a></dt> <dd></dd> </dl> <dl class="menu4"> <dt><a href="https://www.yoga-plus.jp/instructoIntroduction/">インストラクター</a></dt> <dd></dd> </dl> <dl class="menu5"> <dt><a href="https://www.yoga-plus.jp/price/">料金と通い方</a></dt> <dd></dd> </dl> <dl class="menu6"> <div class="hidden-box"> <label for="label6"><dt>よくある質問</dt></label> <input type="checkbox" id="label6"> <dd class="hidden-show"> <ul> <li><a href="https://www.yoga-plus.jp/faq/">よくある質問</a></li> <li><a href="https://www.yoga-plus.jp/client_voice/">クライアント様の声</a></li> </ul> </dd> </dl> </div> </div> <div class="fixed-btn"> <a href="https://www.yoga-plus.jp/welcome/"><img src="https://www.yoga-plus.jp/yoga-plus/common/img/footer/btn-trial-lesson.png"></a> </div> </div>
</div> </body> </html><div id="section2"> <div class-"inner"> <div class="section2-ttl"><p>マインドフルに生きる、<br>だからzen place。</p></div> <div class="blocks"> <div class="block1"> <a href="https://www.yoga-plus.jp/flow/"> <dl> <dt><h3>はじめての方へ</h3><br><p>zen placeがはじめての方はこちら</p></dt> <dd><img src="https://www.yoga-plus.jp/yoga-plus/common/img/top/cat-lesson.jpg"></dd> </dl> </a> </div> <div class="block2"> <a href="https://www.yoga-plus.jp/studioMap/"> <dl> <dt><h3>スタジオ一覧</h3><br><p>スタジオは関東・関西に多数展開</p></dt> <dd><img src="https://www.yoga-plus.jp/yoga-plus/common/img/top/cat-studio.jpg"></dd> </dl> </a> </div> <div class="block3"> <a href="https://www.yoga-plus.jp/reservation/reservation.php"> <dl> <dt><h3>スケジュール</h3><br><p>レッスンスケジュールとご予約はこちら</p></dt> <dd><img src="https://www.yoga-plus.jp/yoga-plus/common/img/top/cat-schedule.jpg"></dd> </dl> </a> </div> </div> <div class="recommendation"> <h3>おすすめコンテンツ</h3> <ul> <li><a href="https://zenplace.co.jp/class/hiit.html?_ga=2.97487519.1406239120.1581342578-202617398.1581342578"><img src="https://www.yoga-plus.jp/yoga-plus/common/img/top/banner/bnr-hiit.jpg"> <p>HIIT Yoga - 心拍数を上昇させ、安静時心拍数を減少させる</p></a> </li> <li><a href="https://www.yoga-plus.jp/class/new.php"><img src="https://www.yoga-plus.jp/yoga-plus/common/img/top/banner/bnr-new-class.png"> <p>ワクワクする新クラス、続々オープン</p></a> </li> <li><a href="https://www.yoga-plus.jp/flow/jyouon.php"><img src="https://www.yoga-plus.jp/yoga-plus/common/img/top/banner/bnr-ct-yoga.png"> <p>常温ヨガの効果</p></a> </li> <li><a href="https://corporate.zenplace.co.jp/interview/interview04.html?_ga=2.202868881.1406239120.1581342578-202617398.1581342578"><img src="https://www.yoga-plus.jp/yoga-plus/common/img/top/banner/bnr-interview.jpg"> <p>前田康輔さん特別インタビュー</p></a> </li> <li><a href="https://zenplace.co.jp/class/specialplans.html?_ga=2.98487327.1406239120.1581342578-202617398.1581342578"><img src="https://www.yoga-plus.jp/yoga-plus/common/img/top/banner/specialplans.jpg"> <p>お客様向け特別割引プラン</p></a> </li> <li><a href="https://zenplace.co.jp/press.html?_ga=2.26060605.1406239120.1581342578-202617398.1581342578"><img src="https://www.yoga-plus.jp/yoga-plus/common/img/top/banner/bnr-press.jpg"> <p>zen placeの最新情報</p></a> </li> <li><a href="https://www.yoga-plus.jp/flow/hot.php"><img src="https://www.yoga-plus.jp/yoga-plus/common/img/top/banner/bnr-hot-yoga.png"> <p>ホットヨガの効果イメージ</p></a> </li> </ul> </div> </div>
CSS
.inner {
overflow: hidden;
}
#header {
position: fixed;
background-color: white;
height: 60px;
top: 0;
z-index: 1;
margin-bottom: 0;
}
.header-menu {
position: relative;
display: flex;
justify-content: center;
justify-content: space-around;
margin: 0 120px;
}
.menu1, .menu2, .menu3, .menu4, .menu5, .menu6 {
display: flex;
position: relative;
justify-content: center;
justify-content: space-between;
left: 170px;
top: -70px;
}
.menu1 dt, .menu2 dt, .menu6 dt {
font-size: 14px;
font-weight: 700;
}
.menu3 dt a, .menu4 dt a, .menu5 dt a {
font-size: 14px;
font-weight: 700;
top: 35px;
margin: 20px;
position: relative;
}
.menu1 a, .menu2 a, .menu3 a, .menu4 a, .menu5 a, .menu6 a {
text-decoration: none;
color: black;
font-size: 10px;
}
.hidden-show a:hover {
color: #99BD3F;
}
.menu1 ul, .menu2 ul, .menu3 ul, .menu4 ul, .menu5 ul, .menu6 ul {
list-style: none;
}
.hidden-box {
padding: 0;
margin: 10px 20px;/前後の余白/
}
.hidden-box label {
padding: 25px;
cursor: pointer;
}
.hidden-box label:hover {
}
.hidden-box input {
display: none;
}
.hiden-box, .hidden-show {
height: 0;
padding: 0;
overflow: 0;
opacity: 0;
transition: 0.5s;
}
.hidden-box input:checked ~ .hidden-show {
padding: 20px 0;
width: 170px;
height: 130px;
background-color: #FFFFFF;
opacity: 1;
}
.fixed-btn {
position: relative;
left: 1265px;
top: 200px;
margin-left: 0;
}
#section1 {
background-color: #F5F5F5;
height: 600px;
}
.section1-img img {
position: relative;
left: 150px;
top: 53px;
margin: 0;
}
#section2 {
margin-top: 0;
}
.section2-ttl p {
font-size: 20px;
font-weight: 100;
text-align: center;
margin: 20px 0;
}
.blocks {
display: flex;
}
.block1 h3, .block2 h3, .block3 h3 {
font-size: 17px;
color: black;
}
.block1 p, .block2 p, .block3 p {
font-size: 15px;
color: black;
}
.block1 a, .block2 a, .block3 a {
text-decoration: none;
display: block;
}
.block1, .block2, .block3 {
border: 2px solid #DEE2E6;
display: block;
text-align: center;
margin: 10px;
position: relative;
left: 160px;
padding-left: 0;
}
.block1 dt, .block2 dt, .block3 dt {
position: relative;
top: 170px;
margin: 0;
}
dd img {
position: relative;
top: 190px;
width: 100%;
right: 10px;
}
ここにより詳細な情報を記載してください。
section2のblock内のimgがwidth100%にならなかったりします。
section1のmenuにアンダーラインを入れると形崩れしてしまいます。
初歩的かもしれませんがよろしくお願いいたします！
また、その他直すべきところがあれば教えていただけると幸いです。
回答1件
0
適切にコードを表現できてないので詳細に見る気になりませんが、構文的な問題が多数あります。
以下のような構文チェッカーで、エラーをなくしてから質問すると、回答がつきやすくなります。
Html Checker
投稿2020/02/10 23:51
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
