HTML/CSS

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

2021年1月24日

CSSでサイドメニューを装飾しよう 【コード付きで紹介】と書かれた画像

 

あなた
サイドメニューが今のままだと見にくいので見やすくしたいです。

 

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

前回はWEBページのナビメニューを装飾する方法を紹介しました。

前回の記事:HTMLのナビメニューをCSSで装飾する方法

 

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

 

※補足

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

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

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

 

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

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

続きを見る

 

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

 

サイドメニューをCSSで見やすくしよう

 

あなた
サイドメニューが今だと全然サイドになっていないので、横に表示されるようにしたいです。

 

CSSで変更を加えていきましょう。
てんし君

 

今回CSSを加えていくHTML部分

 

今回CSSで装飾を加えていくHTML部分は以下のコードです。

 

<main>
                <img src="images/MainImage.png" alt="メイン画像">
                <div id="left_navi">
                    <ul>
                        <li id="navi01">
                            <h2><a href="#">トップ</a></h2>
                        </li>
                        <li id="navi02">
                            <h2><a href="#">デモサイト集</a></h2>
                        </li>
                        <li id="navi03">
                            <h2><a href="#">学習</a></h2>
                        </li>
                        <li id="navi04">
                            <h2><a href="#">制作実績</a></h2>
                        </li>
                        <li id="navi05">
                            <h2><a href="#">お問合わせ</a></h2>
                        </li>
                    </ul>
                </div>
</main>

 

ちなみに今のままだと画像のようになっていますね。

 

CSSで装飾する前のサイドメニュー

追加するCSS

 

以下のCSSを追加しましょう。

 

main {
    height: auto;
    width: 900px;
}
main #left_navi {
    height: 300px;
    width: 210px;
    float: left;
    margin-top: 30px;
}
#left_navi ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #000;
}

#left_navi ul #navi01 {
    margin: 0px;
    padding: 0px;
    width: 210px;
    height: 46px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000;
}

#left_navi ul #navi02 {
    margin: 0px;
    padding: 0px;
    width: 210px;
    height: 46px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000;
}
#left_navi ul #navi03 {
    margin: 0px;
    padding: 0px;
    width: 210px;
    height: 46px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000;
}
#left_navi ul #navi04 {
    margin: 0px;
    padding: 0px;
    width: 210px;
    height: 46px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000;
}
#left_navi ul #navi05 {
    margin: 0px;
    padding: 0px;
    width: 210px;
    height: 46px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000;
}

 

ちなみに画像系は用意して、imagesフォルダの中にいれておいてください。

画像は以下の記事からダウンロードしてください。

html css javascript
HTMLとCSSとWEBページの関係性【理解できます】

  あなたHTMLとCSSとWEBページってどんな関係性なんでしょうか?   HTMLとCSSの勉強を始めるとHTMLとCSSを使ってWEBページをつくることができるというような言葉をよく見ますよね。 ...

続きを見る

 

CSSを追加して再読み込みをすると以下のようになっているはずです。

 

 

「トップ」「デモサイト集」「学習」「制作実績」「お問い合わせ」などのサイドメニューがしっかり横にいってくれていますね。

 

それではCSSのそれぞれの意味を解説していきます。

※なお、前回までで出てきているCSSのプロパティに関しては説明しないのでわからない場合は見返しておいてください。

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

 

ではさっそくコード紹介です。

参考

border-bottom-width → 下線の太さ
border-bottom-style → 下線の形式です。solidは一本線です
border-bottom-color → 下線の色です

 

border系は線を表します。

「bottom」の部分を変更するとそれぞれ違う位置に線がつきます。

 

top → 上

bottom → 下

left → 左

right → 右

 

上記のような感じです。

 

borderはCSSでデザインするときによく使います。

しっかり使えるようにしておきましょう。

 

今回は以上です。

 

次回はメイン要素のレイアウトを整えていきます。

>>次の回:CSSでWEBサイトのメイン要素のレイアウト崩れを修正しよう

 

\ 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 エンジニアてんし君ブログ