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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

558閲覧

html内のリンクが全て無効になってしまいました

kajikajisan

総合スコア1

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/10/21 01:31

編集2020/10/21 02:32
コード ```### 前提・実現したいこと aタグのリンクを反映させたいです。 検証からエラーを探しても分かりませんでした。 positionプロパティは使ってますが、 z-indexは使用していません。 ### 該当のソースコード ```html <!doctype html> <html> <head> <meta charset="UTF-8"> <title>abcどうぶつえん</title> <link href="style-copy.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrap"> <div class="top topimg"> <h1 class="hide"><a href="index-copy.html" >abc動物園</a></h1> <div class="topcopy"> ここは自然の真っ只中、本物の動物に出会う場所。 </div><!--topcopy--> </div><!--top topimg--> <header> <nav> <ul> <li class="btn1"><a href="#" >HOME</a></li> <li class="btn2"><a href="#" >INFORMATION</a></li> <li class="btn3"><a href="#" >ANIMALS</a></li> <li class="btn4"><a href="#" >SHOP</a></li> <li class="btn5"><a href="#" >EVENT</a></li> <li class="btn6"><a href="#" >CONTACT</a></li> </ul> </nav> </header> </div><!--wrap--> </body> </html>

css

1 2@charset "UTF-8"; 3 4* { 5 margin: 0; 6 padding: 0; 7 font-family: "Myriad Pro"; 8} 9img{ 10 vertical-align: bottom; 11} 12ul{ 13 list-style-type: none; 14} 15a{ 16 text-decoration: none; 17} 18body { 19 20} 21.wrap{ 22 width: 100vw; 23} 24.hide{ 25 text-indent: 100%; white-space: nowrap; overflow: hidden; 26} 27 28.top { 29 width: 100vw; 30 display: flex; 31 justify-content: center; 32 align-items: center; 33 position: relative; 34} 35.topimg{ 36 background-image: url(images/abczoo.jpg) ; 37 height: 0; 38 /* 表示画像の高さ ÷ 表示画像の幅 × 100 */ 39 padding-top: 56.25%; 40 background-size: contain; 41} 42h1 { 43 background-image: url(images/logo.png) ; 44 background-repeat: no-repeat; 45 background-size: contain; 46 position: fixed; 47 left: 10px;top: 10px; 48 opacity: 100%; 49/* 50 text-indent: 100%; white-space: nowrap; overflow: hidden; 51*/ 52} 53.topcopy { 54 text-shadow: 1px 1px 4px rgba(0,0,0,0.4); 55 color: #fff; 56 letter-spacing: 0.2em; 57 position: absolute; right: 0; top: 92%; 58} 59 60nav ul{ 61 display: flex; 62 justify-content: flex-end; 63 width:100vw; 64 position: relative; 65 vertical-align: middle; 66 background-color: #000009; 67 68} 69nav li{ 70 position: absolute; 71 width: 100%; 72 position: relative; 73 min-width: 120px; 74 min-height: 44px; 75 display: block; 76 text-indent: 100%; 77 white-space: nowrap; 78 overflow: hidden; 79 80} 81.btn1{ 82 background-image: url(images/1x/1home.jpg); 83 background-repeat: no-repeat; 84} 85.btn2{ 86 background-image: url(images/1x/2info.jpg); 87 background-repeat: no-repeat; 88} 89.btn3{ 90 background-image: url(images/1x/3animal.jpg); 91 background-repeat: no-repeat; 92} 93.btn4{ 94 background-image: url(images/1x/4shop.jpg); 95 background-repeat: no-repeat; 96} 97.btn5{ 98 background-image: url(images/1x/5event.jpg); 99 background-repeat: no-repeat; 100} 101.btn6{ 102 background-image: url(images/1x/6contact.jpg); 103 background-repeat: no-repeat; 104} 105.btn1 a:hover{ 106 background-image: url(images/1x/21home.jpg); 107 background-repeat: no-repeat; 108} 109.btn2 a:hover{ 110 background-image: url(images/1x/22info.jpg); 111 background-repeat: no-repeat; 112} 113.btn3 a:hover{ 114 background-image: url(images/1x/23animal.jpg); 115 background-repeat: no-repeat; 116} 117.btn4 a:hover{ 118 background-image: url(images/1x/24shop.jpg); 119 background-repeat: no-repeat; 120} 121.btn5 a:hover{ 122 background-image: url(images/1x/25event.jpg); 123 background-repeat: no-repeat; 124} 125.btn6 a:hover{ 126 background-image: url(images/1x/26contact.jpg); 127 background-repeat: no-repeat; 128} 129 130nav a{ 131 height: 100%; 132} 133 134 135/* SP向けの設定 */ 136@media screen and (max-width: 720px) { 137 .topcopy { 138 font-size: 18px; 139 } 140 nav ul{ 141 margin: 0 auto; 142 } 143} 144 145/* PC向けの設定 */ 146@media screen and (min-width: 721px) { 147 .topcopy { 148 font-size: 26px; 149 } 150}

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/10/21 01:34

コードはマークダウンのcode機能にてご提示ください
miyabi_takatsuk

2020/10/21 01:42

> html内のリンクが全て無効になってしまいました > aタグのリンクを反映させたいです。 これでは何が起きているのか、どうしたいのかがまったくわかりません。 コードをみた限りでは、 h1 > aが表示されないスタイルとなっていますが、そういうことですか??
kajikajisan

2020/10/21 01:45

> コードはマークダウンのcode機能にてご提示ください 初めてで使い方が分からなくて申し訳ありません。 code機能というのはどう使えば良いでしょうか?
kajikajisan

2020/10/21 01:47

> h1 > aが表示されないスタイルとなっていますが、そういうことですか?? h1もliも文字は見えなくして背景画像でクリック出来るようにしたいのです。
kajikajisan

2020/10/21 02:17

ヘルプページありがとうございました。
m.ts10806

2020/10/21 02:27

細かくて申し訳ないですが、htmlのほうもcssと同じく ```html のようにしてもらえたらと。 なるべく実際のコード以外が入り込まない方がこちらの手元で確認しやすいので。
m.ts10806

2020/10/21 02:29 編集

あと、「エラーを探しても」とのことですが、html,cssはエラーがでなくて、本当にコードのとおりに描画されるだけとなります。 「文法は間違いないか」「整合性は取れているか」を確認することになります。 前者の文法についてはチェックしてくれるサイトはありますし、チェック機能のあるエディタで確認はできます。
kajikajisan

2020/10/21 02:38

エディタのエラーマークは出ていません。 検証も同じく間違いがあればエラーが出る物だと思っていました。 無知すぎて本当にすみません。
guest

回答1

0

ベストアンサー

こんにちは。

無効というか、インデントで親要素の外に出ているのだと思います。
とりあえず、こんな感じでしょうか。

css

1nav a{ 2 display: block; 3}

投稿2020/10/21 02:35

Lhankor_Mhy

総合スコア35860

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kajikajisan

2020/10/21 02:47

ありがとうございます。 直りました。 困った時のdisplay:block;ですね。
Lhankor_Mhy

2020/10/21 02:55

display: inline のCSS仕様はかなり複雑ですからね。 position: absolute と並んで、display: inline は安易に使わない方がいいスタイルです。初期値ですが。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問