LoginSignup
0
0

More than 1 year has passed since last update.

HTMLの<nav>まとめ

Last updated at Posted at 2021-08-06

HTMLの<nav>まとめ

html触ってて、<nav>? ん?<nav>ってなんぞや!!!ってなったので、備忘録ついでにまとめました。

nav要素、navタグってよばれているこれ<nav>.....<nav>は、ナビゲーションメニューを設定するときに用います。
ナビゲーションメニューってなんぞやって思うかもしれませんので、実際に書いてみました。コレです↓

"コードの書き方"とか"まとめ"とか押すと、ビュンって下行って、その("コードの書き方"とか"まとめ"の)場所へ飛んでってくれます。
押してみましたか? これがナビゲーションメニュー(リンク先指定付きバージョン)です!
めっちゃ便利ですよね。私もこの便利機能使いこなしたいので、navについて私が知ってる情報を洗いざらいまとめました。
ぜひ、皆さんも使いこなしてサイトに訪れた者共をその人が欲している情報のもとへ飛ばしてやりましょう!

コードの書き方

では、早速コードの書き方へ突入します!

html
<nav>
  <ul> <!-- <ol>でもいいよ! -->
    <li>じゃがいも</li>
    <li>にんじん</li>
    <li>たまねぎ</li>
  <ul> <!-- ol使ったんだったら</ol>で閉じてね -->
<nav>

...って書くとこう表示されます。↓


  • じゃがいも

  • にんじん

  • たまねぎ


このコードが基盤となります。
URLつけたらその場所までビュンって行くし、classタグで名付けたらCSSでいじり放題になります。

htmlリンク付けて名前もつけた場合
<nav>
  <ul class="makings"> <!-- classタグで好きな名前つけなされ -->
    <li class="make-stuff"> <!-- 必要なところに必要な名前をつけなされ -->
      <a href="https://www.zyagaimo-hokuhoku">じゃがいも</a> <!-- ""の中にリンク先を指定しなされ。これは絶対パスと呼ばれる書き方。(このリンク先は存在しないぞ) -->
    </li>
    <li class="make-stuff">
             <a href="">にんじん</a> <!-- ""のままだと、ページがリロードされるし、"#!"って書くと遷移しないリンクになるし、hrefは奥深いから暇なとき調べてみてね -->
        </li>
    <li class="make-stuff">
      <a href="#たまねぎ">たまねぎ</a> <!--「#+設定id」でidで名付けたところの言葉へ飛んでいくぜ!一番最初に書いたやつがこれ。同ページ内のリンク先へってときに使えるさ -->
    </li>
  <ul>
<nav>
<!-- ほんとマジでhrefの書き方は色々あるからさ、自分に合った書き方を調べて書くことをお勧めする。 -->

なんかコメントアウトコメントが凄いことになってしまった。
<nav>とか<ul>とかの説明できてないから次の章で書くからちょっとこの先まで付き合ってください。

navとかulとかli要素の説明

nav

ここにナビゲーションメニューを設定するぜ!って領域を作成するためのnav要素
ここがナビゲーションメニューだ!!!

ul

箇条書きリストを表示するぜ!
(リストの先頭に・が付きます)

ol

番号付きリストを表示するぜ!!
(1からリストの先頭に番号が振られます)

li

リストの内容を指定。じゃがいもとか、Homeとかまとめとか、その記事のメニューや見出し内容を書くところ。

まとめ

  • ナビゲーションメニューとはその名の通り目的地を示す項目のこと

  • nav + ul + li か、 nav + ol + li のセットメニューとなる

おまけ

ちなみに、一番最初に例として書いたナビゲーションメニューのコードはこんな感じ。

ナビゲーションメニュー
<nav>
     <ul>
        <li><a href="#コードの書き方">コードの書き方</a></li>
        <li><a href="#navとかulとかli要素の説明">navとかulとかli要素の説明</a></li>
        <li><a href="#まとめ">まとめ</a></li>
     <ul>
<nav>
遷移先の見出し
<h2 id="コードの書き方">コードの書き方</h2>
<h2 id="navとかulとかli要素の説明">navとかulとかli要素の説明</h2>
<h2 id="まとめ">まとめ</h2>

以上。終わり!!!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0