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

あなた

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

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

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

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

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

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

サイドメニューを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を追加しましょう。

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フォルダの中にいれておいてください。

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

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

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

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

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

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

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

border系は線を表します。

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

上記のような感じです。

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

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

今回は以上です。

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

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

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

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