でぃーのブログ ~よろずのこと~

なんでもかんでも書くよ

ド初心者のためのHTMLの基本[目次編] ~コピペするだけで使えるリスト~


スポンサードリンク

目次

目次の作成

 

目次の作成

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

 

普通に目次を作る

目次練習1(リンクボタン)

目次練習1(リンク先)

html記載

<p><a href="#example1">目次練習1(リンクボタン)</a></p>
<p id="example1">目次練習1(リンク先)</p>

 

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

 

目次の文字の大きさを変える

目次練習2(リンクボタン)

目次練習2(リンク先)

html記載

<p><a href="#example2">目次練習2(リンクボタン)</a></p>
<p id="example2" style="font-size: 180%;">目次練習2(リンク先)</p>

 

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

 

目次の文字色を変える

目次練習3(リンクボタン)

目次練習3(リンク先)

html記載

<p><a href="#example3">目次練習3(リンクボタン)</a></p>
<p id="example3"><span style="color: #ff0000;">目次練習3(リンク先)</span></p>

 

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

 

目次の背景色を変える

目次練習4(リンクボタン)

目次練習4(リンク先)

html記載

<p><a href="#example4">目次練習4(リンクボタン)</a></p>
<p id="example4" style="background-color: #ffcc99;">目次練習4(リンク先)</p>

 

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

 

目次の文字の大きさと文字色と背景色と背景色を変える

目次練習5(リンクボタン)

目次練習5(リンク先)

html記載

<p><a href="#example5">目次練習5(リンクボタン)</a></p>
<p id="example5" style="font-size: 180%; color: #ff0000; background-color: #ffcc99;">目次練習5(リンク先)</p>

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

 

関連記事

www.deeee66.com