スライドショーの画像が少しずれて表示されてしまいます。

原因は画像配置しているブロック<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>東京都千代田区Ｘ－Ｘ－Ｘ 電話　０１２０－０００－ＸＸＸＸ　営業時間　１１：００～２０：００（水曜日定休日）</address>
  <p id="copyright"><small>Copyright &copy;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件

ベストアンサー

ulタグのデフォルトのpaddingの影響なので
padding: 0を指定すれば直ります。

css
1ul {
2  padding: 0;
3}

何の専門書の教材を利用しているのか不明ですが
ulのCSSリセットについての記載がないようですし
CSSの書き方がおかしいので、その教材は捨てて
新しい教材を購入したほうが良いです。

今現在、専門書の教材を利用してウェブページの製作の練習をしております。

投稿2019/07/13 05:34

yasutomi

総合スコア2937

taka_oct092018

2019/07/13 06:50

yasutomi様返信ありがとうございます。 ul { padding: 0; } 上記のコードを試してみましたが効果はありませんでした。今回の不具合に関係あるかどうかは分かりませんがクロームデベロッパーツールを見てみると、下記のような設定がありました。 user agent stylesheet ul { display: block; list-style-type: disc; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 40px; }

yasutomi

2019/07/13 06:57

今回の件はuser agent stylesheetは直接関係ないです。該当箇所はul { padding: 0; } で直ることが確定しています。 ul { padding: 0; } で直らないのであれば以下のいずれかが原因です。・CSSを正しく修正してアップされていない・ほかのCSSでulのpaddingが上書きされている・キャッシュが効いて反映されていない

taka_oct092018

2019/07/13 07:32

yasutomi様返信ありがとうございます。 normalize.cssをHTML5 Doctor Reset CSSを変更してみたところ、 <ul>に意図しない「padding-left:40px;」が設定される不具合は解消されました。しかし、スライドの画像は一度画面下表示がずれてしまいます。本題とは話がそれてしまいますが、ウェブページ製作の練習を行うにあたっては、以下の二点を留意した方がいいのかなとも感じています。１．他人の作ったよく分からないコードを利用すべきではない。２．normalize.cssは意図しない不具合が生じるので、HTML5 Doctor Reset CSSを使ったほうが無難。アドバイスよろしくお願い致します。

yasutomi

2019/07/13 07:47

> １．他人の作ったよく分からないコードを利用すべきではない。その通りです。しかも他人の作ったコードは正しいとは限らないです。 > ２．normalize.cssは意図しない不具合が生じるので、HTML5 Doctor Reset CSSを使ったほうが無難。 normalize.cssはCSSをリセットしないので CSSに詳しくない初心者のうちはおすすめしないです。

taka_oct092018

2019/07/13 07:51

yasutomi様返信ありがとうございます。ウェブページ製作の練習方法を根本から見直します。最初はreset cssを使った方がいいのでしょうか？

yasutomi

2019/07/13 07:58

Webサイト制作時にnormalize.cssの仕様を理解できていないのであれば reset cssを使ったほうが良いです。あとulのpaddingにすぐに気付かなかったということは Chrome Developer Toolsの使い方をご存じないようですのでこちらも学習しておいたほうが良いです。 https://dotinstall.com/lessons/basic_chrome_dev_v2

taka_oct092018

2019/07/13 08:58

分かりました。

行動規範の内容に同意します