

これまではプログラミング未経験者の方に向けてHTMLとCSSの基礎からWEBページの作る流れを解説してきました。
前回はWEBページのタイトルを装飾する方法を紹介しました。
前回の記事:WEBサイトのタイトルをCSSでデザインしてみよう【大きさや場所を変更】
今回はナビメニューをCSSで装飾していきます。
ちなみにこの記事は連載記事の1つです。こちらから学習を進めておいてください。
【この記事でわかること】
✔ HTMLのナビメニューをCSSでデザインする方法
【この記事の信頼性】
この記事を書いている僕は現役のWEBエンジニアです。
普段からHTMLとCSSを使ってWEBページを制作しています。
ではさっそく見ていきましょう。
WEBサイトのナビメニューをCSSで装飾する方法を解説します

いい感じにする方法を教えて下さい。
ここではHTMLのナビメニューをCSSで装飾する方法を解説していきます。
【この章でわかること】
✔ CSSでナビメニューを編集する方法
現時点のナビメニューのHTML部分
現時点のナビメニューの表示に関わっている部分を把握しておきましょう。
以下のコードの部分です。
<div id="Navi_area">
<ul>
<li><a href="#">DEMO1</a></li>
<li><a href="#">DEMO2</a></li>
<li><a href="#">DEMO3</a></li>
<li><a href="#">DEMO4</a></li>
</ul>
</div>
「Navi_areaのIDを指定してデザインかな」とか「liを指定してデザインしそうだな」と想像することができればここまでの学習でだいぶ力がついてきていますよ。
ちなみに今の表示は画像のとおりです。

DEMO1とかの部分ですね。
ではさっそく装飾していきましょう。
ナビメニューをCSSでデザインしていこう
まずはstyle.cssに以下の記述を追加してください。
header #Navi_area {
float: right;
height: 100px;
width: 580px;
}
上記のコードを追加した後にindex.htmlを再読込するとナビメニューが右に寄るはずです。
「header #Navi_area」はheader要素の中のNavi_areaというIDの要素を指定しています。
「float: right」は右寄せを指示するコードです。
heightやwidthについては前回の記事で解説しているので復習しておきましょう。
次に以下のcssを追加しましょう。
header #Navi_area ul {
list-style-type: none;
font-size: 10px;
margin-top: 100px;
}
「header #Navi_area ul」はheader要素の中のNavi_areaというIDの要素の中のul要素を指定しています。
このCSSの意味は次のとおりです。
list-style-type: none; → リストの「・」をなくす
font-size: 10px; → 文字の大きさを10pxにする
margin-top: 100px; → 上の余白を100pxにする
ちなみにmarginについても前回解説しています。
このCSSを追加してindex.htmlを読み込むと次のようになっています。

次に以下のcssを追加してください。
header #Navi_area li {
display: inline;
float: right;
width: 70px;
border-left-style: solid;
border-left-width: 1px;
border-left-color: #050505;
padding-left: 8px;
}
「header #Navi_area li」はheader要素の中のNavi_areaというIDの要素の中のli要素を指定しています。
このCSSの意味は次のとおりです。
display: inline; → リストを横並びにする
float: right; → リストのそれぞれを右寄せする
width: 70px; → 横幅を70pxにする
border-left-style: solid; → 横線を1本つける
border-left-width: 1px; → 横線の太さは1pxにする
border-left-color: #050505; → 横線の色指定
padding-left: 8px; → 余白を左に8pxつくる
このCSSを追加してindex.htmlを読み込むと次のようになっています。

だいぶ見た目がナビメニューっぽくなってきましたね。
「display:inline」はよく使うので覚えておきましょう。
次に以下のcssを追加してください。
header #Navi_area li a {
text-decoration: none;
color: #000;
}
header #Navi_area li a:hover {
color: #09F;
text-decoration: underline;
}
このCSSの意味は次のとおりです。
text-decoration: none; → 下線を消す
text-decoration: underline; → 下線を追加
ちなみに「header #Navi_area li a:hover」はa要素にマウスのカーソルを合わせたときの指定です。
上記を追加すると以下のようになっているはずです。

ナビメニューにカーソルを合わせると青くなって下線も表示されるのを確かめましょう。
「hover」もよく使われるプロパティなので覚えておきましょうね。
CSSを使ってナビメニューをオリジナルの装飾にしよう
今回紹介したCSSの中で、hoverの色や、横線の太さを変えてみて色々変化を確かめてみると装飾していることがよく分かると思います。
ぜひやってみてください。
今回はここまでです。
HTMLとCSSの教材をまだ準備していない方は準備しましょう。
学習ステップの全体はコチラ