ハンデプログラマー

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

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

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

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

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

.bnr{
overflow:hidden;
}
.bnr ul{
overflow:hidden;
}
.bnr li{
margin:0 0 10px 0;
padding:0;
list-style:none;
}
.bnr li a:hover{
opacity:0.8;
}
.bnr img{
width:100%;
}

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

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

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

<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="style13.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>

<div class="topimg">
<img src="images/top.jpg" alt="トップ画像">
</div>

<div id="contents">
    <div id="main">

        <h1>文章タイトル</h1>
        <p>
            文章を書き込む。
        </p>
    </div>

    <div id="sub">
        <ul class="bnr">
            <li><a href="../index.html"><img src="images/bnr.jpg" alt=""></a></li>
	    <li><a href="../index.html"><img src="images/bnr.jpg" alt=""></a></li>
	</ul>
    </div>
</div>

</body>
</html>

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

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

CSSとHTMLで記述したサブメニューが表示されます。ここではバナー表示しています。

●バナーの設定を追加します。

.bnr{
overflow:hidden;
}
.bnr ul{
overflow:hidden;
}
.bnr li{
margin:0 0 10px 0;
padding:0;
list-style:none;
}
.bnr li a:hover{
opacity:0.8;
}
.bnr img{
width:100%;
}
overflowはサブメニュー領域からはみ出したら表示しないようにしています。
liのリストとして表示し、opacityでマウスが上に来たら0.8の透過表示させるようにします。
widthを100%とすることで領域の最大幅まで表示するようにします。

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

<div id="sub">
    <ul class="bnr">
        <li><a href="../index.html"><img src="images/bnr.jpg" alt=""></a></li>
        <li><a href="../index.html"><img src="images/bnr.jpg" alt=""></a></li>
    </ul>
</div>
CSSで設定したようにサブメニューにバナーを表示します。バナーをクリックするとリンク先のページに移動します。

サブメニューにはバナーを表示することが多いのでこのような設定にしています。文字だけのサブメニューでも構いません。

プログラミング言語

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

ページのトップへ戻る