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

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

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

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

CSS

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

Q&A

解決済

1回答

337閲覧

navのタブメニューの要素が、ずっと表示されてしまいます。続き

miramikan

総合スコア26

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/07/10 06:32

編集2017/07/10 07:28

コードが文字数の関係で収まらなかったので、HTMLだけ別で再投稿させていただきました。CSSは1つ前の投稿にございます。(https://teratail.com/questions/83539)
見辛くて申し訳ありません。よろしく願いいたします。

HTML

1 2 <!DOCTYPE html> 3<html lang="ja"> 4<head> 5 <meta charset="UTF-8"> 6 <title>###</title> 7 8 9 10 <link rel="stylesheet" type="text/css" href="test.css"> 11 <link rel="icon" href="icon.jpg"> 12 13 14</head> 15<body> 16 17 18 19 20 <div class="main"> 21 <p class="photo-title">###</p> 22 23 24 <div class="box"> 25 <div class="whole-photo"> 26 27 28 <img src="pic.png" > 29 30 31 </div> 32 </div> 33 34 35 36 <div class="note" id="note"> 37 <img src="green.png" class="tape"/> 38 39 <p class="memo-title">〜メモ〜</p> 40 <div class="letters"> 41 <p>""" 42 </p> 43 </div> 44 45 </div> 46 47 48 49 <div> 50 51 52 <div> 53 <nav class="tab-change"> 54 <a href='#howtosee'>見かた</a> 55 <a href='#this-week'>一週間</a> 56 <a href='#today'>今日</a> 57 58 59 </nav> 60 </div> 61 62 63 64 <div id='today' class='content'> 65 <p class="Day-title"><span id="view_today"></span>音情報</p> 66 <div class="day"> 67 <table border="1" rules="cols" > 68 69 <tr> 70 <td>10時</td> 71 <td>12時</td> 72 <td>14時</td> 73 <td>16時</td> 74 <td>18時</td> 75 </tr> 76 77 <tr> 78 <td> 79 80 81 82 83 <div class="base"> 84 85 <div class="low-frequency"> 86 <img src="frequency-4.png" > 87 </div> 88 89 <div class="decibel"> 90 <img src="decibel-2.png"> 91 </div> 92 </div> 93 94 <p>79Hz</p> 95 96 </td> 97 <td> 98 99 <div class="base"> 100 101 <div class="low-frequency"> 102 <img src="frequency-1.png"> 103 </div> 104 105 <div class="decibel"> 106 <img src="decibel-2.png"> 107 </div> 108 </div> 109 110 <p>237Hz</p> 111 112 </td> 113 <td> 114 115 <div class="base"> 116 117 <div class="low-frequency"> 118 <img src="frequency-3.png"> 119 </div> 120 121 <div class="decibel"> 122 <img src="decibel-3.png"> 123 </div> 124 </div> 125 126 <p>195Hz</p> 127 128 129 130 131 </td> 132 <td> 133 134 <div class="base"> 135 136 137 138 139 140 141 <div class="low-frequency"> 142 <img src="lowest.png"> 143 </div> 144 145 <div class="decibel"> 146 <img src="decibel-2.png"> 147 </div> 148 </div> 149 150 <p>250Hz</p> 151 152 153 154 </td> 155 <td> 156 157 <div class="base"> 158 159 <div class="low-frequency"> 160 <img src="frequency-3.png"> 161 </div> 162 163 <div class="decibel"> 164 <img src="decibel-3.png"> 165 </div> 166 </div> 167 168 <p>129Hz</p> 169 170 171 172 173 </td> 174 175 </tr> 176 177 </table> 178 </div> 179 180 </div> 181 <div id='this-week' class='content'> 182 <p class="Week-title">情報</p> 183 <div class="week"> 184 <table border="1" rules="cols"> 185 186 <tr> 187 <td>月</td> 188 <td>火</td> 189 <td>水</td> 190 <td>木</td> 191 <td>金</td> 192 <td class="hide">土</td> 193 <td class="hide">日</td> 194 195 </tr> 196 197 <tr> 198 <td> 199 <img src="rest.png"> 200 201 </td> 202 <td> 203 204 <img src="rest.png"> 205 206 </td> 207 <td> 208 <img src="rest.png"> 209 210 211 </td> 212 <td> 213 <img src="rest.png"> 214 215 216 </td> 217 <td> 218 <img src="rest.png"> 219 220 221 </td> 222 <td class="hide"> 223 224 <img src="rest.png"> 225 </td> 226 <td class="hide"> 227 <img src="rest.png"> 228 </td> 229 </tr> 230 231 </table> 232 </div> 233 234 </div> 235 236 237 238 239 <div id='howtosee' class='content'> 240 241 242 243 <p class="howtosee-title">見方</p> 244 245 246 247 248 <div class="out"><p class="in" id="explain-1">###</p> 249 </div> 250 251 252 253 <div class="frequency-levels"> 254 <img src="frequency-levels.png"> 255 </div> 256 257 <p class="small-1">####</p> 258 259 260 <div class="out"><p class="in" id="explain-2">####</p> 261 </div> 262 263 <div class="decibel-levels"> 264 <img src="decibel-levels.png"> 265 </div> 266 267 <p id="explain-3">####</p> 268 <p class="small-2">#####</p> 269 270 271 272 <p class="howtosee-title2">###</p> 273 <p class="explain">####</p> 274 <p class="explain"><br>####。<br/><br>#####<br/></p> 275 276 277 278 <p class="howtosee-title3">###</p> 279 <p class="explain">###。<br> 280 <br>###</p> 281 282 283 284 285 286 287 </div> <!-- #howtoseeの閉じタグ --> 288 289 290 </div> 291 292 293 294 295 296 297 298 299 300</div> 301 302</body> 303</html> 304 305

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

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

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

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

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

m.ts10806

2017/07/10 06:37

関連性があるならURLを貼ってもらった方が良いです。これだけ見た人が「なんのこっちゃ」ってならないように。あと、そのまま貼り付けてるからか分かりませんが、無駄な空白行が多いと思います。可読性にも欠けるので適切に空けて適切に詰めるようにしてください(実際のソースでも)
miramikan

2017/07/10 06:45

アドバイスありがとうございます。わかりました!読みやすいコードを書けるよう、以後気をつけます。
guest

回答1

0

ベストアンサー

質問者さんのコードの文法的な誤りなどを修正したもので検証しましたが、問題が再現しませんでした。以下のコードを一度実行してみてください。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>###</title> 6 <link rel="icon" href="icon.jpg"> 7 <style type="text/css"> 8.tab-change a,table{background-color:#fff}.tab-change{height:auto;margin:10% 27% 15%}.tab-change a{border-radius:7px 7px 0 0;display:inline-block;line-height:38px;text-align:center;color:#000;margin-left:auto;margin-right:6%;font-size:20px;float:right;text-decoration:none;padding:0 32px}.Day-title,.Week-title{margin-left:10%;border-bottom:3px solid #23c1ea;margin-top:20%;text-align:center}.Day-title,.Week-title,table{font-size:25px}.tab-change a:hover{opacity:.6}.tab-change a:nth-child(1),.tab-change a:nth-child(2),.tab-change a:nth-child(3){border-top:6px solid #23c1ea}.content{height:320px;display:none}.box:after,.content:target{display:block}.Week-title{width:17%;padding-top:8%}.Day-title{width:24%;padding-top:8%}.day tr td,.week tr td,table{border:1px solid #000}table{margin-left:0;margin-right:auto;width:100%;height:100%}.day img,.week img{width:200px}.day,.week{text-align:center;font-size:22px;margin-top:auto;margin-left:10%;margin-right:10%}#explain-1,#explain-2{margin-left:47%;font-size:22px}.box:after{content:' ';clear:both}.base{position:relative}.low-frequency,.low-frequency2{position:absolute;left:-8%}.decibel{margin-top:0;padding-top:8%}.out{position:relative}.in{position:absolute}#explain-1::before,#explain-2::before{position:relative;top:.8em;margin-right:.5em}#explain-1{margin-top:10%;padding:0}#explain-1::before{content:url(https://placehold.jp/3d4070/ffffff/150x150.png?text=symbol-2.png)}#explain-2{margin-top:17%}#explain-3,.small-1{padding-right:55%;margin-left:13%}#explain-2::before{content:url(https://placehold.jp/3d4070/ffffff/150x150.png?text=symbol-1.png)}#explain-3{padding-top:10%;font-size:22px}.small-1{padding-top:0;margin-top:23%}.small-2{margin-left:16%}.explain{margin-right:5%;margin-left:10%;font-size:22px}.frequency-levels img{width:40%;height:40%;margin-top:-10%;margin-left:5%}.decibel-levels img{width:32%;height:32%;padding:0;margin:3% 50% 5% 10%}.howtosee-title,.howtosee-title2,.howtosee-title3{border-bottom:3px solid #23c1ea;font-size:26px;text-align:center;margin-left:10%}.howtosee-title{width:14%;padding-top:10%}.howtosee-title2{width:12%;padding-top:10%}.howtosee-title3{width:17%;margin-top:10%} 9 </style> 10</head> 11<body> 12<div class="main"> 13 <p class="photo-title">###</p> 14 <div class="box"> 15 <div class="whole-photo"> 16 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=pic.png"> 17 </div> 18 </div> 19 <div class="note" id="note"> 20 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=green.png" class="tape"/> 21 <p class="memo-title">〜メモ〜</p> 22 <div class="letters"> 23 <p>""" 24 </p> 25 </div> 26 </div> 27 <div> 28 <div> 29 <nav class="tab-change"> 30 <a href='#howtosee'>見かた</a> 31 <a href='#this-week'>一週間</a> 32 <a href='#today'>今日</a> 33 </nav> 34 </div> 35 <div id='today' class='content'> 36 <p class="Day-title"><span id="view_today"></span>音情報</p> 37 <div class="day"> 38 <table border="1" rules="cols"> 39 <tr> 40 <td>10時</td> 41 <td>12時</td> 42 <td>14時</td> 43 <td>16時</td> 44 <td>18時</td> 45 </tr> 46 <tr> 47 <td> 48 <div class="base"> 49 <div class="low-frequency"> 50 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=frequency-4.png"> 51 </div> 52 <div class="decibel"> 53 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=decibel-2.png"> 54 </div> 55 </div> 56 <p>79Hz</p> 57 </td> 58 <td> 59 <div class="base"> 60 <div class="low-frequency"> 61 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=frequency-1.png"> 62 </div> 63 <div class="decibel"> 64 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=decibel-2.png"> 65 </div> 66 </div> 67 <p>237Hz</p> 68 </td> 69 <td> 70 <div class="base"> 71 <div class="low-frequency"> 72 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=frequency-3.png"> 73 </div> 74 <div class="decibel"> 75 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=decibel-3.png"> 76 </div> 77 </div> 78 <p>195Hz</p> 79 </td> 80 <td> 81 <div class="base"> 82 <div class="low-frequency"> 83 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=lowest.png"> 84 </div> 85 <div class="decibel"> 86 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=decibel-2.png"> 87 </div> 88 </div> 89 <p>250Hz</p> 90 </td> 91 <td> 92 <div class="base"> 93 <div class="low-frequency"> 94 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=frequency-3.png"> 95 </div> 96 <div class="decibel"> 97 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=decibel-3.png"> 98 </div> 99 </div> 100 <p>129Hz</p> 101 </td> 102 </tr> 103 </table> 104 </div> 105 </div> 106 <div id='this-week' class='content'> 107 <p class="Week-title">情報</p> 108 <div class="week"> 109 <table border="1" rules="cols"> 110 <tr> 111 <td>月</td> 112 <td>火</td> 113 <td>水</td> 114 <td>木</td> 115 <td>金</td> 116 <td class="hide">土</td> 117 <td class="hide">日</td> 118 </tr> 119 <tr> 120 <td> 121 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=rest.png"> 122 </td> 123 <td> 124 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=rest.png"> 125 </td> 126 <td> 127 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=rest.png"> 128 </td> 129 <td> 130 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=rest.png"> 131 </td> 132 <td> 133 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=rest.png"> 134 </td> 135 <td class="hide"> 136 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=rest.png"> 137 </td> 138 <td class="hide"> 139 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=rest.png"> 140 </td> 141 </tr> 142 </table> 143 </div> 144 </div> 145 <div id='howtosee' class='content'> 146 <p class="howtosee-title">見方</p> 147 <div class="out"> 148 <p class="in" id="explain-1">###</p> 149 </div> 150 <div class="frequency-levels"> 151 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=frequency-levels.png"> 152 </div> 153 <p class="small-1">####</p> 154 <div class="out"> 155 <p class="in" id="explain-2">####</p> 156 </div> 157 <div class="decibel-levels"> 158 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=decibel-levels.png"> 159 </div> 160 <p id="explain-3">####</p> 161 <p class="small-2">#####</p> 162 <p class="howtosee-title2">###</p> 163 <p class="explain">####</p> 164 <p class="explain"> 165 <br>####。 166 <br/> 167 <br>##### 168 <br/> 169 </p> 170 <p class="howtosee-title3">###</p> 171 <p class="explain">###。 172 <br> 173 <br>### 174 </p> 175 </div> 176 <!-- #howtoseeの閉じタグ --> 177 </div> 178</div> 179</body> 180</html> 181 182

動作確認済みブラウザ

  • Google Chrome(バージョン: 59.0.3071.115)
  • Firefox(バージョン: 54.0.1)
  • Opera(バージョン: 46.0.2597.26314)

投稿2017/07/10 08:16

編集2017/07/10 08:32
s8_chu

総合スコア14731

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

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

s8_chu

2017/07/10 08:22

なぜか回答の編集が何回試しても反映されないのでコメントに書きますが、CSSは文字数の関係で圧縮しています。
miramikan

2017/07/10 08:27

ありがとうございます!! 画像は表示されなかったのですが要素が重なることはありませんでした! 元のコードにもこのようにかけば良いのでしょうか?
s8_chu

2017/07/10 08:34 編集

> 元のコードにもこのようにかけば良いのでしょうか? 画像は表示されなかった、というのがよくわかりませんが、問題がないならば良いと思います。 コメントに書いてしまいますが、修正した箇所は以下の2箇所です。 ```CSS .frequency-levels img{ width: 40%; height:40%; /* height:40%:;を修正 */ margin-top:-10%; margin-left:5%; } ``` ```CSS .decibel-levels img{ width: 32%; height:32%; /* height:32%:;を修正 */ margin-top:3%; margin-right:50%; margin-left:10%; padding:0%; margin-bottom:5%; } ```
miramikan

2017/07/10 10:23

細かく教えてくださってありがとうございます!!画像に関しては、 HTMLファイルをブラウザで開いた際に、pic.pngなどと文字だけが表示されてしまいます。 ちなみに、placeholdとは、どのようなものなのでしょうか?
s8_chu

2017/07/10 10:38

ダミーの画像を置いているだけです。適当に置き換えても大丈夫だと思いますよ。
miramikan

2017/07/10 11:04

そうなのですね!ありがとうございます。 何度も大変申し訳ないのですが、書いてくださったコードに、省略せずに全てのコードHTMLとCSSを足したところ、また最初に戻ってしまいました。 #howtosee { display:none; } としても、反応がないので、#howtosee自体がdivとして囲まれていないのでしょうか?
s8_chu

2017/07/10 11:13

回答文のコードの状態だと動くのでしょうか?
miramikan

2017/07/10 11:27 編集

はい。今試してみましたが、書いてくださったコードだと、#howtosee { display:none; } が有効です!
s8_chu

2017/07/10 11:40

質問文で省略しているコードを足したらおかしくなった、ということであれば、そのコードを見ない限りどこが悪いのかはわからないですね...
miramikan

2017/07/10 12:02

そうですよね、、 コードが1000文字以上になってしまい、貼り付けられないのですが、 何か方法はあるでしょうか?
miramikan

2017/07/10 12:13

ありがとうございます!そんなものがあるのですね!signupしました
s8_chu

2017/07/10 12:34

#howtosee { display: none; } を削除することで期待した動作になると思いますが、いかがでしょうか?
miramikan

2017/07/10 12:42

おかしいですね、まだ、今日というタブを押しても、先週というタブを押しても、音情報の要素が被って表示されてしまいます。
miramikan

2017/07/10 13:18

できました!!!!本当に本当にありがとうございました(T ^ T) 明日までにどうにかしないといけなかったので、本当に助かりました!根気強く何度も丁寧に教えてくださって、本当に感謝です。。
miramikan

2017/07/10 13:26

本当にありがとうございました(>_<) ただいま解決済みにしました! 今回は、何が問題だったのでしょうか?
s8_chu

2017/07/10 13:28

今回は #howtosee { display: none; } を削除しただけですね。
miramikan

2017/07/10 13:31

えぇ!そうなのですか!! ありがとうございました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問