ナビゲーションとセクション

メニューと区切りをつくる

前回 header・main・footer で大きく 3 つに分けました。今回は main の中を区切ります。使うタグは次の通りです。

• nav はページ内やサイト内のリンクを集めたメニューです
• section は 1 つの話題でまとまった区切りです。見出しとセットで使います
• article はそれだけ切り出しても意味が通る中身です。ブログ 1 記事や作品 1 件が当てはまります

section と article の違いは、切り出せるかどうかです。作品 1 件は他の場所に貼っても内容が通じるので article、作品一覧そのものはページの一区切りなので section です。

id を付けてジャンプする

section に id を付けると、リンクの href に # と id を書くだけでその位置へ飛べます。

id はページの中で重ならない名前にします。同じ id が 2 つあると、どちらへ飛ぶか決まりません。

今回書くこと

header の中に nav をつくり、リストでメニューをならべます。main の中の各かたまりを section で囲み、about・hobby・history の id を付けます。さらに作品の section を新しくつくり、div の中に article を 3 つならべます。

1. header の中に nav をつくり、リストで 4 つのメニューをならべる
2. 自己紹介・趣味・経歴を section で囲み、about・hobby・history の id を付ける
3. 作品の section を works の id で新しくつくる
4. 作品の section の中に article を 3 つならべる