• 締切済み

一番上へ移動のコード

<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なのかもわかりません。

  • HTML
  • 回答数3
  • ありがとう数9

みんなの回答

  • 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

  • ホームページの背景画像について

    ホームページを作ろうと思い、HTML語を勉強していたのですが・・・どうしても素材で持ち帰らせていただいた背景画像が表示されないんです。 <HTML> <HEAD> <TITLE>XXXXXXXX</TITLE> </HEAD> <BODY> <CENTER> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>                <A HREF="top.htm" target="contents">Home</A> <BR><BR>                <A HREF="about.htm" target="contents">about</A><BR><BR>                <A HREF="main.htm" target="contents">main</A><BR><BR>                <A HREF="link.htm" target="contents">link</A><BR><BR>                 <A HREF="http://blog.livedoor.jp/san8rain8clow/" target="contents">diary</A><BR><BR> </CENTER> </BODY> </HTML> こんな感じでタグを作っていたのですが、あと背景画像だけ表示したいんです・・・。 このタグが間違っているのでしょうか? 教えてください!

    • ベストアンサー
    • HTML
  • プルダウンメニューについてです。

    プルダウンメニューについてです。 http://javascript.eweb-design.com/0701_pdm.html こちらのサイトを参考につくっています。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // プルダウンメニュー flag = false; function pullDown() { if(flag) ID.style.visibility = "hidden"; else ID.style.visibility = "visible"; flag = !flag; } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff"> <A href="javaScript:pullDown()">メニューを表示する</A><BR> <DIV id="ID" style="position:absolute;visibility:hidden;"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> <A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR> <A href="http://shopping.yahoo.co.jp/">■Yahoo! Shopping</A><BR> <A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR> </DIV> <BR><BR><BR><BR> </BODY> </HTML> 説明がうまくできないのですが、、”メニューを表示する”をクリックしたときにドロップダウンメニューを開くと同時にページを開きたいと思っています。(”メニューを表示する”のページを作りたい。) どうしたらよいでしょうか?よろしくお願いします。

  • iframe内をリロードできますか?

    たとえば <HTML> <head> <script language="javascript"> <!-- function a1reload(){ "iframe内をリロードする文章" } //--> </script> </head> <body> <iframe src="a1.html" id="a1iframe"><br> <a href="javascript: a1reload()">ここをクリック</a> </body> </HTML> こんな感じでiframe内をリロードできないでしょうか? お願いします。

  • HTMLのアンカーリンクについて。

    HTMLのアンカーリンクについて。 アンカーリンクですが、通常どおりリンクをはると、ブラウザ画面の一番上にぴったりくっついたかたちでリンクしてしまします。 たしか、リンク先の上の幅を指定できたと思うのですが、やり方を忘れてしました(^^;ゞ ちなみにHTMLはこんな感じです。 <div id="content">  <div id="anchor">   <ul>    <li><a href="post-1">投稿1</a></li>    <li><a href="post-2">投稿2</a></li>    <li><a href="post-3">投稿3</a></li>   </ul>  </div>  <div id="entry">   <h2 id="post-1">投稿1</h2>   <h2 id="post-2">投稿2</h2>   <h2 id="post-3">投稿3</h2>  </div> </div> すこし検索してみましたが見当たらなくて、質問させていただきました。 どなたか、おわかりの方ご教授いただけると助かります。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 一番上へ移動のマークを表示するにはどうすればいい?

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>jQuery Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> </script> </head> <style type="text/css"> .page-top { margin: 0 ; padding: 0 ; } .page-top p { margin: 0 ; padding: 0 ; position: fixed ; right: 16px ; bottom: 16px ; } .move-page-top { display: block ; background: #D36015 ; width: 50px ; height: 50px ; color: #fff ; line-height: 50px ; text-decoration: none ; text-align: center ; -webkit-transition:all 0.3s ; -moz-transition:all 0.3s ; transition:all 0.3s ; } .move-page-top:hover { opacity: 0.85 ; } </style> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://自分のサイト.web.fc2.com/to-top/to-top.js"></script> <div id="page-top" class="page-top"> <p><a id="move-page-top" class="move-page-top">▲</a></p> </div> <div data-role="page"> <div data-role="header"> <h1>jQuery Mobile</h1> </div> <div role="main" class="ui-content"> <ul data-role="listview"> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> </ul> </div> <div data-role="footer"> </div> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html> これだと一番上へ移動が表示されません。 しかし、 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>jQuery Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> </script> </head> <style type="text/css"> .page-top { margin: 0 ; padding: 0 ; } .page-top p { margin: 0 ; padding: 0 ; position: fixed ; right: 16px ; bottom: 16px ; } .move-page-top { display: block ; background: #D36015 ; width: 50px ; height: 50px ; color: #fff ; line-height: 50px ; text-decoration: none ; text-align: center ; -webkit-transition:all 0.3s ; -moz-transition:all 0.3s ; transition:all 0.3s ; } .move-page-top:hover { opacity: 0.85 ; } </style> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://自分のサイト.web.fc2.com/to-top/to-top.js"></script> <div id="page-top" class="page-top"> <p><a id="move-page-top" class="move-page-top">▲</a></p> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html> これにすると表示されます。 data-roleとの相性が悪いのでしょうか? data-roleを使いつつ、一番上へ移動のマークを表示するにはどうすればいいですか?

  • ページ内部アンカー 移動

    <a href="index.html#QA">質問</a> <h2id="QA">質問</2> -------------------------- これで、部分的に移動できますが、 ここだけ、大文字で指定してある事が多いようですが #QA id="QA" とか、 小文字と大文字どっちが良いのでしょうか? HTMLとXHTMLで区別しているようにも思えませんし どっちでもよいのですか?

    • ベストアンサー
    • HTML
  • CGIだとうまくいかない!

    まずは下記ソースをご覧ください。 これを実行させると上下2のフレームができまして、上フレームにある「Jump C」と いうリンクをクリックすると、下フレームが「ccccccccc」というところまでジャンプ するように作りました。 まずは実験版としてCGIでなくPC上でHTMLファイルを作成(main.cgiがmain.htmになる) しました。その時はうまく下フレームの「cccccccc」までジャンプしたのですが、これを CGIに作り直して実行させたところ、何も動作しないままでした。 CGIでもHTML上同様の動きをさせるにはどのようにしたらよろしいでしょうか? どなたかご存知の方いましたら、ご鞭撻のほどお願い致します。 -------------- main.cgi ------------------------------------- <HTML> <HEAD><TITLE>フレームテスト</TITLE></HEAD> <FRAMESET ROWS="20%,*"> <FRAME SRC="top.cgi" NAME="FRAME2"> <FRAME SRC="btm.cgi" NAME="FRAME3"> </FRAMESET> </HTML> -------------- top.cgi ------------------------------------- <HTML> <head> </head> <body> <a href="right_btm.cgi#c" target="FRAME3">Jump C</a> </body> </html> -------------- btm.cgi ------------------------------------- <HTML> <head> </head> <body> <A NAME="#a">aaaaaaaaa<br><br><br><br><br><br><br><br><br> <A NAME="#b">bbbbbbbbb<br><br><br><br><br><br><br><br><br> <A NAME="#c">ccccccccc<br><br><br><br><br><br><br><br><br> <A NAME="#d">ddddddddddd<br><br><br><br><br><br><br><br><br> </body> </html> ------------------------------------------------------------ このCGIを実行すると、

  • サーブレットに移動できないできない

    HTTPステータス 405 - HTTPのGETメソッドは、このURLではサポートされていません。 type ステータスレポート メッセージ HTTPのGETメソッドは、このURLではサポートされていません。 <%@ page contentType="text/html; charset=UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="css/style.css" rel="stylesheet" type="text/css" /> <title>ログイン画面</title> </head> <body> <header> <h3>書籍一覧システム</h3> </header> <div id="main"> <p>ユーザーIDとパスワードを入力してください。</p> <form action="/book_list/login" method="post"> ユーザーID:<input type="text" name="bookUserId"><br> パスワード:<input type="password" name="password"><br> <input type="submit" value="ログイン"><br> <a href="<%=request.getContextPath() %>/Login">gogoggo</a> </form> </div> <%@ include file="footer.jsp"%> </body> </html> <a href="<%=request.getContextPath() %>/Login">gogoggo</a> ↑個人的にはこの部分がだめで動かないと思っているのですが まだわからないのでどなたかお力添えをお願いします

  • ページが現れません

    HPを作っている初心者です。 いくつかのページを作りました。他と同じ条件で下記の 様なhtmlを作ったのですがブラウザに出てくるのは白い 画面のみです。ソースの表示では同じに出てきます。 何処が悪いのか教えてください。お願いします。 <HTML> <HEAD> <TITLE>test/TITLE> </HEAD> <BODY BGCOLOR="#99CCFF"TEXT="#222222"LINK="#663300"VLINK="#6633FF"><BR> <BASEFONT SIZE="4"> <CENTER> <FONT SIZE=6><B>testです。</B></FONT><BR> <BR> <IMG SRC="test.jpg""test"><BR> <H4><A HREF="test.html">戻る</A></H4> </CENTER> </BODY> </HTML>

  • HTMLのフレームについて

    左側にメニューを置き、右側をメインにしようとしているのですが、左側のメニューをクリックしても、左側にしか表示されません。 どうすれば良いか教えてください 全体のHTMLが <html> <Html Lang="ja"> <Head> <Title>○</Title> </Head> <Frameset cols="155,*" Frameborder="yes" Scrolling="auto" Bordercolor="#ffcc99"> <Frame src="メニュー~"> <Frame src="メイン~" name="main"> <Noframes> <body> <Center> <p> ○ </p> </Center> </body> </Noframes> </Html> 左(メニュー)のフレームは <html> <Html Lang="ja"> <Head> <Meta Http-equiv="content-type" Content="text/html; charset=Shift_JIS"> <Title>○</Title> </Head> <Body> <BaseFont Size="2"> <Font Size="2"> <A Href="~" target="main"></A><Img Src="ー" Border="0"></A><br> <br> <A Href="~" target="main"><Img Src="ー" Border="0"></A><br> <br> <A Href="~" target="main"><Img Src="ー" Border="0"></A><br> <br> <A Href="~" target="main"><Img Src="ー" Border="0"></A><br> <br> <A Href="~" target="main"><Img Src="ー" Border="0"></A><br> <br> <A Href="~" target="main"><Img Src="ー" Border="0"></A><br> </Body> </Html> ですよろしくお願いします

専門家に質問してみよう