水平または垂直に並んだメニューの作成方法

ではまず初めに以下のリストを作ります:

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Partners</a></li>
    <li><a href="#">Contacts</a></li>
</ul>

次に新しいCSSファイルを作成しHTMLに以下のリンク設定を行います:

<link href="style.css" rel="stylesheet" type="text/css" />

CSSファイルを作りたくなければインラインでHTML内に記述することも可能です。

<style type="text/css">
<!--
    ...ここにCSSを記述します。
-->
</style>

CSSファイルを作成する場合、下記のようなHTMLコードになっていれば大丈夫です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Partners</a></li>
    <li><a href="#">Contacts</a></li>
</ul>
</body>
</html>

今の状態のままでは文字のリストが並びその文字の部分にのみリンクが設定されているだけです。リストを大きな変更なしに垂直に並ぶメニューバーに変更してみましょう。
メニューバーにするには以下HTMLとCSSの追加設定が必要です。
リストにclassを定義するためにHTMLの<ul>を<ul class=”horizontal”>に書き換えます。CSSファイルにクラス”horizontal”の設定を記述します。デフォルトで定義されているmarginやpaddingをクリアにする必要があります:

ul.horizontal{
    margin:0;
    padding:0;
}

次にリストの各項目がボタン化され垂直に並ぶよう定義します:

ul.horizontal li{
    display:block;
    float:left;
    padding:0 10px;
}

それぞれの設定が終わりましたら準備完了です。色を追加したり、背景の設定をすればさらに見栄えがよくなります。


Comments are closed.