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

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

ただいまの
回答率

88.77%

ページリンクを一度で表示する

解決済

回答 1

投稿 編集

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

risacuspin

score 18

ホームからアクセスとお問い合わせの二つのページに移動するとき1度目はホームに戻り、2度目で正しいページに移動します。
調べてみると > a:hover がCSSに入っている場合1度でリンクが正しいページにとばず、 > @media screen and をCSSに入れるといいとあり試しましたが変わりませんでした。

一度で正しいページに移動するにはどうすればいいのかご教授宜しくお願いいたします。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>KUJIRA Cafeへようこそ</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
   <!-- ヘッダー -->
   <header class="header">
      <h1 class="logo"><a href="index.html"><img src="images/logo.png" alt="KUJIRA Cafe"></a></h1>
      <nav class="nav">
         <ul>
            <li><a href="index.html">ホーム</a></li>
            <li><a href="about.html">店舗案内</a></li>
            <li><a href="access.html">アクセス</a></li>
            <li><a href="menu.html">メニュー</a></li>
            <li><a href="contact.html">お問い合わせ</a></li>
         </ul>
      </nav>
   </header>
   <!-- ヘッダー ここまで -->
   <!-- メイン -->
   <div class="keyvisual">
      <img src="images/keyvisual.jpg" alt=""> 
   </div>
   <main>
         <h2 id="news">News</h2>
         <p class="news-item">4月29日(土)は、九寺楽町の春祭りに出店するため、お店は休業させていたただきます。春祭りでタルトやキッシュ、コーヒーも販売するので、ぜひお越しください。</p>
         <p class="news-item">3月20日(月・祝)は、18時からアコースティックギターデュオ「<a href="http://www.sbcr.jp" target="_blank">PICNIC</a>」のライブを開催します。投げ銭方式です。お楽しみに!</p>
   </main>
   <!-- メイン ここまで -->
   <!-- フッター -->
   <footer class="footer">
      <p>&copy;Copyright KUJIRA Cafe. All rights reserved.</p>
   </footer>
   <!-- フッター ここまで -->
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>アクセス | KUJIRA Cafe</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
   <!-- ヘッダー -->
   <header class="header">
      <h1 class="logo"><a href="index.html"><img src="images/logo.png" alt="KUJIRA Cafe"></a></h1>
      <nav class="nav">
         <ul>
            <li><a href="index.html">ホーム</a></li>
            <li><a href="index.html">店舗案内</a></li>
            <li><a href="index.html">アクセス</a></li>
            <li><a href="index.html">メニュー</a></li>
            <li><a href="index.html">お問い合わせ</a></li>
         </ul>
      </nav>
   </header>
   <!-- ヘッダー ここまで -->
   <!-- メイン -->
   <main>
            <h2>アクセス</h2>
            <div class="map"><img src="images/map.png" alt="地図"></div>
            <p>九寺楽駅 東口 徒歩2分</p>
            <ol>
                  <li>駅東口を出ます。</li>
                  <li>駅前商店街を国道999号線方面へ向かいます。</li>
                  <li>国道999号線を渡り直進します。</li>
                  <li>銀行ATMの角を左に曲がり2軒目の1階です。</li>
            </ol>
   </main>
   <!-- メイン ここまで -->
   <!-- フッター -->
   <footer class="footer">
      <p>&copy;Copyright KUJIRA Cafe. All rights reserved.</p>
   </footer>
   <!-- フッター ここまで -->
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>お問い合わせ | KUJIRA Cafe</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
   <!-- ヘッダー -->
   <header class="header">
      <h1 class="logo"><a href="index.html"><img src="images/logo.png" alt="KUJIRA Cafe"></a></h1>
      <nav class="nav">
         <ul>
            <li><a href="index.html">ホーム</a></li>
            <li><a href="index.html">店舗案内</a></li>
            <li><a href="index.html">アクセス</a></li>
            <li><a href="index.html">メニュー</a></li>
            <li><a href="index.html">お問い合わせ</a></li>
         </ul>
      </nav>
   </header>
   <!-- ヘッダー ここまで -->
   <!-- メイン -->
   <main>
     <h2>お問い合わせ</h2>
      <form method="GET" action="result.html">
        <div>
           <label for="kind">お問い合わせの種類</label><br>
           <select id="kind">
              <option value="reservation">ご予約</option>
              <option value="event">イベントについて</option>
              <option value="contact">その他のお問い合わせ</option>
           </select>
        </div>
        <div>
           KUJIRA Cafeにご来店いただいたことはありますか。<br>
           <label><input type="radio" name="first" value="yes" checkd>はい</label>
           <label><input type="radio" name="first" value="no">いいえ</label>
        </div>
        <div>
           当カフェをお知りになったきっかけは?<br>
           <label><input type="checkbox" name="how" value="friends">知り合いの紹介で</label>
           <label><input type="checkbox" name="how" value="magazine">雑誌・Webサイトで見て</label>
        </div>
        <div>
           <label>お問い合わせの件名<br>
           <input type="text" name="subject" placeholder="お問い合わせ"></label>
        </div>
        <div>
           <label>お問い合わせの具体的な内容<br>
           <textarea name="message"></textarea></label>
        </div>
        <div>
            <input type="submit" name="submit" value="送信">
        </div>
      </form>
   </main>
   <!-- メイン ここまで -->
   <!-- フッター -->
   <footer class="footer">
      <p>&copy;Copyright KUJIRA Cafe. All rights reserved.</p>
   </footer>
   <!-- フッター ここまで -->
</div>
</body>
</html>
@charset "UTF-8";

/* すべてのWebページに適用される */
html {
   font-family: sans-serif;
}
html * {
   box-sizing: border-box;
}
body {
   margin: 0 0 0 0;
   background-color: #eeece9;
}
.wrapper {
   margin: 0 auto 0 auto;
   max-width: 960px;
}
h2{
   color: #3f5170;
   font-size: 22px;
   border-bottom: 3px dotted #3f5170;
   margin-top: 20px;
   margin-right: 0px;
   margin-bottom: 20px;
   margin-left: 0px;
   padding-top: 5px;
   padding-right: 5px;
   padding-bottom: 5px;
   padding-left: 5px;
}
p {
   line-height: 1.6;
}
a:link{
   color: #d25833;
}
a:visited{
   color: #d25833;
}
a:hover{
   color: #e3937a;
}
a:active{
   color: #ff6a3b;
}
img {
   max-width: 100%;
   height: auto;
}


/* すべてのページに適用 - ヘッダー - */
.logo {
   margin: 50px 0 40px 0;
   line-height: 0;
   text-align: center;
}
.nav li {
   display: inline;
   list-style-type: none;
   padding-right: 30px;
}
.nav ul {
   margin: 0 0 0 0;
   padding: 20px 10px 15px 20px;
   background-image: url(../images/menu-bg.png);
   background-repeat: repeat-x;
}
.nav a:link {
   color: #3c454d;
   text-decoration: none;
}
.nav a:visited {
   color: #3c454d;
   text-decoration: none;
}
.nav a:hover {
   color: #7b8dac;
   text-decoration: none;
}
.nav a:active {
   color: #5a9bc0;
   text-decoration: none;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • x_x

    2019/05/27 16:24

    「アクセス」をクリックしたのに index.html に遷移すると言っています?
    「ホーム」以外の各ページの HTML も提示願います。

    キャンセル

  • risacuspin

    2019/05/27 16:40

    はい、「アクセス」をクリックすると index.html に遷移します。もう一度クリックすると「アクセス」に遷移します。
     access.html、contact.html追加しましたので宜しくお願いいたします。

    キャンセル

回答 1

checkベストアンサー

+2

ほかのページのリンク先が間違ってるからですね
index.html

            <li><a href="index.html">ホーム</a></li>
            <li><a href="about.html">店舗案内</a></li>
            <li><a href="access.html">アクセス</a></li>
            <li><a href="menu.html">メニュー</a></li>
            <li><a href="contact.html">お問い合わせ</a></li>


access.html

            <li><a href="index.html">ホーム</a></li>
            <li><a href="index.html">店舗案内</a></li>
            <li><a href="index.html">アクセス</a></li>
            <li><a href="index.html">メニュー</a></li>
            <li><a href="index.html">お問い合わせ</a></li>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/05/27 16:42

    初歩的なことですみません。
    一人で分からず悩んでいたのでとても助かりました。
    ありがとうございました!

    キャンセル

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

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

関連した質問

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