【HTML】目次を作る方法(中級者)

赤丸先生
赤丸先生

今回は、目次を作る方法だよ。

ついでに、周りに二重線もつけてみるよ。

いいね。

青丸くん
青丸くん
赤丸先生
赤丸先生

じゃあ、まずは、プレビューを見よう!

リンクをクリックすると、上の方に画面が移動するよ。

赤丸先生
赤丸先生

こんな感じなものを作るよ。

さっきのコードは、

<style>
.border{
       border:double;
}
</style>

<div class="border">
<h2>目次</h2>
<a href="#1">赤丸先生の会話</a>
</div>

です。ワープすると、移動する場所のプログラムも必要です。

なので、<p id=”1″>こんにちは</p>

こうすると、こんにちはの文字にワープするようになります。

<style>
.border{
       border:double;
}
</style>

<div class="border">
<h2>目次</h2>
<a href="#リンクする番号">リンクの文字</a>
</div>

リンクする番号とは、<p id=””>のidの文字のことです。「#」も忘れずに。

説明がちょっと難しいので、コメントで質問してください。

小3なので許してくださいw

2人
2人

ばいばーい

アバター

amuos1210

小3です。scratchやHTML、CSS、JavaScript、Pythonなどが好きです。 最近動画編集もはまっています。

おすすめ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください