ハンデプログラマー

障害者の方のためのプログラミング教室です。目指せ自立!!

トップ > HTML/CSS入門 > 実際にサイトを作ってみよう(メニュー)

実際にサイトを作ってみよう(メニュー)

1、テラパッドを開きstyle9.cssファイルを開きます。

2、下記のようにプログラムを追加します。

hdmenu{
width:100%;
background:#fff;
}

hdmenu ul{
margin:0;
padding:0;
}

hdmenu ul li{
position:relative;
width:16.66%;
float:left;
margin:0;
padding:0;
text-align:center;
list-style:none;
}

hdmenu ul li:hover > a{
color:#fff;
background:#710000;
}

hdmenu ul li a{
display:block;
margin:0;
padding:16px 0;
background:#9b0f0f;
color:#fff;
font-size:14px;
font-weight:bold;
line-height:1;
text-decoration:none;
}

3、HTMLと同じフォルダに「style10.css」というファイル名で保存します。

4、テラパッドを開きtest9.htmlファイルを開きます。

2、下記のようにプログラムを追加します。

<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="style10.css">
</head>
<body>

<div class="space">
    <a href="../homepage.html"><img src="images/logo.jpg" alt="ロゴ"></a>
	<p class="guide">
	    サイト説明文を表示します。
    </p>
</div>

<hdmenu>
    <div class="space">
	<ul class="menu">
	    <li><a href="../index.html">ホーム</a></li>
	    <li><a href="../programing.html">プログラミング講座</a></li>
	    <li><a href="../question.html">質問受付</a></li>
	    <li><a href="../company.html">会社概要</a></li>
	    <li><a href="../inquiry.html">お問い合わせ</a></li>
	    <li><a href="../infomation.html">個人情報保護方針</a></li>
	</ul>
    </div>
</hdmenu>

</body>
</html>

3、このファイルをtest10.htmlのファイル名で保存します。

4、HTMLファイルをダブルクリックして開きます。
テスト10表示

CSSとHTMLで記述したメニューが表示されます。

●hdmenuのタグを宣言します。

hdmenu{
width:100%;
background:#fff;
}
hdmenuというタグは独自のものでこのタグ内のみのメニュー設定を行ないます。 spaceクラスの幅100%の領域を確保します。

●hdmenuタグ内のulの設定をします。

hdmenu ul{
margin:0;
padding:0;
}
ulはリストを表示する時に使用します。

●hdmenuタグ内のliの設定をします。

hdmenu ul li{
position:relative;
width:16.66%;
float:left;
margin:0;
padding:0;
text-align:center;
list-style:none;
}
liは各リストの表示に使用します。
positionで相対配置にします。
widthで各メニューの割合を設定します。メニュー項目数によって数値は変更します。
floatで左側から表示させるようにします。
marginとpaddingで隙間をゼロにします。
text-alignでテキストを中央に表示するようにします。
list-styleでリストのマーカーをなしにしています。マーカーとはリストの先頭に「・」のような記号を付けるもののことを言います。

●hdmenuタグ内のliでマウスのカーソルがブロック内に入った時の設定をします。

hdmenu ul li:hover > a{
color:#fff;
background:#710000;
}
カーソルが入ったら背景色を変更するようにしています。

●hdmenuタグ内のliのリンクaの表示設定をします。

ul li a{
display:block;
margin:0;
padding:16px 0;
background:#9b0f0f;
color:#fff;
font-size:14px;
font-weight:bold;
line-height:1;
text-decoration:none;
}
displayでブロックを作成します。
backgroundで背景色を設定します。
color、font-size、font-weightでテキストの設定をします。
line-heightで行の高さを設定します。
text-decorationで通常リンクには下線が入りますがnoneにすることで下線表示しないようにしています。

HTMLの方ではメニューの表示を行ないます。

<hdmenu>
    <div class="space">
	<ul class="menu">
	    <li><a href="../index.html">ホーム</a></li>
	    <li><a href="../programing.html">プログラミング講座</a></li>
	    <li><a href="../question.html">質問受付</a></li>
	    <li><a href="../company.html">会社概要</a></li>
	    <li><a href="../inquiry.html">お問い合わせ</a></li>
	    <li><a href="../infomation.html">個人情報保護方針</a></li>
	</ul>
    </div>
</hdmenu>
CSSで設定した属性でリストを作成すると画面に表示されるようなリストになります。

リンクは自分で作りたいページのファイル名を記述すれば独自のメニューが作成されます。

プログラミング言語

こちらのサイトで扱うプログラミング言語一覧です。

ページのトップへ戻る