- ベストアンサー
同じページ内にリンクする
同じページ内にリンクする方法で、ハッシュリンクがあります。 ジャンプする到着点に、idでスタイルシートを指定している場合、どのようにすれば良いですか？ リンク元（出発点） <a href="#a">Aの位置へジャンプ</a> リンク先（到達点） <div id="a" id="スタイルシート">ここがAの位置</div>
- CSS
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
html リンク元（出発点） <a href="#a">Aの位置へジャンプ</a> リンク先（到達点） <div id="a">ここがAの位置</div> <!--id="a"でいいです。 id="スタイルシート"は不要。--> 同じページの<head></head>内や、外部cssファイルに #a{プロパティ:値} /*id aへの指定*/ div#a{プロパティ:値} }/*id aのdivへの指定*/ となります。実際にはこんな感じでしょうか？ ★html リンク元（出発点） <a href="#a">Aの位置へジャンプ</a> リンク先（到達点） <div id="a"> <h2>タイトル</h2> <p>本文</p> </div> css #a h2{～ idがaの中のh2へのｃｓｓ #a p{ ～ idがaの中のpへのｃｓｓ ★若しくは html リンク元（出発点） <a href="#a">Aの位置へジャンプ</a> リンク先（到達点） <div id="a" class="col"> <h2>タイトル</h2> <p>本文</p> </div> <div id="b" class="col"> <h2>タイトル</h2> <p>本文</p> </div> css .col h2{～ idがaの中のh2へのｃｓｓ（idがaの子要素h2への指定） .col p{ ～ idがaの中のpへのｃｓｓ（idがaの子要素pへの指定） と、idは個別につけ、classで同じ内容に対するcssを共通で行う場合もあります。 idはページ内で1つです。複数あれば、どこに飛べばよいかわからないですが、classを合わせることにより、ページ内で共通のデザインを行うことができます。 ★divでくくらない場合 リンク先（到達点） <h2 id="a">タイトル</h2> <p>本文</p> css #a{プロパティ:値} idやclassはdiv以外にもつけられます。あまり、divを使いすぎないで、文章構造に則った、ふさわしいhtmlにしてください。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLでは、要素はIDを持ちます。これは文書の中で一意でなければなりません。 ・IDトークンとNAMEトークンは、アルファベット([A-Za-z])で開始し、任意の数のアルファベット、数字、([0-9])、ハイフン(-)、アンダースコア(_)、コロン、(:)、ピリオド(.)のみで記述する必要がある。6.2 SGML基本形式 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/types.html#type-name )より HTMLでは、文書の特定要素を一意に特定するため（ひとつの文書に一箇所しか登場し得ない）に使われ、リンクの終端として使用されます。 CSSでは、それを利用して文書中のひとつの要素を特定できます。これを一意セレクタといって詳細度は100ですから、詳細度10の属性、クラス、擬似クラス、詳細度1の要素(擬似要素)を上書きすることができます。(詳細度を含むカスケード処理はＣＳＳの最も重要な、ＣＳＳ(カスケーディングスタイルシートの最大のポイント) ★ここに書かれた規定のように、ＩＤは「特定の要素を一意に決めるため」のもので、ＣＳＳのためだけに使われるのは本来は邪道です。スタイルシートの説明では、説明の容易さからしばしば利用されますが、他の特定の方法があるときは使用しません。 そのため、文書の中がＩＤだらけと言うとんでもないソースをしばしば見受けます。 <div id="a" id="スタイルシート">ここがAの位置</div> idには、「スタイルシート」のような文字は使えません。・・・！！！ リンクの終端でない場合は、可能な限りスタイルシートのためにＩＤを記述する愚は犯さないようにしましょう。(スタイルシートのためのクラスにも言える) 例) <div class="section"><!-- section(本文) --> <ul></ul> <div class="nav"><!-- nav(本文のナビゲーション) --> <ul></ul> </div> <div class="aside"><!-- aside(副文) --> <div class="nav"><!-- nav(サイトのナビゲーション) --> <ul></ul> </div> </div> の場合、前者のdiv.navと後者の<div class="nav">内の<ul></ul>は、 div.section div.nav ul[詳細度22] で前者のそれは、div.aside div.nav ul[詳細度22] で区別できる。<div class="section">直下の<ul></ul>の指定を div.section ul[詳細度12] としても、詳細度の差から上書きされる。 ★IDには使用できる文字が厳密に決められている ★CSSのためにIDが必要ではない。必要だとしたら、HTML自体のマークアップが不適切 ★CSSは、Cascading Style Sheetsの意味です。CascadされるスタイルシートのCascadの理解が最重要です。 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )
関連するQ&A
- 「同じページ内にリンクする」で、リンク先にスタイルシートのid="st
「同じページ内にリンクする」で、リンク先にスタイルシートのid="style"があった場合、どのように対処すれば良いのでしょうか？ よろしくお願いします。 「同じページ内にリンクする」とは リンク元（出発点） <a href="#a">Ａの位置へ移動</a> リンク先（到達点） <div id="a">ここがＡの位置</div>
- ベストアンサー
- ブログ
- ページ内リンクのidって・・・
超初級ですがHTML+CSSでホームページを作っています。 ページの最下段によく見る「TOPへ戻る」といったページ内リンクについてですが、 出発点に <a href="#abc">TOPへ</a> 到達点に <div id="abc"></div> という記述をし、この「abc」にスタイルを指定しても問題ないでしょうか？ （例えば到達点のdivには会社名を入れ、テキストの大きさや色を指定するとか） 語句などの使い間違いあるかもしれませんが、よろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- ページ内リンクについて
ページ内リンクについて質問です。 以下のプログラム内容で、実行するとＴopにはいくのですが、 微妙に少しだけTopより下の位置にジャンプします。 完全にTopにいきません・・・ なぜでしょうか？ リンク到着地点のタグの位置が不適切なんでしょうか？ 色々挑戦したんですが、どこがいけないのかわかりません。 回答よろしくお願いします。 【HTML】 <body id="center"> <a name="container" id="container"></a> <div id="rogo"> 会社のロゴ </div> <div class="UD-msg"> 本文 <a href="#container"><img src="images/page_top.GIF" alt="Page Top" title="Page Top" width="58px" height="12.5px"></a> </div> </body> 【css】 #center{ width: 770px; margin-top: 0px; margin-left: auto; margin-right: auto; } #rogo{ margin-top: 6.6px; } .UD-msg{ margin-top: 20px; margin-left: 30px; }
- ベストアンサー
- HTML
- 外部ページからハッシュタグ（＃）のリンクへ正しく飛ばない
外部のページから、ハッシュタグを加えたURLを指定し 自分のページの指定した箇所を表示させたいのですが、 正しい位置に飛びません。 ・自分のページの指定箇所 <div id="■■■"> ・外部ページのリンク指定 a href="http://○○○○○.jp/#■■■" ちなみに、自分のページは基本indexのみで、 ものすごく長く（height10000pxくらい）、 ハッシュタグを使ったjava scriptのページスクロールで 指定箇所を行き来できるようにしています。 <script type="text/javascript"> jQuery.fn.extend({ scrollTo : function(speed, easing) { <!-- hashの取得が出来なければ、処理を中断 --> if(!$(this)[0].hash || $(this)[0].hash == "#") { return false; } return this.each(function() { var targetOffset = $($(this)[0].hash).offset().top; $('html,body').animate({scrollTop: targetOffset}, speed, easing); }); } }); $(document).ready(function(){ $('a[href*=#]').click(function() { $(this).scrollTo(1200); return false; }); }); </script> 自分のページのソースは簡略化すると 以下のような感じになります。 <body> <div id="□□□"></div> ←1番上です <div id="□□□□"></div> <div id="□□□□□"></div> <div id="■■■"></div> <div id="■■■■"></div> <div id="■■■■■"></div> ←1番下です </body> 現状、外部からリンクした場合は、 ページ上部の<div id="□□□"><div id="□□□□"><div id="□□□□□">には正しく飛びますが、 何故か、ページ下部の<div id="■■■"><div id="■■■■"><div id="■■■■■">になると 指定しても、最下部に飛ばされる状態です。 何度か検証をしてみたところ <div id="□□□□□"></div>と<div id="■■■"></div>を入れ替えた場合、 <div id="■■■"></div>は正しくリンク位置へ <div id="□□□□□"></div>は最下部へ となりました。 どうも位置（高さ）による原因のようなのですが、 さっぱりわかりません。。 原因分かる方、いらっしゃいませんでしょうか。。。。。。
- ベストアンサー
- JavaScript
- リンクを横に並べるには、どうすればいいですか？
リンクを下記のように並べたいのですが、CSSにはなんと記述すればいいでしょうか？ リンク1（中央揃え） リンク2（右揃え） なぜか、下記のようになってしまいます。 リンク1（中央揃えにしたいのに、左揃え状態） リンク2（右揃えになっているけど、改行されてしまう） margineかpaddingで設定するしかないでしょうか？ 文章が見づらくて、すいません。私が記述したHTML・CSSのソースを下記に載せます。 よろしくお願いします。 /*---------- CSS部分（外部スタイルシートに記述） ----------*/ div#inline { display: inline; } div#center { text-align: center; } div#right { text-align: right: } /*---------- HTML部分 ----------*/ <div id="inline"> <div id="center"><a href="～○○">リンク1</a></div> <div id="right"><a href="～○○">リンク2</a></div> </div>
- ベストアンサー
- CSS
- divのクラス内のリンクの設定
CSSの設定でわからない点がありましたので質問させてください。 div自体にクラスを設定しているのですが、このブロック内にリンクがあります。このdivないの<a href="">のみのCSS指定をしたいのですが、どうやってやったらよいのでしょうか？ これまでは、divにidを指定して、 #id a:link {… とか、アンカー自体にクラスを指定してやっていたのですが、ここではHTML自体を変更せずにCSSでコントロールしたいのです。 ソース自体はこんな風になっています。 <div class="asset-more-link"> <a href="example.html">バージョンアップ</a>の続きを読む </div> これに対して、あれこれCSSを設定したのですが一向に反応してくれません。もしわかる方がいたらおしえてください。よろしくお願いします。
- ベストアンサー
- CSS
- onclickで表示/非表示させている動きに、別ページからリンクさせるには
JavaScript初心者です。 A.htmlを作成し、リンクをクリックするとidとnumberを呼び出すことで、同じhtml内に存在する3つのページが1つだけ表示されるように、cssとJavaScriptで表示/非表示させています。 【JavaScript】 function Page(id, nu){ Num = new Array ('01', '02', '03'); for (i=0; i<3; i++) { if(Num[i] == num){ document.getElementById(id + Num[i]).style.display = "block"; } else { document.getElementById(id + Num[i]).style.display = "none"; } }; } 【CSS】 #test01 {display:block;} #test02 {display:none;} #test03 {display:none;} 【html】 <a href="javascript:void(0);" onclick="Page('test','01')">link1</a> <a href="javascript:void(0);" onclick="Page('test','02')">link2</a> <a href="javascript:void(0);" onclick="Page('test','03')">link3</a> <div id="test01"> ・・・ </div> <div id="test02"> ・・・ </div> <div id="test03"> ・・・ </div> このとき別のhtml(B.html)から、A.htmlのid="test02"が表示された状態にリンクを作成することはできるのでしょうか？ 恐れ入りますがよろしくお願い致します。
- ベストアンサー
- JavaScript
- マップを使ってページをリンクしさらにページ内リンクにしたが飛ばない。
マップを使ってページをリンクしさらにページ内リンクにしたが飛ばない。 <img src="images/aaa.jpg" usemap="#map" /> <map name="map"> <area href="kan.html#3" alt="" shape="rect" coords="0,3,105,154" /> </map> kan.html <div align="center" id="3"><img src="images/bar_3.jpg"></div> 以上のようにマップを使ってリンクページの更にページ内リンク先に飛ばそうとしても そのページに飛ぶだけで、飛ばしたい位置まで行きません。 <a name="3"><img src="images/bar_3.jpg"></a> でもダメです。 どうしてでしょうか？
- ベストアンサー
- HTML
- HTMLのアンカーリンクについて。
HTMLのアンカーリンクについて。 アンカーリンクですが、通常どおりリンクをはると、ブラウザ画面の一番上にぴったりくっついたかたちでリンクしてしまします。 たしか、リンク先の上の幅を指定できたと思うのですが、やり方を忘れてしました(^^;ゞ ちなみにHTMLはこんな感じです。 <div id="content"> <div id="anchor"> <ul> <li><a href="post-1">投稿１</a></li> <li><a href="post-2">投稿２</a></li> <li><a href="post-3">投稿３</a></li> </ul> </div> <div id="entry"> <h2 id="post-1">投稿１</h2> <h2 id="post-2">投稿２</h2> <h2 id="post-3">投稿３</h2> </div> </div> すこし検索してみましたが見当たらなくて、質問させていただきました。 どなたか、おわかりの方ご教授いただけると助かります。 よろしくお願いします。
- ベストアンサー
- HTML
- 擬似フレームでのページ内リンクについて
擬似フレームの横分割のレイアウトで、 左に位置固定された折りたたみ式メニュー 右にメイン画面を置いてあります。 左で折りたたみメニューを開き、ページ内リンクで右に出てくる本文の項目ごとにリンクさせたいんですが普通にaタグを設置してみても上手くいきません。 どうやったらできるでしょうか？ 折りたたみメニュー ・外部js function oritatami(id){ obj=(document.all)?document.all(id):((document.getElementById)?document.getElementById(id):null); if(obj) obj.style.display=(obj.style.display=="none")?"block":"none"; } ・外部CSS body { font-size: 82%; color: #505050; position: relative; padding: 0px 20px 0px 150px; } #PAGETOP { margin: 0px auto; max-width: 700px; } #MENU { width: 220px; padding-top: 20px; position: fixed; left: 30px; top: 0px; font-size: 85%; } .box{ line-height: 1.2; background-color: #FFFFFF; border: 1px solid #000000; padding: 1em; margin-top: 0.5em; } #MEIN {line-height: 1.5;} 以下、text.htmlのソース ----------------------------------------- （中略） <body> <div id="PAGETOP"> <div id="HEADER"> （中略） </div> <!-- 左メニュー --> <div id="MENU"> <div class="box"> <ul> <li><a href="text.html" onclick="oritatami('o0');return false">メニュー1</a></li> <div id="o0" style="display:none"> <ul> <li><a href="text.html#abc.html">ABC</a> <li><a href="text.html#def.html">DEF</a> </ul> </div> </div> </div> <!-- 右メイン --> <div id="MEIN"> <h2 id="abc">ABC</h2> （中略） <h2 id="def">DEF</h2> （中略） </div> <div id="FOOTER"> （中略） </div> </div> </body> 検討よろしくお願いします。
- ベストアンサー
- HTML
お礼
早速のご回答ありがとうございます。 とても詳細で分かりやすかったです。