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の学習ステップ一覧

 

その他HTML/CSSに関する記事

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

 

続きを見る

【最新】HTML/CSSを習得できるプログラミングスクールランキングと書かれた画像
HTML/CSSを習得できるプログラミングスクールランキング

  あなたすいません、まだHTML/CSSについてよくわかっていないのですが、そもそもどんなものなのでしょうか?   こんな疑問に簡単に答えていきます。   WEBサイト ...

続きを見る

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

 

続きを見る

テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】と書かれた画像
テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】

  あなた簡単に無料教材を手に入れることができました!でも少し質問があるのですがいいですか?   この章ではテックアカデミーの無料教材についてよくある質問に対して答えていきます。 ...

続きを見る

HTMLとCSSの意味をエンジニアの僕が解説【1から学べる】と書かれた画像
HTMLとCSSの意味をエンジニアの僕が解説【1から学べる】

  あなたHTMLの意味とCSSの意味はわかりました。2つを使うと何ができるんでしょうか?   HTMLとCSSの意味を理解して2つを使えるようになると以下のことができます。 ・W ...

続きを見る

HTMLとCSSのオススメ教材を紹介【無料あり】と書かれた画像
HTMLとCSSのオススメ教材を紹介【無料あり】

  てんし君 大手プログラミングスクールのテックアカデミーが自社アピールのために提供しています。 大手の会社の教材なので情報も正確で信頼できます。   無料教材を手に入れる方法はコ ...

続きを見る

HTMLとCSSの入門方法【現役エンジニアの僕が解説】と書かれた画像
HTMLとCSSの入門方法【現役エンジニアの僕が解説】

  あなた本当に0円なの?急に有料になったりしない?   このように思う方もいると思いますが安心してください。 まったく料金はかかりませんし、無料教材を手にいれたからと言って本コー ...

続きを見る

HTMLとCSSの初心者は何をすべき?【経験をもとに解説】と書かれた画像
HTMLとCSSの初心者は何をすべき?【経験をもとに解説】

 

続きを見る

HTMLとCSSが難しいと感じた時に僕がとった行動と書かれた画像
HTMLとCSSが難しいと感じた時に僕がとった行動

 

続きを見る

HTMLとCSSを独学で1カ月勉強してみた結果【超成長した】と書かれた画像
HTMLとCSSを独学で1カ月勉強してみた結果【超成長した】

  てんし君   この記事を読んでわかること ①HTML・CSSの独学勉強方法 ②HTML・CSSの独学のきつい点 ③HTML・CSSを勉強した後にエンジニアになった僕の話 &nb ...

続きを見る

HTMLとCSSの初心者は模写をしよう【僕もやりました】と書かれた画像
HTMLとCSSの初心者は模写をしよう【僕もやりました】

 

続きを見る

HTMLとCSSの資格はあるの?必要?【現場の声を伝えます】と書かれた画像
HTMLとCSSの資格はあるの?必要?【現場の声を伝えます】

  てんし君実践的なテスト内容が特徴ですね。 実務経験者が腕試しで受けるのはいいかもしれませんが、初心者の方は特にこの試験のために頑張る必要はないかなと思います。 この資格を持ってる方も見た ...

続きを見る

僕がHTMLとCSSのアウトプットに使った方法を紹介【必見】と書かれた画像
僕がHTMLとCSSのアウトプットに使った方法を紹介【必見】

  あなたアウトプットの方法はわかりました。でもインプットのタイミングはどうすればいいのでしょうか?   ここまではHTMLとCSSのアウトプットの方法をメインに解説してきました。 ...

続きを見る

-HTML/CSS

Copyright© エンジニアてんし君ブログ , 2021 All Rights Reserved.