HTML-CSS

タイトルが複数ある記事等、クリックで目的の場所まで移動させたいとき、アンカータグ<aタグ>を使用する。

ページ内のアンカーリンク

移動先(アンカー)にアンカーポイントを挿入

<a id=○○>移動先にある文章</a>

<○○の部分の注意点>

  • 1つのIDは同じ文書内で1ヵ所にだけ(重複させてはならない)
  • 使用できる文字は下記のみ(記号はハイフン以外使わない方が無難)
    • 半角英数字
    • ハイフン( - )
    • アンダーバー( _ )
    • コロン( : )
    • ピリオド( . )
  • アルファベットで始める(数字や記号で始めてはダメ)
  • 大文字と小文字の区別あり

私は"anchor1" etc.にしている。

移動元にリンク作成

<a href="#○○">クリックで移動させる</a>

その際、○○の前に"#"を置くのを忘れずに。

別ページへのアンカーリンク

移動先(アンカー)に下アンカーポイントを挿入

<a id=○○>移動先にある文章</a>

<○○の部分の注意点>

  • 1つのIDは同じ文書内で1ヵ所にだけ(重複させてはならない)
  • 使用できる文字は下記のみ(記号はハイフン以外使わない方が無難)
    • 半角英数字
    • ハイフン( - )
    • アンダーバー( _ )
    • コロン( : )
    • ピリオド( . )
  • アルファベットで始める(数字や記号で始めてはダメ)
  • 大文字と小文字の区別あり

 

私は"anchor1" etc.にしている。

タグの中に何か文章が入っていたらよいけれど、なければ半角スペースで代用。

移動元にリンク作成(アンカー先)

#○○の前にサイトのアドレス(https://△△/)を挿入する。

私の場合は、target属性を入れるようにしている。

<a href="https://△△/#○○" target="_blank">クリックで移動させる</a>

○○の前に"#"を置くのを忘れずに。

 

※ target属性:

リンク先の開き方を指定する属性。

外部サイトを別タブで表示したい場合は「target="_blank"」を指定。

 

※ rel属性:

リンク先のコンテンツが自身の管理下にない場合や、リンク先の情報を信頼出来ない場合に使用。

「rel="nofollow"」

リンク先を信用できる場合、オススメしたい場合には指定しない。

アンカーリンクの位置がずれる場合

アンカーリンク<aタグ>のid属性で指定sちあアンカーポイントへリンクしても、目的の位置よりもちょっと下に飛んでしまうことがある。

この場合、最も多い原因は、「ヘッダーをposion:fixed;で固定している」場合。

(私の使用しているテーマもコレ。)

ズレを改善し、適切なアンカーポイントの位置に調整するには、CSSかJavaScriptで調整する。

私の場合は、CSSで調整。

CSS調整方法

Class属性をつけて、CSSで調整。

アンカーポイントの頭の位置をpadding-topで固定ヘッダーの文だけ上に上げつつ、margin-topのマイナス指定で相殺。

こうすることで、見た目を変えずに、実際のアンカーポイントの頭をpaddingの分だけ上にずらすことができる。

HTML

<a id="test" class="sample"></a>

CSS

a.sample{
display: block;
margin-top:-100px;
padding-top:100px;
}

References

にほんブログ村 科学ブログ 脳科学へ
にほんブログ村 子育てブログ 海外ワーキングマザー育児へ
PVアクセスランキング にほんブログ村