Q&A
3-7. markdownを利用しましょう
https://teratail.com/help/question-tips#questionTips3-7
前提・実現したいこと
VSCODEで模写コーディングをしています
cssでh3 liの両サイドの余白をなくし、imgと同じ幅に広げたいです
分かりづらい説明で済みません。
模写サイト
リンク内容
■■な機能を実装中に以下のエラーメッセージが発生しました。
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>sample site</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> </head> <body> <header> <div class="img"> <img class="logo" src="img\logo.png" alt="#"> <img class="back" src="img\mainimg.jpg" alt="#"> </div> <div class="container"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Link</a></li> </ul> </nav> </div> </header> <div class="container"> <h2 class="block-tit">更新情報・お知らせ</h2> <dl> <dt>2019/04/22</dt> <dd>より初心者が使いやすいよう少し調整。古いものを使っている人はそのままでOKです。</dd> <dt>2017/10/06</dt> <dd>初心者向け無料ホームページテンプレートtp_beginner5公開。</dd> <dt>20XX/00/00</dt> <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd> <dt>20XX/00/00</dt> <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd> <dt>20XX/00/00</dt> <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd> <dt>20XX/00/00</dt> <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd> <dt>20XX/00/00</dt> <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd> <dt>20XX/00/00</dt> <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd> </dl> </div></body><div class="container"> <h2 class="block-tit">テンプレートのご利用前に必ずお読み下さい</h2> <h2>利用規約のご案内</h2> <p>このテンプレートは、<span><a href="#">Template Party</a></span>にて無料配布している『初心者向けホームページテンプレート tp_beginner5』です。必ずダウンロード先のサイトの<span><a href="#">利用規約</a></span>をご一読の上でご利用下さい。</p> <p class="block-li">■HP最下部の著作表示『Web Design:Template-Party』は無断で削除しないで下さい。</p> <p>わざと見えなく加工する事も禁止です。</p> <p class="block-li">■下部の著作を外したい場合は</p> <p><span><a href="#">Template-Party</a></span> の<span><a href="#">ライセンス契約</a></span>を行う事でHP下部の著作を外す事ができます。</p> <h2>当テンプレートの詳しい使い方は</h2> <p><span><a href="#">こちらをご覧下さい。</a></span></p> </div> <div class="container"> <footer> <p>Copyright© SAMPLE SITE All Rights Reserved.</p> <p>《Web Design:Template-Party》</p> </footer> </div>
CSS
body {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.img {
text-align: center;
}
.logo {
width: 400px;
height: 41px;
margin: 40px auto;
}
.back {
max-width: 100%;
height: 490px;
border-radius: 10px;
margin-bottom: 40px;
}
ul {
text-align: center;
}
li {
display: inline;
list-style: none;
padding: 15px 30px;
font-size: 18px;
color: #666666;
}
.block-tit {
font-size: 16px;
padding: 10px 20px;
margin-bottom: 20px;
background-color: #D08047;
border-radius: 10px;
color: #fff;
}
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
こんばんは。
とりあえず、Bootstrap のドキュメントは読んだ方がいいと思いますよ。
.container は固定幅のコンテナです。
概要(Overview) - Bootstrap 4.4 - 日本語リファレンス
.container-fluid はビューポートの幅全体に広がる全幅のコンテナです。
投稿2020/10/13 09:53
編集2020/10/13 09:55総合スコア36158
回答ありがとうございます。.containerをクラスにつけたことで固定幅になっていたんですね。
こんばんは。
初歩的な部分を理解していませんでした。
わかりやすくリンクも張っていただきありがとうございます。
ドキュメントを読むように心がけます
あなたの回答
tips
プレビュー
