HTML/CSS

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

2021年1月20日

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

 

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

 

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

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

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

 

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

 

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

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

 

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

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を読み込むと次のようになっています。

 

ulにcssを追加した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要素にマウスのカーソルを合わせたときの指定です。

 

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

 

cssでhoverが適用されたhtml

 

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

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

 

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

 

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

 

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

 

今回はここまでです。

 

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

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

 

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

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

 

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

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

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

続きを見る

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

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

続きを見る

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

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

続きを見る

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

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

続きを見る

プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】と書かれた画像
プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】

  あなたプログラミングスクールに通いたいけどどのスクールも何十万もして通えません。コスパよくエンジニアになれるスクールはありますか?   今回はコスパが良いどころか完全に無料でプ ...

続きを見る

-HTML/CSS

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