HTML/CSS

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

2021年1月24日

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

 

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

 

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

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

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

 

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

 

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

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

 

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

HTMLのサイドメニュー部分をCSSでデザインする方法

 

【この記事の信頼性】

この記事を書いている僕は現役のWEBエンジニアです。

普段からHTMLとCSSを使ってWEBページを制作しています。

 

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

 

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

 

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

 

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

 

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

 

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

 

<main>
                <img src="images/MainImage.png" alt="メイン画像">
                <div id="Side_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 #Side_navi {
    height: 300px;
    width: 210px;
    float: left;
    margin-top: 30px;
}
#Side_navi ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #000;
}

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

#Side_navi ul #navi02 {
    margin: 0px;
    padding: 0px;
    width: 210px;
    height: 46px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000;
}
#Side_navi ul #navi03 {
    margin: 0px;
    padding: 0px;
    width: 210px;
    height: 46px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000;
}
#Side_navi ul #navi04 {
    margin: 0px;
    padding: 0px;
    width: 210px;
    height: 46px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000;
}
#Side_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とWEBページの関係性【理解できます】

 

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

 

 

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

 

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

 

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

 

前回までの記事一覧はコチラ

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

 

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

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

 

border系は線を表します。

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

 

top → 上

bottom → 下

left → 左

right → 右

 

上記のような感じです。

 

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

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

 

今回は以上です。

 

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

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

 

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

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

 

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

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

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

続きを見る

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

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

続きを見る

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

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

続きを見る

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

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

続きを見る

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

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

続きを見る

-HTML/CSS

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