Q&A
「アクセス」をクリックしたのに index.html に遷移すると言っています？
「ホーム」以外の各ページの HTML も提示願います。
ホームからアクセスとお問い合わせの二つのページに移動するとき1度目はホームに戻り、２度目で正しいページに移動します。
調べてみると > a:hover がCSSに入っている場合１度でリンクが正しいページにとばず、 > @media screen and をCSSに入れるといいとあり試しましたが変わりませんでした。
一度で正しいページに移動するにはどうすればいいのかご教授宜しくお願いいたします。
html
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1"> 6<title>KUJIRA Cafeへようこそ</title> 7<link rel="stylesheet" href="css/style.css"> 8</head> 9<body> 10<div class="wrapper"> 11 <!-- ヘッダー --> 12 <header class="header"> 13 <h1 class="logo"><a href="index.html"><img src="images/logo.png" alt="KUJIRA Cafe"></a></h1> 14 <nav class="nav"> 15 <ul> 16 <li><a href="index.html">ホーム</a></li> 17 <li><a href="about.html">店舗案内</a></li> 18 <li><a href="access.html">アクセス</a></li> 19 <li><a href="menu.html">メニュー</a></li> 20 <li><a href="contact.html">お問い合わせ</a></li> 21 </ul> 22 </nav> 23 </header> 24 <!-- ヘッダー ここまで --> 25 <!-- メイン --> 26 <div class="keyvisual"> 27 <img src="images/keyvisual.jpg" alt=""> 28 </div> 29 <main> 30 <h2 id="news">News</h2> 31 <p class="news-item">4月29日（土）は、九寺楽町の春祭りに出店するため、お店は休業させていたただきます。春祭りでタルトやキッシュ、コーヒーも販売するので、ぜひお越しください。</p> 32 <p class="news-item">3月20日（月・祝）は、18時からアコースティックギターデュオ「<a href="http://www.sbcr.jp" target="_blank">PICNIC</a>」のライブを開催します。投げ銭方式です。お楽しみに！</p> 33 </main> 34 <!-- メイン ここまで --> 35 <!-- フッター --> 36 <footer class="footer"> 37 <p>©Copyright KUJIRA Cafe. All rights reserved.</p> 38 </footer> 39 <!-- フッター ここまで --> 40</div> 41</body> 42</html>
html
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1"> 6<title>アクセス | KUJIRA Cafe</title> 7<link rel="stylesheet" href="css/style.css"> 8</head> 9<body> 10<div class="wrapper"> 11 <!-- ヘッダー --> 12 <header class="header"> 13 <h1 class="logo"><a href="index.html"><img src="images/logo.png" alt="KUJIRA Cafe"></a></h1> 14 <nav class="nav"> 15 <ul> 16 <li><a href="index.html">ホーム</a></li> 17 <li><a href="index.html">店舗案内</a></li> 18 <li><a href="index.html">アクセス</a></li> 19 <li><a href="index.html">メニュー</a></li> 20 <li><a href="index.html">お問い合わせ</a></li> 21 </ul> 22 </nav> 23 </header> 24 <!-- ヘッダー ここまで --> 25 <!-- メイン --> 26 <main> 27 <h2>アクセス</h2> 28 <div class="map"><img src="images/map.png" alt="地図"></div> 29 <p>九寺楽駅 東口 徒歩2分</p> 30 <ol> 31 <li>駅東口を出ます。</li> 32 <li>駅前商店街を国道999号線方面へ向かいます。</li> 33 <li>国道999号線を渡り直進します。</li> 34 <li>銀行ATMの角を左に曲がり2軒目の1階です。</li> 35 </ol> 36 </main> 37 <!-- メイン ここまで --> 38 <!-- フッター --> 39 <footer class="footer"> 40 <p>©Copyright KUJIRA Cafe. All rights reserved.</p> 41 </footer> 42 <!-- フッター ここまで --> 43</div> 44</body> 45</html>
html
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1"> 6<title>お問い合わせ | KUJIRA Cafe</title> 7<link rel="stylesheet" href="css/style.css"> 8</head> 9<body> 10<div class="wrapper"> 11 <!-- ヘッダー --> 12 <header class="header"> 13 <h1 class="logo"><a href="index.html"><img src="images/logo.png" alt="KUJIRA Cafe"></a></h1> 14 <nav class="nav"> 15 <ul> 16 <li><a href="index.html">ホーム</a></li> 17 <li><a href="index.html">店舗案内</a></li> 18 <li><a href="index.html">アクセス</a></li> 19 <li><a href="index.html">メニュー</a></li> 20 <li><a href="index.html">お問い合わせ</a></li> 21 </ul> 22 </nav> 23 </header> 24 <!-- ヘッダー ここまで --> 25 <!-- メイン --> 26 <main> 27 <h2>お問い合わせ</h2> 28 <form method="GET" action="result.html"> 29 <div> 30 <label for="kind">お問い合わせの種類</label><br> 31 <select id="kind"> 32 <option value="reservation">ご予約</option> 33 <option value="event">イベントについて</option> 34 <option value="contact">その他のお問い合わせ</option> 35 </select> 36 </div> 37 <div> 38 KUJIRA Cafeにご来店いただいたことはありますか。<br> 39 <label><input type="radio" name="first" value="yes" checkd>はい</label> 40 <label><input type="radio" name="first" value="no">いいえ</label> 41 </div> 42 <div> 43 当カフェをお知りになったきっかけは？<br> 44 <label><input type="checkbox" name="how" value="friends">知り合いの紹介で</label> 45 <label><input type="checkbox" name="how" value="magazine">雑誌・Webサイトで見て</label> 46 </div> 47 <div> 48 <label>お問い合わせの件名<br> 49 <input type="text" name="subject" placeholder="お問い合わせ"></label> 50 </div> 51 <div> 52 <label>お問い合わせの具体的な内容<br> 53 <textarea name="message"></textarea></label> 54 </div> 55 <div> 56 <input type="submit" name="submit" value="送信"> 57 </div> 58 </form> 59 </main> 60 <!-- メイン ここまで --> 61 <!-- フッター --> 62 <footer class="footer"> 63 <p>©Copyright KUJIRA Cafe. All rights reserved.</p> 64 </footer> 65 <!-- フッター ここまで --> 66</div> 67</body> 68</html>
css
1@charset "UTF-8"; 2 3/* すべてのWebページに適用される */ 4html { 5 font-family: sans-serif; 6} 7html * { 8 box-sizing: border-box; 9} 10body { 11 margin: 0 0 0 0; 12 background-color: #eeece9; 13} 14.wrapper { 15 margin: 0 auto 0 auto; 16 max-width: 960px; 17} 18h2{ 19 color: #3f5170; 20 font-size: 22px; 21 border-bottom: 3px dotted #3f5170; 22 margin-top: 20px; 23 margin-right: 0px; 24 margin-bottom: 20px; 25 margin-left: 0px; 26 padding-top: 5px; 27 padding-right: 5px; 28 padding-bottom: 5px; 29 padding-left: 5px; 30} 31p { 32 line-height: 1.6; 33} 34a:link{ 35 color: #d25833; 36} 37a:visited{ 38 color: #d25833; 39} 40a:hover{ 41 color: #e3937a; 42} 43a:active{ 44 color: #ff6a3b; 45} 46img { 47 max-width: 100%; 48 height: auto; 49} 50 51 52/* すべてのページに適用 - ヘッダー - */ 53.logo { 54 margin: 50px 0 40px 0; 55 line-height: 0; 56 text-align: center; 57} 58.nav li { 59 display: inline; 60 list-style-type: none; 61 padding-right: 30px; 62} 63.nav ul { 64 margin: 0 0 0 0; 65 padding: 20px 10px 15px 20px; 66 background-image: url(../images/menu-bg.png); 67 background-repeat: repeat-x; 68} 69.nav a:link { 70 color: #3c454d; 71 text-decoration: none; 72} 73.nav a:visited { 74 color: #3c454d; 75 text-decoration: none; 76} 77.nav a:hover { 78 color: #7b8dac; 79 text-decoration: none; 80} 81.nav a:active { 82 color: #5a9bc0; 83 text-decoration: none; 84}
はい、「アクセス」をクリックすると index.html に遷移します。もう一度クリックすると「アクセス」に遷移します。
access.html、contact.html追加しましたので宜しくお願いいたします。
回答1件
0
ベストアンサー
ほかのページのリンク先が間違ってるからですね
index.html
HTML
1 <li><a href="index.html">ホーム</a></li> 2 <li><a href="about.html">店舗案内</a></li> 3 <li><a href="access.html">アクセス</a></li> 4 <li><a href="menu.html">メニュー</a></li> 5 <li><a href="contact.html">お問い合わせ</a></li>
access.html
HTML
1 <li><a href="index.html">ホーム</a></li> 2 <li><a href="index.html">店舗案内</a></li> 3 <li><a href="index.html">アクセス</a></li> 4 <li><a href="index.html">メニュー</a></li> 5 <li><a href="index.html">お問い合わせ</a></li>
投稿2019/05/27 07:38
総合スコア13749
あなたの回答
tips
プレビュー
