大阪府堺市のSEO・MEO対策ホームページ制作会社
トランジット( 合同会社うえせいや)
営業時間 9:00〜17:00(土日祝休)

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

ナビゲーションメニュー作り方
LINE@
「この記事が気に入ったらLINE@で友だち追加をしよう!」

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

友だち追加

sponsored link

うえせい写真

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

取引実績業種

公立高校・各種クリニック・歯科・産婦人科・商店街・鍼灸院・整骨院・整体院・ホテル・ネイルサロン・各種モデル・講師業・生花店・ベビーマッサージ協会・カメラマン・自動車教習所・占い・飲食店・各種クリニック・旅館・ホテル・宿泊施設・など

全国どこでも対応可能です

メールはもちろん、SNSや、LINE、スカイプなどを使ってしっかりとコミニュケーションをとりながら、進めることが可能です。
もちろん、お近くの方や、仕事で行くとこの多い関東圏であれば、実際お会いしてのコンサルティングやレクチャーも対応可能です。

面談可能地域

堺市堺区・堺市中区・堺市東区・堺市西区・堺市南区・堺市北区・堺市美原区・和泉市・大阪狭山市・泉大津市・岸和田市・貝塚市・泉佐野市・泉南市・松原市・富田林市・大阪市此花区. 大阪市福島区 · 大阪市北区 · 大阪市都島区 · 大阪市旭区 · 大阪市港区 · 大阪市西区 · 大阪市中央区 · 大阪市城東区 · 大阪市鶴見区 · 大阪市大正区 · 大阪市浪速区 · 大阪市天王寺区 · 大阪市東成区 · 大阪市西成区 ·大阪市阿倍野区 · 大阪市生野区 · 大阪市住之江区. 大阪市住之江区. 大阪市住吉区 · 大阪市東住吉区 · 大阪市平野区・吹田市
※ここに掲載されている場合でも、一部地域では困難な場合もございます。

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

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

 

sponsored link

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<title>たいとるタイトル</title>
</head>
<body>
	<header>
	  <ul>
		<li>メニュー1</li>
		<li>メニュー2</li>
		<li>メニュー3</li>
	  </ul>
	</header>
	<div></div>
	<footer></footer>
	<p>
		<h1>テキストてきすとテキストてきすと</h1>
	</p>
</body>
</html>

 

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

メニューテスト表示

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

 

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<title>たいとるタイトル</title>
</head>
<body>
	<header>
	  <nav>
	  <ul>
		<li><a href="#">メニュー1</a></li>
		<li><a href="#">メニュー2</a></li>
		<li><a href="#">メニュー3</a></li>
	  </ul>
	  </nav>
	</header>
	<div></div>
	<footer></footer>
	<p>
		<h1>テキストてきすとテキストてきすと</h1>
	</p>
</body>
</html>

 

またまた表示してみる

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

 

girl.png
これからさん

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

uesei.png
うえせい

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

 

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

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

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

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

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

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

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