ホームページ作成(サブメニュー)
無料!発信中!メール情報誌!

ホームページ作成しよう!
HTML〜スタイルシート

ホームページ作成TOP > サブメニューの表現いろいろ

サブメニューの表現いろいろ

サブメニューの表現には、様々なものがあります。それぞれ例をあげて見てみましょう。

(全てが画像で出来ているものは除きます。)

sample

<div>とスタイルシートで設定

サブメニュー1

複数テーマ用に連結します。

サブメニュー2−1
サブメニュー2−2

複数テーマ用に区切り線を入れて分類

サブメニュー3

テーマ見出しを中に入れます

見出しの中にブロック要素の<div>〜</div>を入れます

サブメニュー5

画像とテーブルを使用する

  tableサブ  

ホームページ作成
サブメニュー
作り方

いろいろなサブメニューの書き方

ホームページ上には、様々な情報を載せますが、サブメニューで囲う事は見る側にとってもクリックしやすくなります。

サブメニューの4種類をのせます。

2つのブロック<div>を上下に並べ、罫線と背景の色の設定で行います。

中身に関しては、リスト<ul>で行ってます。

<ポイント>下記の様に2つに分かれたブロックを隙間を無くす様に着ける事。

サブメニュー1

HTML部分の書き方は

<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つのブロックで出来ます。

サブメニュー2−1


サブメニュー2−2

HTML部分の書き方は

<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>で囲いマージンなどの余白を一斉に指定出来る様にします。

サブメニュー3
HTML部分の書き方は

<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>)の中に、見出し部分のボックスと、項目を入れてしまう事で出来ます。

<ポイント>
見出しの上下左右の余白を均等に!

HTML部分の書き方は

<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つに分かれたブロックを隙間を無くす様に着ける事。

サブメニュー5

HTML部分の書き方は

<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サブ  
 

ホームページ作成
サブメニュー
作り方

HTML部分の書き方は

<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%">&nbsp;</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 ▲