ホームページのナビゲーションを作るためのコーディング【HTML超入門14】

ナビゲーションメニュー作り方

30歳からトライアスロンをスタートして、その魅力にハマりマイペースに続けている、アウトドア料理も得意なWEB屋さんの、うえせい(@charin_co)です。

ボクのブログやSNSだけ見ていると、ずっと、トライアスロンの練習ばかりしているように見えてしまいますが、実際はちゃんと仕事もしているし、どっちかといえば、工夫して時間を作って練習しています。

そして、自分の書いた記事をあらためて、見てみると・・・仕事に関係することを、何も書いていないことに驚いたので、久々にHTMLについて、書かせてもらいます。

 

sponsored link

ホームページのナビゲーションを作る

ナビゲーションメニュー
このサイトのナビゲーションメニューは、上の通りです。

当サイトのナビゲーションの位置は、ヘッダーと呼ばれるエリアにあるので、HTMLでもheaderの中に記入していきます。

メニューに表示したいものを<li>タグで囲んでいくところからスタートです。
ちなみにその外側にあるのは<ul>タグといって、順序は関係ない箇条書きを表しています。

 

このまま、一度表示してみる

メニューテスト表示

リストタグで囲んだだけなので、もちろんリスト表示(箇条書き)になるだけです。

 

ナビゲーションメニューであることを表すタグでくるむ

<nav>というタグで、先ほどのメニューで表示させたいリストをくるみます。

その上で、それぞれのメニューをクリックしたらどこに飛ぶ(表示させたいページに移動する)のかを指定します。

今回は、あくまでテストなので仮に「#」とだけ入力しています。

 

またまた表示してみる

メニューのテスト表示2
<nav>タグを挿入しただけでは、何も変わりませんが、リンク先を指定したので、すべてのメニューが青色になってアンダーラインが引かれています。

 

girl.png
これからさん

これでは、ホームページっぽくないね

uesei.png
うえせい

たしかにそうですね。でもHTMLでやることは、このくらいなんですよね。あとは、デザインを記述するCSSで、色とか配置とかそういったこと指定するんです。

 

ナビゲーションメニューを表示するための方法をご紹介しました

結局うえせいはこう思う
今回は、ナビゲーションを表示するためのタグの記述の仕方をご説明しました。

次は、画像やテキストなどのコンテンツに意味づけをしていく作業をご紹介しますね。

では、また。最後まで読んでくれてテリマカシ。

【関連記事】HTMLファイルの基本構造を知る! ホームページを理解する第一歩【HTML超入門6】

【関連記事】WEBページにタイトルを付ける為のタイトルタグは超重要!【HTML超入門8】

【関連記事】「大見出し」を付けるために使うh1タグの書き方&注意点【HTML超入門10】

sponsored link

   
うえせい写真
SNSフォロー

この「うえせいやブログ」は、合同会社うえせいやが運営する自社メディアです。
【運営している人】
うえせい
【本名】
上原誠司(合同会社うえせいや代表社員社長)
【お仕事】
◯WordPressを使ったホームページの制作
◯自社オウンドメディア運営
◯中小企業向けITサポート
【好きなこと】
トライアスロンと自転車とアウトドアをこよなく愛しています。
詳しくは、コチラ

 

sponsored link

LINE@
「この記事が気に入ったらLINE@で友だち追加をしよう!」

合同会社うえせいやの最新情報をお知らせします。

友だち追加