質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.07%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 260

taka_oct092018

score 32

原因は画像配置しているブロック<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 &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】 ここまで↑ */
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

ul {
  padding: 0;
}

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/07/13 16:51

    yasutomi様

    返信ありがとうございます。
    ウェブページ製作の練習方法を根本から見直します。

    最初はreset cssを使った方がいいのでしょうか?

    キャンセル

  • 2019/07/13 16:58

    Webサイト制作時にnormalize.cssの仕様を理解できていないのであれば
    reset cssを使ったほうが良いです。

    あとulのpaddingにすぐに気付かなかったということは
    Chrome Developer Toolsの使い方をご存じないようですので
    こちらも学習しておいたほうが良いです。
    https://dotinstall.com/lessons/basic_chrome_dev_v2

    キャンセル

  • 2019/07/13 17:58

    分かりました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.07%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る