Q&A
実現したいこと
つい最近html,cssを勉強し始めた初心者です。
入門書を1冊一通り読んだ為、復習を兼ねた簡単なホームページ制作を行っています。
発生している問題
ulタグ(箇条書き)にリンクを踏ませるためにnavタグを付けました。 そのあと横並びにするため、CSSでfloat:left;を用いたところ、横並びにもなり、問題なくリンクも踏めるのですが、 箇条書きの下に記載している説明文やコピーライトまでリンク付きの文章になってしまいました。 (何も設定していないのにマウスを合わせるとクリックできるようになってしまいます) 最初はfloatが原因だと思い、入門書に沿ってclearfixを用いましたが効いていないのか改善されることはありませんでした。 その後CSSとの連携を切ったところ、症状が改善されなかった為、私の書いたHTMLに問題があると思われます。
該当のソースコード
HTML5
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<meta name="author"="munchen"> 6<title>MaidInHeaven</title> 7<link href="TOP.css" media=all rel="stylesheet"> 8</head> 9<div> 10<body> 11<main> 12<header> 13<font size="7">Maid In Heaven</font> 14</header> 15<img src="img20200729122623.jpg" alt="館" width="60%" height="30%"> 16<h1>ようこそ。<ruby><rb>死の館</rb><rt>エンパイアクラブ</rt></ruby> へ</h1> 17 18<nav> 19<ul> 20<h1> 21<li><a href="TOP.html">TOP</li> 22<li><a href="Story.html">Story</li> 23<li><a href="Character.html">Character</li> 24<li><a href="Gallery.html">Gallery</li> 25</h1> 26</ul> 27</nav> 28<section> 29<h1>Infomation</h1> 30公式HPです。 31</section> 32</main> 33<footer> 34<p>Copyright 2020 Munchen.</p> 35</footer> 36</div> 37</body> 38</html>
試したこと
clearfix関連のサイトをいくつか見ましたが、解決になるような記事は見つかりませんでした。
補足情報（FW/ツールのバージョンなど）
ツールはwindowsのメモ帳で行っています。
回答1件
0
ベストアンサー
HTML記述ミスです。
CSSに移る前にまずは骨組みを修正しましょう。
気になることもあるのでそちらも記載しますね。
- 最初の<div>が<body>の外に出てしまっている
- aタグにおける終了タグ</a>がない（最後までリンクが続いてるのはこれが原因）
- mainタグはメインコンテンツを括るタグだと思われるのでその中にheaderタグを含めるのは違う
- 恐らくnavタグはheaderタグの中に含めるのが正しい解釈
- fontタグは使わないようにしましょう
HTML5になってから追加された概念のタグは自分も曖昧なので参考程度に聞いて欲しいですが、
質問者さんのHTMLの骨組みを正しく組み替えると…
html
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<meta name="author"="munchen"> 6<title>MaidInHeaven</title> 7<link href="TOP.css" media=all rel="stylesheet"> 8</head> 9<body> 10 <header> 11 <h1>Maid In Heaven</h1> 12 <img src="img20200729122623.jpg" alt="館" width="60%" height="30%"> 13 <p>ようこそ。<ruby><rb>死の館</rb><rt>エンパイアクラブ</rt></ruby> へ</p> 14 <nav> 15 <ul> 16 <li><a href="TOP.html">TOP</a></li> 17 <li><a href="Story.html">Story</a></li> 18 <li><a href="Character.html">Character</a></li> 19 <li><a href="Gallery.html">Gallery</a></li> 20 </ul> 21 </nav> 22 </header> 23 <main> 24 <article> 25 <h1>Infomation</h1> 26 </article> 27 <section> 28 <p>公式HPです。</p> 29 </section> 30 </main> 31 <footer> 32 <p>Copyright 2020 Munchen.</p> 33 </footer> 34</body> 35</html>
私はこのような解釈をしています。
header、nav、main、article、section、footerなどの新しいタグは解釈の難しいところがあります。
私の意見だけを鵜呑みにせず、いろんな人の意見を聞いたり、調べたりするといいと思います。
おそらく、HTMLの骨組みは問題ないと思われるので確認をしてみて問題なければ
そこからCSSを組み込んでいきましょう。
余談ですがfontタグは現在では非推奨とされています。
懐かしいタグを久しぶりに見ましたが、centerタグなども同じです。
何が非推奨なのかということについてはお調べいただくのがよろしいかと思いますが、
基本的にデザインに影響するタグは使わない、という感覚でいい気がします。
fontでは文字が大きくできますし、centerでは文字をセンタリングできます。
こう言ったことは全てCSSで行うことができるので、HTMLはあくまで骨組みだけ。
デザインはHTMLでしてはいけないというような感覚でいいかと思います。
私も自分の意見が正しいかどうか分かりませんので皆さんの意見を参考にしたいところです。
それとWindows標準のメモ帳は止めた方がいいと思います。
今回のようなミスが発見しにくいです。
HTML、テキストエディタのように検索するといろいろ出てくると思うので、
自分に合ったものを使ってみるといいかと思います。
投稿2020/08/13 08:17
編集2020/08/13 08:31
総合スコア230
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/14 04:43