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

あなた

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

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

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

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

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

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

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

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

【この記事の信頼性】

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

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

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」の部分を変更するとそれぞれ違う位置に線がつきます。

上記のような感じです。

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

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

今回は以上です。

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

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

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

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