ゆるあわ自習室 ゼロから『HTML』『CSS』編

ぜろから空いた時間に独学で!

#19ゼロからwebの基本「HTML」「CSS」編 〜19日目〜 『リンクについてやってみる2』

 

「こんばんは」あるいは「おはようございます」それとも「こんにちは」

ゆーたろです。

今日も一緒に勉強して行きましょう。

 

今回は同じページ内でリンクを貼って行きましょう。

 

  • HTMLファイル内にリンクを指定する

 以前使ったもう一つの方のHTMLファイルを使いましょう。(second.html)?

 

下の画像のようにやっていってみてください。

まずボックスが短いと上手く飛べたかわからないので、長くします。

.longBox { /*単に縦長のボックスを作るための指定です*/

height:120em;

}

です。

 

リンク元を作ります。

<p>

<a href="#profile">作者の紹介</a> <!--ここがリンク元です-->

</p>

 

そして同じファイル内にリンク先を作ります。

 

 

<hr> <!--hrは区切り線です-->

<h2 id="profile">ゆーたろ(1999年~)</h2> <!--ここがリンク先-->

<p class="longBox"> <!--単に縦長のボックスを作る

ためにクラス指定しています--> お金がなく独学を強いられている可哀想な人

</p>

 

  • 説明

結構色々追加したのですが、大切なのは62行目と68行目です!

<h2 id="profile">ゆーたろ(1999年~)</h2> (同じページ内にリンクさせようとしている)

<h2 id="profile">ゆーたろ(1999年~)</h2>

 

リンクさせたい要素(リンク先)に id属性で id名 を付け、リンク元の <a>要素の href属性では、 id名 を「#(ハッシュ)」付きで指定してやれば、この id がついた要素にジャンプできるんです。



  • プレビューしてみる

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

  • 最後に

今回話はここまでにしましょう

次回は →もう一日リンク関係のことをやって行きましょう。