HTML/CSS

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

2021年1月20日

HTMLのナビメニューをCSSで装飾する方法と書かれた画像

 

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

 

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

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

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

 

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

 

※補足

この記事は連載の1つです。

以下の学習ステップを歩んできていることを想定しています。

>>【完全無料】HTMLとCSSの学習ステップ一覧

 

HTMLとCSSの学習ステップ一覧と書かれた画像
【完全無料】HTMLとCSSの学習ステップ一覧

  てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。   ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...

続きを見る

 

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

 

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

 

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

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

 

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

 

※補足

この記事は連載の1つです。

以下の学習ステップを歩んできていることを想定しています。

>>【完全無料】HTMLとCSSの学習ステップ一覧

 

HTMLとCSSの学習ステップ一覧と書かれた画像
【完全無料】HTMLとCSSの学習ステップ一覧

  てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。   ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...

続きを見る

 

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

 

現時点のナビメニューの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を再読込するとナビメニューが右に寄るはずです。

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

 

参考

float: right → 右寄せ

height: 100px → 高さを100pxに

width: 580px → 横幅を580pxに

 

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

 

参考

list-style-type: none; → リストの「・」をなくす

font-size: 10px; → 文字の大きさを10pxにする

margin-top: 100px; → 上の余白を100pxにする

 

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

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

 

ulにcssを追加した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の意味は次のとおりです。

 

参考

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 #cat_menu li a {
    text-decoration: none;
    color: #000;
}

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

 

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

 

 

参考

text-decoration: none; → 下線を消す

text-decoration: underline; → 下線を追加

 

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

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

 

cssでhoverが適用されたhtml

 

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

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

 

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

 

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

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

 

今回はここまでです。

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

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

 

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

HTMLとCSSの学習ステップ一覧と書かれた画像
【完全無料】HTMLとCSSの学習ステップ一覧

  てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。   ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...

続きを見る

 

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

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

 

プログラミングスクールに関する情報

【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】と書かれた画像
【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

  あなたプログラミングスクールに通いたいけどたくさんありすぎてどこがいいのかわかりません。   最近はエンジニアブームということもありプログラミングスクールが増えました。 一方でたくさんありすぎてど ...

続きを見る

返金保証ありのプログラミングスクールランキング【エンジニアが選びました】と表示されたパソコンの画面
【転職保証つき】返金保証ありのプログラミングスクールランキング【エンジニアが選びました】

  あなた返金保証がついているオススメのプログラミングスクールってありますか?   結論から話すと、返金保証つきのプログラミングスクールランキングは次の通りです。   1位:DMMWEBキャンプ  【 ...

続きを見る

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

フリーランス
無料あり:フリーランスを目指せるプログラミングスクールランキング【体験をもとに徹底分析しました】

  あなたフリーランスエンジニアを目指すことができるプログラミングスクールってありますか?   最近では、高年収や働きやすさの魅力からフリーランスエンジニアを目指す方も増えてきました。 結論から話すと ...

続きを見る

WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】と書かれた画像
WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   結論から話すと、WEB系自社開発に行きやすいスクールのランキングは以下の通り。   第1位:テックアカデミー ...

続きを見る

-HTML/CSS

© 2022 エンジニアてんし君ブログ