【HTMLの基礎知識】別ページの途中に飛ぶリンクを貼る方法

IMG 20170215 124421

※世田谷・羽根木公園に咲く梅の花

 

今回はHTMLの基礎知識として、「別ページの途中に飛ぶリンク」を貼る方法を紹介します。

 

スポンサーリンク

よそのページの途中に飛ぶリンクを張りたい。

ホームページを作っていると、別ページの途中に飛ぶリンクを貼りたくなることがあります。

たとえば、

  • トップページにはアピールポイントの概要だけ記載し、
  • 詳細は別ページに記載する

なんてことはよくあります。

 

その場合、詳細が別ページの上部に記載してあれば、そのページへのリンクを普通に貼ればよいのですが、中段以下の箇所に記載してある場合、その箇所に直接ジャンプするリンクを作りたくなりますね。

そこで、ページの途中にジャンプするリンクの作成方法をシェアします。

 

リンクの作り方

それでは、別ページの途中に直接ジャンプするリンクは、どのように作ればよいのでしょうか?

作り方はいくつかありますが、いちばん簡単なのは以下の方法です。

 

リンクの基本形

リンクの基本形は以下のとおりです。

<a href=”リンク先のURL”>テキスト</a>

これで、「テキスト」の文字をクリックすると、「リンク先のURL」に飛ぶリンクが作れます。

これを応用して、リンク先ページの特定位置にジャンプさせたいわけです。

 

別ページの特定位置にジャンプするリンクの作り方

別ページの特定位置にジャンプするには、まずジャンプ先に「目印」を仕込んでおく必要があります。 

目印の書き方は、以下のとおり。

<a name=”aaa”></a>

これを、ジャンプ先(ジャンプさせたい箇所の直上)にHTMLとして埋め込んでおきます。

“aaa”の部分はなんでも構いません。

 

そして、ジャンプ元には、以下のリンクの記載をします。

<a href=”リンク先のURL#aaa”>テキスト</a>

つまり、リンク先のURLに、ジャンプ先の目印「#aaa」を追加するわけです。

簡単ですね。URLに目印を加えて、ジャンプ先を指定するだけです。

 

同一ページ内の特定箇所にリンクを張りたい場合

ちなみに、別ページではなく同一ページ内の特定箇所にジャンプするリンクは、もっと簡単です。

考え方は同じで、ジャンプ先に、

<a name=”aaa”></a>

を目印として埋め込み、リンク元に、

<a href=”#aaa”>テキスト</a>

とHTMLを記載します。同一ページ内なので、URLの記載はいらないんですね。

 

 

これで、ページ内の任意の箇所にリンクを貼ることができます。

せひお試しください。 

 

今日はこんなところで。

それではまた。

 

あとがき

■Editor’s Note

今日は、お昼から東京商工会議所の交流会に参加。
その後、事務所で終日事務作業の予定。

■Today’s article

Trump Wants a Pro-Business SEC. That Has Some Investors Worried

■Official Web Site

藤村総合会計事務所 | クラウド・ITに強い!法人専門の財務コンシェルジュ。決算・...
藤村総合会計事務所のホームページにお越しいただき、誠にありがとうございます。 当事務所は、中小企業・ベンチャー企業のお客様をメインに、クラウド会計の導入や税務...

東京・世田谷区の藤村総合会計事務所

中小零細企業のみなさまに、決算・申告、資金調達、資金繰り改善など豊富なサービスをご提供いたします。

 

 【業務メニュー】













無料冊子プレゼント

中小企業の経営者ならぜひ知っておきたい税務のポイントをまとめた無料冊子(PDF)を、下記からダウンロードできます。

会社経営にまつわる税務の基本をまとめた240頁超の冊子です。

いまなら、さらなる特典もついています。

ぜひダウンロードのうえ、ご活用下さい!


ABOUTこの記事をかいた人

東京都世田谷区で開業している公認会計士・税理士です。大手監査法人、M&Aコンサル、税理士法人を経て2016年9月に独立開業しました。妻と息子の3人暮らし。海外サッカーと囲碁が大好き。英語、数学を勉強中。 ブログでは、税務・会計の話題や仕事術、日々の出来事などを気ままに綴ります。