• 締切済み

一番上へ移動のコード

<html> <head> <title>test</title> </head> <body> <h1 id="top">TOP</h1> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <a href="#top">上へ1</a> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <a href="#top">上へ2</a> </body> </html> このような書き方はよくないのでしょうか? コードをチェックすると、 <A> のアンカー名 `top` は 524行目で ID 属性として定義されています。 となります。 同一ページ内複数の「上へ」があり、それをクリックすると、一番上へ移動したいのですが、 正しい書き方を教えてください。 解説の ---------------------------------------------------------------------------------------------------------------- <A href="#HOEE"> に対応するアンカーを、ID属性で指定してもいいことになっています。 つまり、このリンクに <H1 id="HOEE"> のようなのが対応してもいいのです。しかし、古いWWWブラウザの実装ではこのような対応はあまり実現できていないようです。 XHTML1.0(J)ではNAME属性でなくてID属性を使うように薦められており、XHTML1.1ではそのようなNAME属性は廃止されています。 HTML4.0以外では警告されません。この警告は減点されません。 --------------------------------------------------------------------------------------------------------- を読んでもよく意味が分かりませんでした。 そもそも私のコードのどの部分がエラーになっているのかがわからないし、 「HTML4.0以外では警告されません。」となっていますが、HTML4.0なのかもわかりません。

みんなの回答

  • wellow
  • ベストアンサー率46% (892/1932)
回答No.3

ORUKA1951君 ><a name="top"><h1>TOP</h1></a> じゃ駄目なんですか? 私はあなたに質問したか? あなたに回答を期待したか? これに答える必要はない。質問者の質問に答えるという基本的なルールを理解し、それを実践すること。日本語が不自由ならな日本語学校に通うこと、それだけが必要とされていることを理解すること。 #馬鹿相手は消耗するよな。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

仕様書くらいは一度さっと通すだけでよいので読んでおきましょう。  巷の入門サイトや初心者向けの書籍・・とっても酷いものです。  ⇒HTML 4.01仕様は、3つのDTDを規定しており、著者は自分の文書に、次の3つの何れかの文書型宣言を含めねばならない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#version-info )  ⇒HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 ) ★最初に学ぶのはHTML4.01strictで良いです。他のtransitinalやframesetは手をつけない!! ><A> のアンカー名 `top` は 524行目で ID 属性として定義されています。  二箇所はありえません。 id属性は、そのページ内で唯一の要素を指定することができます。 name属性は、(BUTTON, TEXTAREA,SELECT,FORM,INPUT),(IMG,OBJECT,APPLET,IMAP),(FRAME,IFRAME),MEAT要素に使われますが、意味合いも目的も異なります。 ・リンクのターゲットでない限り一意である必要はありません。 (注)、idが併用してつく場合は同じであること ><a name="top"><h1>TOP</h1></a> じゃ駄目なんですか? a要素はHTML未満のHTMLではブロック要素を含むことはできません。 <!ELEMENT A - - (%inline;)* -(A) -- anchor -->( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/links.html#edef-A ) >あなたのブラウザが駄目なのか、解説が駄目なのかは知りませんけど、 HTMLでは、ブラウザには誤ったHTMLであっても表示しなければならない!!と定められています。XHTML/XMLは誤った物は判断しなくて良い。  HTML5では「著者に使えるもの」「ブラウザが対処すべき物」と明確になります。  <a>はanchor(錨)で、リンクの出発点や目的地を示します。id属性もリンクのターゲット足りえます。(HTML3.2以降に対応したブラウザ) 「古いWWWブラウザの実装ではこのような対応はあまり実現できていないようです。」 『XHTML1.0(J)ではNAME属性でなくてID属性を使うように薦められており、XHTML1.1ではそのようなNAME属性は廃止されています。』 ★<br><br>はダメ。スタイルシートで指定しましょう。 ★<a href="#top">上へ1</a>body要素に直接行内要素は書けません。 >HTML4.0以外では警告されません。」となっていますが、HTML4.0なのかもわかりません。  いくらなんでもそれを入ったらダメ(^^) 『HTML 4.01仕様は、3つのDTDを規定しており、著者は自分の文書に、次の3つの何れかの文書型宣言を含めねばならない。 各DTDは、サポートする要素が異なってる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#version-info )』  HTMLは、必ずその文書がどの仕様に基づいて書かれているかを宣言しなければならないのですから、あなた自身が何らかの宣言をしているはずです。 『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』  ですので、HTML4.01strictで作成することを強く推奨します。すなわち <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  と書き始めましょう。  その上で、Another HTML Lint Gateway( http://www.htmllint.net/html-lint/htmllint.html# )でチェックしましょう。  花丸がほしければ <h1><a name="TOP" id="TOP">タイトル</a></h1>  ですかね。 ヘッダーとフッターだけ背景を指定する方法 - Webデザイン・CSS - 教えて!goo( http://okwave.jp/qa/q8801696.html )でのサンプルにちょっと手を加えたもの <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> _<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> _<title>サンプル</title> _<meta name="author" content="ORUKA1951"> _<meta http-equiv="Content-Style-Type" content="text/css"> _<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > _<link rel="START" href="../index.html"> _<style type="text/css"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:100%;min-width:630px;max-width:1000px;margin:0 auto;padding:5px;} div.section div.section{width:auto;min-width:0;margin:0 200px 0 20px;} div.section{min-height:600px;position:relative;} div.section div.aside{position:absolute;top:0;right:0;width:190px;height:100%;} div.header p a[href="#TOP"]{position:fixed;bottom:20px;right:0;displzy:block;width:5em;height:2em;line-height:2em;z-index:100;text-align:center;background-color:yellow;} div.section div.section{background-color:silver;} div.header,div.footer{background-color:navy;color:white;} div.section div.aside{background-color:fuchsia;} --> _</style> </head> <body> _<div class="header"> __<h1><a name="TOP" id="TOP">タイトル</a></h1> __<p>このページでは・・・・</p> __<p><a href="#TOP">TOPへ</a></p> _</div> _<div class="section"> __<h2>見出し</h2> __<p>本文はsection</p> __<div class="section"> ___<h3>項見出し</h3> ___<p>本文項記事</p> ___<p>sectionの階層でレベルが判断される</p> __</div> __<div class="aside"> ___<h3>補足</h3> ___<p>本文と直接関係ない(asideな)記事</p> __</div> _</div> _<div class="footer"> __<h2>文書情報</h2> __<dl class="documentHistry"> ___<dt id="FIRST-PUBLISHED">First Published</dt> ___<dd>2013-03-03</dd> __</dl> _</div> </body> </html>

  • wellow
  • ベストアンサー率46% (892/1932)
回答No.1

このような書き方はよくないのでしょうか? DTDも無いようですし、文字コードも指定してないし、<br>はそもそも整形のためのものではないし、と色々とよくない部分はありますよ。ご心配なのは全部ですか? それともアンカーの部分なんですか? ><h1 id="top">TOP</h1> <a name="top"><h1>TOP</h1></a> じゃ駄目なんですか? アンカーと同じ名前をidで使わなければいけないんですか? >のようなのが対応してもいいのです。 なら、OKなんでしょう。あなたのブラウザが駄目なのか、解説が駄目なのかは知りませんけど、解説を正とするなら、解説通りに動くブラウザを探さないとなりませんね。 私は対応するタグでやるべきだと思いますけどね。 ><A> のアンカー名 `top` は 524行目で ID 属性として定義されています。 あなただけが見ることができるHTMLソースの524行目なんで、誰にも分かりませんよ。 >読んでもよく意味が分かりませんでした。 はい、私もあなたの質問の意味がよく分かりません。

関連するQ&A