HTMLのナビメニューをCSSで装飾する方法

あなた

HTMLのナビメニューがいまのままだとダサいのでいい感じにしたいです。

これまではプログラミング未経験者の方に向けてHTMLとCSSの基礎からWEBページの作る流れを解説してきました。

前回はWEBページのタイトルを装飾する方法を紹介しました。

前回の記事：WEBサイトのタイトルをCSSでデザインしてみよう【大きさや場所を変更】

今回はナビメニューをCSSで装飾していきます。

ちなみにこの記事は連載記事の1つです。こちらから学習を進めておいてください。

>>HTMLとCSSの学習ステップ一覧はコチラ

【この記事でわかること】

【この記事の信頼性】

ではさっそく見ていきましょう。

WEBサイトのナビメニューをCSSで装飾する方法を解説します

あなた

今のままだとナビメニューが縦並びだったりデザインも悪いのでイヤです。

いい感じにする方法を教えて下さい。

ここではHTMLのナビメニューを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の意味は次のとおりです。

ちなみに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の意味は次のとおりです。

この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の意味は次のとおりです。

ちなみに「header #Navi_area li a:hover」はa要素にマウスのカーソルを合わせたときの指定です。

上記を追加すると以下のようになっているはずです。

ナビメニューにカーソルを合わせると青くなって下線も表示されるのを確かめましょう。

「hover」もよく使われるプロパティなので覚えておきましょうね。

CSSを使ってナビメニューをオリジナルの装飾にしよう

今回紹介したCSSの中で、hoverの色や、横線の太さを変えてみて色々変化を確かめてみると装飾していることがよく分かると思います。

ぜひやってみてください。

今回はここまでです。

HTMLとCSSの教材をまだ準備していない方は準備しましょう。

>>HTMLとCSSのオススメ教材を紹介【失敗しない】

学習ステップの全体はコチラ

>>HTMLとCSSの学習ステップ一覧