実践コーディングスキル - 第1章 Lesson9

第8回:ナビゲーションをマークアップしてみよう

   

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

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

<nav>タグや<ul><li>タグを使ってナビゲーションをマークアップする方法を、初心者向けに解説しています。



この動画で学べること

・ナビゲーションをマークアップする方法



<nav>タグでナビゲーションをマークアプしよう

今回は、ヘッダーの右側に表示する、ナビゲーションをマークアップしていきます。
<header>タグの<h1>の下に、ナビゲーションを示す<nav>タグを書き、リストを作成します。
リストを作成するのは、<ul>タグと<li>タグでしたね。
今回は4つのリストが必要ですので、一つできたらコピーして、文字の部分を書き換えていきましょう。
また、それぞれをクリックすると別のページに飛ばしたいので、<a>タグを書いてください。



<nav>
<ul>
<li><a href="#">ネストクリニックについて</a></li>
<li><a href="#">担当医の紹介</a></li>
<li><a href="#">医院内の紹介</a></li>
<li><a href="#">アクセス</a></li>
</ul>
</nav>



保存してブラウザで見てみましょう。
ナビゲーションを作成するリストが作成されました。
これで、ヘッダーの中に記述するHTMLには完成です。