お知らせ

サイト内の記事「どなたにでも読んでいただける記事」と「コミュニティー会員または私の販売するツールの購入者限定」の記事の二種類となっています。

読んでみたいと思われた方・興味を持たれた方がいらしたら「 こちらのページ 」より手続きをお願いしますね!

【個別パーツ】ジャンプリスト-記事内リンク

この記事を読むのに必要な時間は約 5 分です。

ジャンプリスト-記事内リンクというのは、記事内で目次などをクリックするとその項目にジャンプするリンクのことです。何種類かの記述方法があるのですが、「汎用スタイルとインライン記述用」で2種類を紹介します。

この二つを覚えておけばまず不便はありませんので活用してくださいね。

More

ここでジャンプリストの記述を2種類紹介しているのには理由があります。簡単にいうとHTMLの記述にも文法というべきものがあり、場面によっては使用することができないケースがあるためです。

紹介している例では、インラインでの記述ができない文法とインラインでも記述ができる文法になります。

なお、紹介している例ではH2見出しという中にpタグという記述が使用できないための処理となります。

また、間違った記述をするとレイアウトが崩れてしまったり、整合性が担保できない部分の記述が自動的に削除されるなどのケースが発生します。

 

汎用スタイル

汎用スタイルの形式は「ほかのHTML記述の中に挿入しないで使用する」(生のまま使用する)と考えておくとよいでしょう。

 

リンク元
10
20
30
40
50

リンク先

10

20

30

40

50

ソースコード

リンク元
<a href=”#link10″>10</a>
<a href=”#link20″>20</a>
<a href=”#link30″>30</a>
<a href=”#link40″>40</a>
<a href=”#link50″>50</a>

リンク先
<p id=”link10″>10</p>
<p id=”link20″>20</p>
<p id=”link30″>30</p>
<p id=”link40″>40</p>
<p id=”link50″>50</p>

 

インライン記述用

インライン記述用は「ほかのHTML記述の中に挿入する場合に使用する」と考えておくとよいでしょう。

 

リンク元
100
200
300
400
500

リンク先
100
200
300
400
500

 

ソースコード

リンク元
<a href=”#link100″>100</a>
<a href=”#link200″>200</a>
<a href=”#link300″>300</a>
<a href=”#link400″>400</a>
<a href=”#link500″>500</a>

リンク先
<span id=”link100″>100</span>
<span id=”link200″>200</span>
<span id=”link300″>300</span>
<span id=”link400″>400</span>
<span id=”link500″>500</span>

 

使用例

110

110

 

<a href=”#link110″>110</a>

<div>
<div>
<h2 class=”myd-subheader–bar background-color–option1 radius-3″ style=”text-align: center;”><span id=”link110″>110</span></h2>
</div>
</div>

    コメントを残す

    CAPTCHA