

これまではプログラミング未経験者の方に向けてHTMLとCSSの基礎からWEBページの作る流れを解説してきました。
前回はWEBページのナビメニューを装飾する方法を紹介しました。
前回の記事:HTMLのナビメニューをCSSで装飾する方法
今回はサイドメニューをCSSで装飾していきます。
ちなみにこの記事は連載記事の1つです。こちらから学習を進めておいてください。
【この記事でわかること】
✔ HTMLのサイドメニュー部分をCSSでデザインする方法
【この記事の信頼性】
この記事を書いている僕は現役のWEBエンジニアです。
普段からHTMLとCSSを使ってWEBページを制作しています。
ではさっそく見ていきましょう。
サイドメニューを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フォルダの中にいれておいてください。
画像は以下の記事からダウンロードしてください。
CSSを追加して再読み込みをすると以下のようになっているはずです。

「トップ」「デモサイト集」「学習」「制作実績」「お問い合わせ」などのサイドメニューがしっかり横にいってくれていますね。
それではCSSのそれぞれの意味を解説していきます。
なお、前回までで出てきているCSSのプロパティに関しては説明しないのでわからない場合は見返しておいてください。
前回までの記事一覧はコチラ
ではさっそくコード紹介です。
border-bottom-width → 下線の太さ
border-bottom-style → 下線の形式です。solidは一本線です
border-bottom-color → 下線の色です
border系は線を表します。
「bottom」の部分を変更するとそれぞれ違う位置に線がつきます。
top → 上
bottom → 下
left → 左
right → 右
上記のような感じです。
borderはCSSでデザインするときによく使います。
しっかり使えるようにしておきましょう。
今回は以上です。
HTMLとCSSの教材をまだ準備していない方は準備しましょう。
学習ステップの全体はコチラ