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

あなた

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

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

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

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

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

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

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

あなた

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

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

ここではHTMLのナビメニューをCSSで装飾する方法を解説していきます。

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

現時点のナビメニューのHTML部分

まずは現時点のナビメニューの表示に関わっている部分を把握しておきましょう。

以下のコードの部分です。

<div id="cat_menu">
                    <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>

「cat_menuのIDを指定してデザインかな」とか「liを指定してデザインしそうだな」と想像することができればここまでの学習でだいぶ力がついてきていますよ。

ちなみに今の表示は画像のとおりです。

ナビメニューはDEMO1とかの部分ですね。

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

ナビメニューをCSSでデザインしていこう

まずはstyle.cssに以下の記述を追加してください。

header #cat_menu {
	float: right;
	height: 100px;
	width: 580px;
    
}

上記のコードを追加した後にindex.htmlを再読込するとナビメニューが右に寄るはずです。

各プロパティの意味は次の通り。

次に以下のcssを追加しましょう。

header #cat_menu ul {
    list-style-type: none;
    font-size: 10px;
    margin-top: 100px;
}

「header #cat_menu ul」はheader要素の中のcat_menuというIDの要素の中のul要素を指定しています。

このCSSの意味は次のとおりです。

ちなみにmarginについては前回解説しています。

このCSSを追加してindex.htmlを読み込むと次のようになっています。

次に以下のcssを追加してください。

header #cat_menu li {
    display: inline;
    float: right;
    width: 70px;
    border-left-style: solid;
    border-left-width: 1px;
    border-left-color: #050505;
    padding-left: 8px;
}

「header #cat_menu li」はheader要素の中のcat_menuというIDの要素の中のli要素を指定しています。

このCSSの意味は次のとおりです。

このCSSを追加してindex.htmlを読み込むと次のようになっています。

だいぶ見た目がナビメニューっぽくなってきましたね。

「display:inline」はよく使うので覚えておきましょう。

次に以下のcssを追加してください。

header #cat_menu li a {
    text-decoration: none;
    color: #000;
}

header #cat_menu li a:hover {
    color: #09F;
    text-decoration: underline; 
}

このCSSの意味は次のとおりです。

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

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

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

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

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

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

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

今回はここまでです。

次回はサイドメニューを装飾していきます。

>>次の回：CSSでサイドメニューを装飾しよう【コード付きで紹介】

\ HTMLとCSSについて最初から学びたい方はこちら /

\ Web制作の副業で今すぐ稼ぎたい方はこちら /