サブメニューの表現いろいろ
サブメニューの表現には、様々なものがあります。それぞれ例をあげて見てみましょう。
(全てが画像で出来ているものは除きます。)
<div>
とスタイルシートで設定
複数テーマ用に連結します。
複数テーマ用に区切り線を入れて分類
テーマ見出しを中に入れます
見出しの中にブロック要素の<div>〜</div>を入れます
画像とテーブルを使用する
ホームページ上には、様々な情報を載せますが、サブメニューで囲う事は見る側にとってもクリックしやすくなります。
サブメニューの4種類をのせます。
2つのブロック<div>
を上下に並べ、罫線と背景の色の設定で行います。
中身に関しては、リスト<ul>
で行ってます。
<ポイント>下記の様に2つに分かれたブロックを隙間を無くす様に着ける事。
<div class="sub1-1">サブメニュー1</div> <!-- タイトル部分 -->
<div class="sub1-2"> <!-- ↓中身↓ -->
<ul class="sub1-3"> <!-- リストの開始 -->
<li><a href="リンク">ホームページ作成</a></li> <!-- 項目1 -->
<li><a href="リンク">サブメニュー</a></li> <!-- 項目2 -->
<li><a href="リンク">作り方</a></li> <!-- 項目3 -->
</ul> <!-- リスト終了 -->
</div> <!-- ↑中身ここまで↑ -->
/* タイトル部分 */
.sub1-1
{
text-align:center; /* 文字を中央 */
border:solid 1px #0000ff; /* 上下左右の罫線で今回は背景と同色 */
background-color:#0000ff; /* 背景色 */
color:#ffffff; /* 文字色 */
font-weight:bold; /* 文字を太く */
padding-top:3px; /* 上部と文字までの間隔 */
width:200px; /* 全体の幅 */
}
/* 中身 */
.sub1-2
{
border:solid 1px #0000ff; /* 上下左右の罫線 */
width:200px; /* 全体の幅 */
}
/* リスト */
.sub1-3
{
margin-top:10px; /* リスト上部の余白 */
margin-bottom:10px; /* リスト下部の余白 */
}
ホームページ作成TOP > サブメニューの表現いろいろ > このページのTOP ▲
サブメニュー1を複数テーマ用に連結します。
今回の中身に関しては、リストではなく、単純に項目にリンクを貼って、改行してます。
<ポイント>罫線がダブらない様に設定しましょう。4つのブロックで出来ます。
<div class="sub2-1-1">サブメニュー2−1</div> <!--タイトル部分-->
<div class="sub2-2"> <!--↓中身外枠↓-->
<p class="sub2-3"> <!--↓中身↓-->
<a href="リンク">ホームページ作成</a><br><!--項目1-->
<a href="リンク">サブメニュー</a><br> <!--項目2-->
<a href="リンク">作り方</a><br> <!--項目3-->
</p> <!--↑中身ここまで↑-->
</div> <!--↑中身外枠ここまで↑-->
<div class="sub2-1-2">サブメニュー2−2</div> <!--タイトル部分-->
<div class="sub2-2"> <!--↓中身外枠↓-->
<p class="sub2-3"> <!--↓中身↓-->
<a href="リンク">初心者でも安心</a><br> <!--項目4-->
<a href="リンク">スタイルシート</a><br> <!--項目5-->
<a href="リンク">cgiについて</a><br> <!--項目6-->
</p> <!--↑中身ここまで↑-->
</div> <!--↑中身外枠ここまで↑-->
/* タイトル部分 */
.sub2-1-1
{
border-left:solid 1px #0000ff; /* 左の罫線 */
border-right:solid 1px #0000ff; /* 右の罫線 */
border-top:solid 1px #0000ff; /* 上の罫線 */
border-bottom:none; /* 下の罫線はなし */
text-align:center; /* 文字を中央 */
background-color:#ccffff; /* 背景色 */
color:#0000ff; /* 文字色 */
font-weight:bold; /* 文字を太く */
padding-top:3px; /* 上部と文字までの間隔 */
width:200px; /* 全体の幅 */
}
.sub2-1-2
{
border-left:solid 1px #0000ff; /* 左の罫線 */
border-right:solid 1px #0000ff; /* 右の罫線 */
border-top:none; /* ★上の罫線はなし★ */
border-bottom:none; /* 下の罫線はなし */
text-align:center; /* 文字を中央 */
background-color:#ccffff; /* 背景色 */
color:#0000ff; /* 文字色 */
font-weight:bold; /* 文字を太く */
padding-top:3px; /* 上部と文字までの間隔 */
width:200px; /* 全体の幅 */
}
/* 中身 */
.sub2-2
{
padding-top:10px; /* 枠内上部の余白 */
border-left:solid 1px #0000ff; /* 左の罫線 */
border-right:solid 1px #0000ff; /* 右の罫線 */
border-top:none; /* ★上の罫線はなし★ */
border-bottom:none; /* ★下の罫線はなし★ */
width:200px; /* 全体の幅 */
}
/* リスト */
.sub2-3
{
margin-top:0px; /* リスト上の余白は無しに。 */
margin-left:10px; /* リスト左の余白 */
margin-right:10px; /* リスト右の余白 */
margin-bottom:10px; /* リスト下の余白 */
}
ホームページ作成TOP > サブメニューの表現いろいろ > このページのTOP ▲
サブメニュー2を複数テーマ用に『罫線』で区切って表現します。
テーマの見出しは1で良く、項目毎に整理できます。
<ポイント>
区切る毎のグループを<p>〜</p>
で囲いマージンなどの余白を一斉に指定出来る様にします。
<div class="sub3-1">サブメニュー3</div> <!--タイトル部分-->
<div class="sub3-2"> <!--↓中身外枠↓-->
<p class="sub3-3"> <!--↓中身1↓-->
<a href="リンク">ホームページ作成</a><br> <!--項目1-->
<a href="リンク">サブメニュー</a><br> <!--項目2-->
</p> <!--↑中身1ここまで↑-->
<hr> <!--罫線-->
<p class="sub3-3"> <!--↓中身2↓-->
<a href="リンク">作り方</a><br> <!--項目3-->
<a href="リンク">初心者でも安心</a><br> <!--項目4-->
</p> <!--↑中身2ここまで↑-->
<hr> <!--罫線-->
<p class="sub3-3"> <!--↓中身3↓-->
<a href="リンク">スタイルシート</a><br> <!--項目5-->
<a href="リンク">cgiについて</a><br> <!--項目6-->
</p> <!--↑中身3ここまで↑-->
</div> <!--↑中身外枠ここまで↑-->
/* タイトル部分 */
.sub3-1
{
border-left:solid 1px #0000ff; /* 左の罫線 */
border-right:solid 1px #0000ff; /* 右の罫線 */
border-top:solid 1px #0000ff; /* 上の罫線 */
border-bottom:none; /* 下の罫線はなし */
text-align:center; /* 文字を中央 */
background-color:#ccffff; /* 背景色 */
color:#0000ff; /* 文字色 */
font-weight:bold; /* 文字を太く */
padding-top:3px; /* 上部と文字までの間隔 */
width:200px; /* 全体の幅 */
}
/* 中身 */
.sub3-2
{
padding-top:10px; /* 枠内上部の余白 */
border-left:solid 1px #0000ff; /* 左の罫線 */
border-right:solid 1px #0000ff; /* 右の罫線 */
border-top:none; /* ★上の罫線はなし★ */
border-bottom:solid 1px #0000ff; /* 下の罫線 */
width:200px; /* 全体の幅 */
}
/* リスト */
.sub3-3
{
margin-top:0px; /* リスト上の余白は無しに。 */
margin-left:10px; /* リスト左の余白 */
margin-right:10px; /* リスト右の余白 */
margin-bottom:10px; /* リスト下の余白 */
}
ホームページ作成TOP > サブメニューの表現いろいろ > このページのTOP ▲
サブメニュー1を基本に、見出し部分を中に入れます。
全体を囲んだボックス(<div>〜</div>
)の中に、見出し部分のボックスと、項目を入れてしまう事で出来ます。
<ポイント>
見出しの上下左右の余白を均等に!
<div class="sub4-1"> <!--↓外枠↓-->
<div class="sub4-2">サブメニュー4</div> <!--タイトル部分-->
<p class="sub4-3"> <!--↓中身↓-->
<a href="リンク">ホームページ作成</a><br> <!--項目1-->
<a href="リンク">サブメニュー</a><br> <!--項目2-->
<a href="リンク">作り方</a><br> <!--項目3-->
</p> <!--↑中身ここまで↑-->
</div> <!--↑外枠ここまで↑-->
/* 外枠部分 */
.sub4-1
{
border:solid 1px #3366ff; /* 外枠上下左右の罫線 */
background-color:#ffffff; /* 背景色 */
color:#3366ff; /* 文字色 */
width:200px; /* 全体の幅 */
}
/* タイトル部分 */
.sub4-2
{
margin:5px; /* タイトル外側上下左右の余白 */
background-color:#3366ff; /* 背景色 */
color:#ffffff; /* 文字色 */
padding-top:3px; /* 文字上部の余白 */
text-align:center; /* 文字を中央 */
font-weight:bold; /* 文字を太く */
}
/* リスト */
.sub4-3
{
margin-top:0px; /* リスト上の余白は無しに。 */
margin-left:10px; /* リスト左の余白 */
margin-right:10px; /* リスト右の余白 */
margin-bottom:10px; /* リスト下の余白 */
}
ホームページ作成TOP > サブメニューの表現いろいろ > このページのTOP ▲
見出しの中にブロック要素の<div>〜</div>を入れ、フォルダの上部の様(下記のテーブルではよく見かけます)に行います。
下図の様に見出し内にブロック<div>〜</div>(黒枠部分)を入れ、そのブロックの背景の右端に『斜めの画像』を設置する事で、色を変化させます。
<ポイント>下記の様に2つに分かれたブロックを隙間を無くす様に着ける事。
<div class="sub5-1"> <!--↓見出ブロック↓-->
<div class="sub5-2">サブメニュー5</div> <!--タイトル部分-->
</div> <!--↑見出ブロック↑-->
<div class="sub5-3"> <!--↓項目ブロック↓-->
<p class="sub5-4"> <!--↓中身↓-->
<a href="#sub5">ホームページ作成</a><br> <!--項目1-->
<a href="#sub5">サブメニュー</a><br> <!--項目2-->
<a href="#sub5">作り方</a><br> <!--項目3-->
</p> <!--↑中身ここまで↑-->
</div> <!--↑項目ブロック↑-->
/* 見出ブロック */
.sub5-1
{
width:200px; /* 全体の幅 */
}
/* タイトル部分 */
.sub5-2
{
margin-right:30%; /* 右側の白い部分の範囲 */
padding-top:2px; /* 上部から文字までの距離 */
padding-left:5px; /* 左部から文字までの距離 */
color:#ffffff; /* 文字色 */
background-color:#ff6600; /* 背景色 */
background-image:url(画像); /* 画像の指定 */
background-repeat:no-repeat; /* 繰り返しなし */
background-position:right top; /* 右、上に設置 */
font-weight:bold; /* 文字を太く */
}
/* 項目ブロック */
.sub5-3
{
padding-top:10px; /* ブロック上部の余白 */
border:solid 2px #ff6600; /* ブロックの外枠罫線 */
width:200px; /* 全体の幅 */
}
/* リスト */
.sub5-4
{
margin-top:0px; /* リスト上の余白は無しに。 */
margin-left:10px; /* リスト左の余白 */
margin-right:10px; /* リスト右の余白 */
margin-bottom:10px; /* リスト下の余白 */
}
ホームページ作成TOP > サブメニューの表現いろいろ > このページのTOP ▲
テーブル(<table>
)と画像を使用して作るサブメニューです。
この画像を、この様に分けた、3つのセルの真中に入れ見出し部分を作成します。(枠線は必要ないです。)
下の項目部分は、3つのセルを結合(colspan="3"
)させて1つにし、そのセルの中に各項目を入れます。
(下記は、各行を離して表示してあります。)
<table cellspacing="0" cellpadding="0" width="200" border="0"> <!--テーブル-->
<tr> <!--↓行ここから↓-->
<td bgcolor="#3366ff" nowrap width="130"> <!--↓左のセルここから↓-->
<span>tableサブ</span> <!--見出しの文字-->
</td> <!--↑左のセルここまで↑-->
<td bgcolor="#3366ff"> <!--↓真中セルここから↓-->
<img src="画像" width=幅 border=0 height=高さ alt="" > <!--画像-->
</td> <!--↑真中セルここまで↑-->
<td width="100%"> </td> <!--右のセル-->
</tr> <!--↑行ここまで↑-->
<tr> <!--↓行ここから↓-->
<td colspan="3" class="itemlist"> <!--↓項目セルここから↓-->
<p style="margin:10px;"> <!--↓中身↓-->
<a href="リンク">ホームページ作成</a><br> <!--項目1-->
<a href="リンク">サブメニュー</a><br> <!--項目2-->
<a href="リンク">作り方</a><br> <!--項目3-->
</p> <!--↑中身↑-->
</td> <!--↑項目セルここまで↑-->
</tr> <!--↑行ここまで↑-->
</table>
/* タイトル部分 */
span
{
color:#ffffff; /* 文字色 */
font-weight:bold; /* 文字を太く */
}
/* 項目部分セル */
.itemlist
{
border:solid 2px #3366ff; /* 項目セルの罫線 */
}
ホームページ作成TOP > サブメニューの表現いろいろ > このページのTOP ▲
ワンランクUP講座
ホームページのスタイルをワンランクアップ!基本調整や特選方法、さらにはインターネットの話題までメールマガジンでお届けします。
スタイルシートの使い方のバリエーションを知る事ができる1冊。