Q&A
(質問は編集できます)
現象再現するコードとできれば画面キャプチャをご提示ください。
またHTMLやCSSは構文解析にでもかけないとエラーは確認できないと思います。
構文チェック機能のあるエディタでも使われたのでしょうか？「どのようにエラー確認したか」も質問本文にご提示ください
質問内容
プログラミング初学者で、現在HTML/CSSの勉強がてら、VS Codeで簡単なホームページの作成をしています。
上手くHTMLが動作しているか確認の為、ChromeやMicrosoft edge等のブラウザ上でHTMLプレビューを表示して確認しているのですが、一部反映されない部分があります。エラーもないので、コードは合っていると思います。
調べても分からない為、原因を教えてもらえたらと思います。
反映されない箇所
①【略語abbrタグ】と【imgタグ】のtitle属性が表示されない
②引用blockquoteタグがインデントされない
③引用qタグがダブルクォーテーション""表示ではなく鍵括弧｢｣
④セレクトボックスselect, inputタグ内の選択・入力が出来ない
⑤sectionタグ内の見出しh1がh3サイズになる(h1以外のサイズは正常) ※画像上部の【これはHTMLのh〇です】
⑥見出しh1のサイズがh2サイズになる(h1以外のサイズは正常)
以上、よろしくお願いします。
###追記(1)
上の現象は、HTMLとCSSファイルで作成しブラウザのプレビューで確認すると発生していました。
ですが、只今CSS抜きでHTMLのみでプレビューを確認した所、不具合は⑤と⑥の２点になりました。
⑤sectionタグ内の見出しh1がh3サイズになる(h1以外のサイズは正常)
⑥見出しh1のサイズがh2サイズになる(h1以外のサイズは正常)
という事は、他の４つの不具合はCSS側で悪さをしているんだと思います。
コードには悪さをしそうな箇所は見当たりませんでした。
HTMLとCSSを同時にブラウザのプレビューで確認すると、①～④４点の不具合が発生します。
何かその様な現象が起こる原因等あるのでしょうか？
初めてのコーディングで、練習用の非常に不格好なコードですが、貼っておきます。お気を害したらすみませんm(__)m
まさかこれを公開する事になるとは…恥ずかしいですね。
おかしい場所があればどんどんコメント下さい！！
追記(2)
①～④は解決しました。headerのheightが100%の為、下部全てに影響していました。
本当にありがとうございました！！
⑤と⑥はまだ解決していません。
⑤はsectionタグが影響しているとみて間違いないと思います。
⑥に関しては、場所を問わずh1がh2のサイズになるので、チンプンカンプンです。
念の為、見出しタグ変更前と変更後のキャプチャーを貼っておきます。
※画像上部の【これはHTMLのh〇です】と、プロフィール欄の名前【わし】の見出しタグを変更したが、サイズ変わらず。
見出しタグ変更前(画像上部の【これはHTMLのh3です】の見出しタグがh3、プロフィール欄の名前【わし】の見出しタグがh2)
見出しタグ変更後(画像上部の【これはHTMLのh1です】の見出しタグをh1・プロフィール欄の名前【わし】の見出しタグをh1に変更したが、サイズ変わらず)
HTML
1<!DOCTYPE html> 2 <html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="ask.css"> 6 <title>わし BLOG</title> 7 </head> 8<!----------------------------------------------------------> 9 <body> 10 <header> 11 <div class="container"> 12 <nav> 13 <div id="header-tytle"> 14 <a href="#">初学者 ぶろぐ</a> 15 </div> 16 <div id="header-list"> 17 <ul id="header-ul"> 18 <li><a href = "https://www.google.co.jp/" class="ul-btn">HOME</a></li> 19 <li><a href = "#" class="ul-btn">日 常</a></li> 20 <li><a href = "#" class="ul-btn">旅 行</a></li> 21 <li><a href = "#" class="ul-btn">学 習</a></li> 22 <li><a href = "#contact" class="ul-btn">CONTACT</a></li> 23 </ul> 24 </div> 25 </nav> 26 </div> 27 </header> 28<!----------------------------------------------------------> 29 <main> 30 <article> 31 <div class="container"> 32 <div class="contents"> 33 <section> 34 <h1>これは<abbr title="Hypertext Markup langage">HTML</abbr>のh1です</h1> 35 <blockquote cite="http://www.blog.com"> 36 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 37 </blockquote> 38 </section> 39 <br> 40 </div> 41 </div> 42 <div class="container"> 43 <div class="contents"> 44 <h2>僕の映画ベストワンは<cite>"Back to the Future"</cite></h2> 45 <p><em>Lorem ipsum</em> dolor sit amet, <q>consectetur adipiscing elit,</q> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 46 <br> 47 <hr><br> 48 <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 49 </div> 50 </div> 51 </article> 52 <article> 53 <div class="container"> 54 <div id="contact"> 55 <h2>CONTACT</h2> 56 <h3>お問い合わせ・ご質問</h3> 57 <p><strong>(お名前)</strong></p> 58 <input type="text" name="name"> 59 <input type="radio" name="gender" value="male">男性 60 <input type="radio" name="gender" value="female">女性 61 <p><strong>(お住まい)</strong></p> 62 <select name="adress"> 63 <optgroup label="関東"> 64 <option value="tokyo">東京</option> 65 <option value="chiba">千葉</option> 66 <option value="kanagawa">神奈川</option> 67 </optgroup> 68 <optgroup label="関西"> 69 <option value="tokyo">東京</option> 70 <option value="chiba">千葉</option> 71 <option value="kanagawa">神奈川</option> 72 </optgroup> 73 </select> 74 <p><strong>(お好きな検索サイト)</strong></p> 75 <input type="checkbox" name="website" value="google">Google 76 <input type="checkbox" name="website" value="yahoo">Yahoo 77 <input type="checkbox" name="website" value="other">その他 78 <p><strong>(パスワード)</strong></p> 79 <input type="password" name="pass"> 80 <p><strong>(質問内容)</strong></p> 81 <textarea name="ask" rows="5" cols="80"></textarea> 82 </div> 83 </div> 84 </article> 85 </main> 86<!----------------------------------------------------------> 87 <aside> 88 <div class="container"> 89 <div id="introduce"> 90 <img src="profile(IMG_1001).jpg" alt="わしのプロフィール写真。" title="わしプロフィール写真" width="90%"> 91 <h1>わし</h1> 92 <br> 93 <p>男。2000年生まれ。東京都在住。<br> 94 趣味：旅行・アニメ・漫画 95 </p> 96 </div> 97 </div> 98 </aside> 99 </body> 100 </html>
CSS
1* { 2 margin: 0; 3 padding: 0; 4 box-sizing: border-box; 5} 6 7body { 8 background-color: #f5f5f5; 9 padding: 0 20px; 10 margin-bottom: 50px; 11} 12 13li { 14 list-style: none; 15} 16 17li a { 18 text-decoration: none; 19} 20 21.container { 22 background-color: white; 23 margin-bottom: 0; 24} 25/*----------------------------------------------------*/ 26header { 27 height: 100%; 28 position: fixed; 29 opacity: 0.9; 30 top: 0; 31 left: 0; 32 right: 0; 33 z-index: 10; 34} 35 36#header-tytle { 37 float: left; 38} 39 40#header-tytle a { 41 background: linear-gradient(to right, red , gold, blue); 42 -webkit-background-clip: text; 43 color: transparent; 44 font-weight: bold; 45 font-size: 2rem; 46 padding-left: 30px; 47} 48 49#header-list { 50 margin-left: 270px; 51} 52 53#header-ul { 54 display: flex; 55 max-width: 800px; 56} 57 58#header-ul li { 59 line-height: 25px; 60 background-color: black; 61 width: calc(100% / 5); 62 border: 1px solid black; 63 margin: 5px; 64 border-radius: 5px; 65} 66 67#header-ul li a:hover { 68 background-color: blue; 69} 70 71#header-ul li a{ 72 display:block; 73 text-align: center; 74} 75 76 77li:first-child a { 78 color: white; 79} 80 81li:nth-child(n+2):nth-child(-n+4) a{ 82 color: whitesmoke; 83} 84 85li:last-of-type a { 86 color: white; 87} 88/*----------------------------------------------------*/ 89main { 90 float: left; 91 width: 60%; 92 margin-top: 80px; 93} 94 95main .container { 96 margin-bottom: 70px; 97} 98 99section p::first-line { 100 color: blue; 101} 102 103.contents p ~ p { 104 color: purple; 105} 106/*----------------------------------------------------*/ 107aside { 108 float: right; 109 width: 35%; 110 text-align: center; 111 margin-top: 80px; 112} 113 114#introduce { 115 padding: 30px 0; 116} 117 118#introduce img { 119 border: 20px dotted gold; 120}
返信ありがとうございます！遅くなりましたが、編集しました。
エラーはVS Code下部ステータスバーで確認したのみです。構文解析は分からないので調べてみます。
＞エラーはVS Code下部ステータスバーで確認したのみです。
全てのひとがVSCodeを利用するとは限らないので画面キャプチャご提示ください。（現に私はほとんど使ったことがないです）
どの部分の画面キャプチャでしょうか？
あ、ごめんなさいエラー出てないんでしたね。
一応、「下部ステータスバー」のキャプチャがあれば
エラー出てないことのエビデンスにはなるんですけど、
ちゃんとコード出てきたので大丈夫かなとは思います。
分かりました。次回から気を付けます！ご指摘ありがとうございます。
回答2件
0
ベストアンサー
④セレクトボックスselect, inputタグ内の選択・入力が出来ない
headerが全体を覆ってます。
%の指定は基本的に親にあわせるので利用するときは注意です。
①【略語abbrタグ】と【imgタグ】のtitle属性が表示されない
についてもheaderが上に乗ってるので出なかったんではないでしょうか。
②引用blockquoteタグがインデントされない
下記の指定が*なので全部にきいてます。
css
1* { 2 margin: 0; 3 padding: 0; 4 box-sizing: border-box; 5}
blockquoteなどもその影響でしょう。
bodyの指定も同様ですね。
⑤sectionタグ内の見出しh1がh3サイズになる(h1以外のサイズは正常)
⑥見出しh1のサイズがh2サイズになる(h1以外のサイズは正常)
CSSではなくsectionタグの仕様のように思います。
<section>: 汎用セクション要素
↑のHTML DemoのHTMLをいじってみると分かります。
仕様書へのリンクもあるので、興味があったら読んでみてください。
投稿2020/03/24 11:27
編集2020/03/24 12:08総合スコア80875
①～④は解決しました！ありがとうございます！
まさしくご指摘の通りでしたm(__)m
⑤と⑥ですが、h1を使うと上手く表示されない為、他の見出しタグで代用しました。
これだけはやっぱり上手くいかないです。うーむ。
なるほど。こちらとしては「想定通りできない」情報が欲しいので、
できればh1にしたコードに差し替えてください。
ただ、私がheaderが覆っていたことを突き止めたように
デベロッパーツール使えば何が影響しているかすぐ見つかりそうに思います。
出典見つけてないですが、sectionタグの仕様かもしれません。
ただ、「h1のサイズを調整したい」なら
section h1 に対してfont-sizeを指定すればいいだけではないでしょうか。
まだプログラミング初めたてで、デベロッパーツールも全然分からないので、これから使いこなせるよう精進します。
そうですね。とりあえずはfont-sizeで逃げてみます。
ご丁寧に何度も教えて頂き、ほんとにありがとうございます。泣きそうです。
逃げる・・と言ってもそうするしかないのでは。
結局「h1のサイズじゃない」というだけでどうしたいのか分かりませんけど・・・
ただ、通常のh1のサイズだとかなり大きくなるので、一応、何個も設置するのでしたらh2にしてサイズ調整でいいかなとも思います。
なぜh1が効かないのかが気になるんですけど、こういう事象は時々起こるんですかね？
えっと、ですから、sectionの仕様ではないかと書いてます。
回答にもリファレンスのリンク追記してます。
確かにsection内のh1が効かない仕様みたいですね。
ですが、section以外のh1も効かないんですよね。h2サイズになるんです。
CSSで調整する様にします。
ありがとうございました！！
既にある回答のようにCSSでの調整が通常です。
あと結局は「文書系のタグに包括されると自動で適切なサイズに調整される」だけだと思います。つまりHTML5の仕様。
完全に外に出した場合とかだと見慣れた2emサイズで表示されます。
とはいえ、h系のタグをデフォルトサイズで使うことって昨今ないと思いますけど・・・。
ふーむ、なるほど。知らない事だらけです。奥が深いですね。
もっと勉強して頑張ります。感謝です！！
結局のところ「何をしたいか」「なぜしたいか」次第なんですよね。要件次第。「どうやってするか」手段はそのあとです。
そうですね。不格好でも、まずは色々作ってみます。
0
【略語abbrタグ】と【imgタグ】のtitle属性が表示されない
HTML
1<abbr title="Hypertext Markup Language">HTML</abbr>
再現しませんでした。
引用blockquoteタグがインデントされない
ご自分で引用と言っている通り、引用であることを示すだけです。インデントのような見た目は CSS で行ってください。
引用qタグがダブルクォーテーション""表示ではなく鍵括弧｢｣
これも CSS です。quotes プロパティ。4 も 5 も CSS の話。
https://developer.mozilla.org/ja/docs/Web/CSS/quotes
select, inputタグ内の選択・入力が出来ない
再現しません。
投稿2020/03/24 08:27
総合スコア13749
あなたの回答
tips
プレビュー
