原因は画像配置しているブロック<div id="graphic">にあると思います。
なぜか<ul>に「padding-left:40px;」が設定さており、画像が右にはみ出してしまいます。
今現在、専門書の教材を利用してウェブページの製作の練習をしております。
javascriptのファイルは自分で作ったものではありません。
よろしくお願い致します。
https://practice2017.web.fc2.com/hotel_imperial_resort_tokyo/root/index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimun-scale=1.0"> <title>HOTEL IMPERIAL RESORT TOKYO</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body id="index"> <header id="top" class="hdr"><!-- 【ヘッダー】 --> <h1><a href="index.html"><img src="img/logo_01.png" alt="HOTEL IMPERIAL RESORT TOKYO"></a></h1> </header><!-- /#top .hdr --> <nav class="gnav" aria-label="グローバルナビゲーション"><!-- グローバルナビゲーション --> <ul class="wrap-list"> <li id="nav_concept"><a href="concept.html">結婚式場のコンセプト</a></li> <li id="nav_plan"><a href="plan.html">プランのご案内</a></li> <li id="nav_fair"><a href="fair.html">ブライダルフェア</a></li> <li id="nav_contact"><a href="contact.html">お問い合わせ</a></li> </ul><!-- /.wrap-list --> </nav><!-- /.gnav --> <div id="graphic"> <ul> <li class="now"><img class="image1" src="img/slide1.jpg" alt="こだわりの空間で心地よいひとときを"></li> <li><img class="image2" src="img/slide2.jpg" alt="幸福に満ちた神聖なチャベル"></li> <li><img class="image3" src="img/slide3.jpg" alt="「ありがとう」の気持ちが伝わるウェディング"></li> </ul> </div><!-- /#graphic --> <div class="contents"><!-- 【コンテンツ】 --> <section class="contents-main"><!-- 【メインコンテンツ】 --> <article> <h2>結婚式場のコンセプト</h2> </article> </section><!-- /.contents-main --> <div class="contents-sub"><!-- 【サブコンテンツ】 --> <aside> <div class="bnr-inner"> <a href="plan.html"> <dl> <dt><img src="img/bnr_contents_sub_plan_01.jpg" alt="プランのご案内"></dt> <dd>標準のプランをご紹介いたします。</dd> </dl> </a> </div><!-- /.bnr-inner --> <div class="bnr_inner"> <a href="contact.html"> <p><img src="img/bnr_contents_sub_contact_01.png" alt="お問い合わせ"></p> </a> </div><!-- /.bnr-inner --> </aside> </div><!-- /.contents-sub --> </div><!-- /.contents --> <footer class="ftr"><!-- 【フッター】 --> <div id="topPage"> <a href="#top"><img class="icon-arrow"></a> <p><a href="#top">ページの先頭へ戻る</a></p> </div> <address>東京都千代田区X-X-X 電話 0120-000-XXXX 営業時間 11:00~20:00(水曜日定休日)</address> <p id="copyright"><small>Copyright ©2014 HOTEL IMPERIA RESORT TOKYO All rights reserved.</small></p> </footer><!-- /.ftr --> <script src="js/slideshow.js"></script> </body><!-- /#base --> </html>
@charset "utf-8"; /* 【共通箇所・基本設定:ページ全体】 ここから↓ */ /* フォントサイズ */ html { font-size: 62.5%; } /* 62.5%:1em:10px */ body { font-size: 1.4rem; } /* =14px <p>や<a>などの設定。 */ h1 { font-size: 2.8rem; } /* =28px */ h2 { font-size: 2.1rem; } /* =21px */ h3 { font-size: 1.6rem; } /* =16px */ h4 { font-size: 1.4rem; } /* =14px <p>と同じ大きさ。 */ body { background-color : #f3f2e9; color : #5f5039; line-height : 1.5; margin : 0 auto; width : 84rem; } li { list-style : none; } /* 【ヘッダー】 ここから↓ */ header h1 { margin: 0 0 2.6rem 0; padding-top: 2.8rem ; text-align: center; } /* 【ヘッダー】 ここまで↑ */ /* 【グローバルナビゲーション】 ここから↓ リストを横に並べる。 */ .wrap-list { margin : 0 0 2rem 0; overflow : hidden; padding : 0; } .gnav li { float : left; width : 21rem; } /* グローバルナビゲーションのリンクに画像を指定する。 */ #nav_concept a { background-image:url(../img/gnav_01.png); } #nav_plan a { background-image:url(../img/gnav_02.png); } #nav_fair a { background-image:url(../img/gnav_03.png); } #nav_contact a { background-image:url(../img/gnav_04.png); } .gnav a { display:block; padding-top:4.4rem; height:0; } /* 【グローバルナビゲーション】 ここまで↑ */ /* 【パンくずリスト】 ここから↓ */ #breadcrumb ul { overflow:hidden; padding-left:0; } #breadcrumb li { float:left } #breadcrumb li:first-child { margin-right:1rem; } /* 【パンくずリスト】 ここまで↑ */ /* CSSシグネチャ */ #concept #nav_concept a, #contact #nav_contact a, #fair #nav_fair a, #plan #nav_plan a, nav a:hover { background-position:0 -4.5rem; } /* 【コンテンツ】 ここから↓ メインコンテンツとサブコンテンツを横に並べる。 */ .contents { overflow:hidden; } .contents-main { float:left; width:57rem; } .contents-sub { float:right; width:23rem; } .contents-main h2 { background-image : url(../img/bg_h2_top_01.png),url(../img/bg_h2_bottom_01.png); background-position : left top, left bottom; background-repeat : no-repeat,no-repeat; font-size : 140%; margin : 0 0 3rem 0; padding : 3.5rem 0 3.5rem 6rem; } /* 【コンテンツ】 ここまで↑ */ /* 【サブコンテンツ】 ここから↓ */ .bnr_inner img:hover { opacity:.8; } .bnr-inner dd { margin-left: .5rem; } /* 【サブコンテンツ】 ここまで↑ */ /* 【フッター】 */ .ftr { margin-top: 7rem; } /* 「ページの先頭へ戻る」 右によせる。 */ #topPage { float:right; } .ftr address { clear:both; } /* 矢印の画像を配置する。 */ .icon-arrow { background-image : url(../img/icon_ftr_arrow_01.png); background-repeat : no-repeat; height : 2.8rem; padding-right : .5rem; width : 2.1rem; } #topPage { overflow : hidden; } #topPage a { float : left; } #topPage p { float : right; margin-bottom : 0; margin-top : 1rem; } /* 住所とコピーライトを中央に配置する。 */ .ftr address, #copyright { text-align : center; } #copyright { margin-top: -.4rem; } /* 【フッター】 ここまで↑ */ /* 【共通箇所・基本設定:ページ全体】 ここまで↑ */ /* 【index.html】 ここから↓ */ /* 【index.html】 ここまで↑ */
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/13 06:50
2019/07/13 06:57
2019/07/13 07:32
2019/07/13 07:47
2019/07/13 07:51
2019/07/13 07:58
2019/07/13 08:58