こんにちは朱夏です。
今回はメニューバーを作成していきたいと思います。
基本はリンク作成になるのでこんな感じ。
<div class=”menu”>
<ul>
<li><a href=”リンク先パスを入力”>link1</a></li>
<li><a href=”リンク先パスを入力”>link2</a></li>
<li><a href=”リンク先パスを入力”>link3</a></li>
<li><a href=”リンク先パスを入力”>link4</a></li>
<li><a href=”リンク先パスを入力”>link5</a></li>
</ul>
</div>
これを普通に表示させるとこんな感じ。
※リンク先は指定してないので404が帰ってきます。
これをCSSで形を整えていきます。
.menu {
display: block;
border: solid 1px #dedede;
}
.menu ul li {
display: inline-block;
list-style-type: none;
}
.menu ul li a {
text-decoration: none;
}
CSSを反映させたものがこちら。
htmlの記載をリストにせず1行で描けば最初から横並びにすることは可能ですが、見た目をデザインしていく上ではこちらの方が都合が良い様です。
とはいえ、横並びにしたり、枠線引いたり、CSSで体裁を整えていくのは、最初に慣れるまでは結構大変でした・・・。
慣れてしまえばとても便利なものなんですけどね。
というかCSSが無いとwebデザインで出来ることが激減してしまいます。
それでは、今回はここまで。
次回はメニューのリンクをもっとボタンっぽくしていきます。