HTMLスキル - 第3章 Lesson3

リストタグを使ってナビゲーションを作ってみよう

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

Webサイトのナビゲーションを、リストタグを使って作成します。ここでは、リストタグの基本的な記述方法を初心者向けに解説しています。


この動画で学べること

・<li>タグの使い方
・リンクの設定方法


リストタグを使ってナビゲーションを作成する方法

ナビゲーションは<header>タグの中に書いていきたいと思います。
<h2>の下に、ナビゲーションに表示させたい文章を<li></li>で囲んで書いていきます。



<li>ABOUT</li>
<li>GELLERY</li>
<li>CONTACT</li>


<li>タグを使うときに必ず必要なタグがあるので、合わせて覚えましょう。
<li>タグを囲む<ul>タグです。
実際に書くと、このようになります。



<ul>
<li>ABOUT</li>
<li>GELLERY</li>
<li>CONTACT</li>
</ul>


ここまでできたら、最後にこの要素がナビゲーションであるということを定義する必要がありますので、
<ul>タグと<li>タグを<nav>タグで囲みましょう。



リンクを設定してみよう


文章をリンクさせるには、<a>タグを使います。
「ABOUT」の文章を<a>タグで囲んでみてください。
そして、href属性を使ってリンク先を記述していきます。
このようになります。



<li><a href="http://google.co.jp">ABOUT</a><li>


記述できたら、一度保存してブラウザで見てみましょう。
ABOUTの文字が青くなって下線が引かれていればクリックし、指定したGoogleにジャンプすることができるか見てみましょう。



他の「GELLERY」「CONTACT」の部分も同じようにやってみましょう。