実践コーディングスキル - 第4章 Lesson2

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

   

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

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

ナビゲーションをマークアップする方法について解説しています。
ここでは、ナビゲーションに必要なhtmlを記述します。



この動画で学べること

・ナビゲーションのマークアップ方法



ナビゲーションをマークアップしていこう

前回ロゴが完成したので、今回からはナビゲーションをマークアップしていきましょう。
ナビゲーションは、同じデザインのものが複数ならんでいるので、<li>タグを使ってマークアップしていきます。
まずは、HTMLファイルに記述をしていきますが、<header>の<h1>タグの次に、<nav>タグ、<ul>、<li>を書き、リンクを飛ばすための<a>タグを追加します。
1つできたらコピーをし、中身を書き換えていきましょう。



<nav>
<ul class="cf">
<li><a href="#">ホーム</a></li>
<li><a href="#">メニュー一覧</a></li>
<li><a href="#">ご予約</a></li>
</ul>
</nav>



HTMLが書けたら、CSSも見ていきます。
まずはリストの文字を変更していきたいので、<li>タグの中の<a>タグに対してスタイルをかけていきます。
文字サイズや色、太さを記述し、ブラウザの初期状態で<a>タグに適応される下線も text-decoration:none;で消しましょう。



header nav ul li a{
font-size: 16px;
font-weight: bold;
color:#734339;
text-decoration:none;
}



では保存してブラウザで見てみます。
文字のスタイルが変更されました。