上の動画にあるような、よくサイトの上部で見かけるナビケーションバーの作り方について初心者向けに解説していきます。
一体どの様に作成されているのでしょうか。
実は作り方にはいくつかの方法が存在します。
今回はHTMLとCSSの最も基本スキルを身に付けることが出来る方法を用いて解説することとします。
今回の解説で学べるコーディングスキルは以下の通りです。
✅HTMLで箇条書きタグを作る
✅CSSでFloatプロパティを使って横並びにする
✅箇条書きタグの『・』を消す
✅カーソルが上に来た時の装飾
大枠では上の方法で作っていきますが、ウェブページを綺麗に作る為には細かい位置の調整なども必要となります。
そのあたりも、今回のもう一つのポイントとなると思います。
それでは、ナビゲーションバーを作っていきましょう。
ナビゲーションの内容を検討
まずはナビゲーションバーの中に何を入れるか検討しましょう。
今回は以下の内容をナビゲーションバーの内容とします。
- ホーム
- コンテンツ
- 会社概要
- 問合せ
HTMLでナビゲーションバーの内容を記述する
ナビゲーションバーを作成する場合、HTMLではリストタグを使用します。
リストタグの使い方は、以下の記事を参考にして下さい。
それではHTMLを記述していきましょう。
HTML
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ぱくぱくのCSS講座</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<div class=”nav”>
<ul>
<li>
<a hlef=”#”>ホーム</a>
</li>
<li>
<a hlef=”#”>コンテンツ</a>
</li>
<li>
<a hlef=”#”>会社概要</a>
</li>
<li>
<a hlef=”#”>問合せ</a>
</li>
</ul>
</div>
</body>
</html>
ブラウザで記述したHTMLの内容を確認してみましょう。
CSSで縦並びのメニューを横並びにする
HTMLでは基本縦並びにリストは表示されます。
そこで今回はCSSを使って横並びにしていきます。
この方法にはfloatプロパティを使用します。
floatプロパティについては過去の記事を参考にしてみて下さい。
少々複雑なので、、、
それではCSSを記述していきましょう。
CSS
.nav ul li{
float: left;
}
この内容を一度ブラウザで確認してみましょう。
横並びになりましたね。
でも何だか不格好です。。。
CSSでメニュー間の隙間を調整する
横並びにはなりましたが、文字が重なってしまい見栄えが良くありません。
そこで今度は、CSSを使ってメニュー間の隙間を調整しましょう。
CSS
.nav ul li{
float: left;
width: 120px;
height: 50px;
}
これをブラウザで確認します。
いかがですか？
綺麗に横並びになりましたね。
CSSでリストの前にある『・』を消す
今度はリストタグの前にある『・』を消したいと思います。
この方法にはCSSで 『list-style-type』というプロパティを使用します。
これはリストのスタイルを変更するという意味があります。
今回のスタイルは『無くしたい』ので『none』という指定をします。
CSSで記述すると以下のようになります。
CSS
.nav ul li{
float: left;
width: 120px;
height: 50px;
}
.nav ul{
list-style-type: none;
}
それではこれをブラウザで確認してみましょう。
おおっ！それっぽくなってきましたね。
CSSでナビゲーションバーに色をつける
それではナビゲーションバーに色をつけてみましょう。
ここで使用するCSSは『background-color:』プロパティです。
そしてナビゲーションバーの高さ指定も同時にします。
CSS
.nav ul li{
float: left;
width: 120px;
height: 50px;
}
.nav ul{
list-style-type: none;
}
.nav{
background-color: orange;
height: 50px;
}
それではここまでをブラウザで確認してみましょう。
CSSで文字の装飾を行う
ここではHTMLで指定さらたデフォルトの設定解除や文字の色を変えていきます。
文字の装飾（下線）を消す。
HTMLによってリンクが指定されている文字に対して下線が引かれています。
この下線をCSSを使って消してみましょう。
このコードには『text-decoration』を使って文字の装飾を操作します。
そしてその装飾の指定に対しては『none』を使って『無し』であることを指定します。
それではCSSを記述していきましょう。
CSS
.nav ul li{
float: left;
width: 120px;
height: 50px;
}
.nav ul{
list-style-type: none;
}
.nav{
background-color: orange;
height: 50px;
}
.nav a{
text-decoration: none;
}
それではブラウザで確認してみましょう。
下線が無くなっていることが確認できますね。
文字の色を変える。
ここでは『a要素』に対して文字色を変える指定をします。
使用するプロパティは『color:』です。
それではCSSを記述していきましょう。
CSS
.nav ul li{
float: left;
width: 120px;
height: 50px;
}
.nav ul{
list-style-type: none;
}
.nav{
background-color: orange;
height: 50px;
}
.nav a{
text-decoration: none;
color: white;
}
それではブラウザで確認してみましょう。
文字の色が白色になったことが分かりますね。
CSSで文字の位置を指定する。
インライン要素をブロック要素にする
この方法には『display: block;』を使って『a要素』がブロックであることを指定します。
そしてこのブロックを親要素と同じ高さに揃えます。
※この時高さや幅を指定しない場合は親要素の大きさを引き継ぎます。
ブロック内の余白を調整する。
『padding』を使って先程指定したブロック内で文字の位置を調整します。
今回は上下左右とも10%の余白を与える指定を行なっています。
それではCSSを記述していきましょう。
CSS
.nav ul li{
float: left;
width: 120px;
height: 50px;
}
.nav ul{
list-style-type: none;
}
.nav{
background-color: orange;
height: 50px;
}
.nav a{
text-decoration: none;
color: white;
display: block;
padding: 10%;
}
それではブラウザで確認してみましょう。
文字の位置が調整されましたね。
マウスカーソルが上にきた場合の装飾
マウスカーソルがナビゲーションバー上に来た場合に色を変える指定をします。
この方法はCSSでセレクタ名に『:hover』を付け加えることでONカーソル時の指定ができます。
そしてONカーソル時は『background』を使って背景の色を操作します。
それではCSSを記述していきましょう。
CSS
.nav ul li{
float: left;
width: 120px;
height: 50px;
}
.nav ul{
list-style-type: none;
}
.nav{
background-color: orange;
height: 50px;
}
.nav a{
text-decoration: none;
color: white;
display: block;
padding: 10%;
}
.nav :hover{
background: rgb(218, 148, 44);
}
これで完成です！
どのように動作するか最終確認をしましょう。
マウスの動きに合わせて、ナビゲーションバーの色が変わっていますね。
次の記事
前回の記事
HTMLを学ぶ。シリーズはこちら
