２カラムのページを作ろう　７　サイドバー　メニューの設定【display : block】でボタンぽく

いま作っているもののサンプルページは、こちらから

左サイドメニューの設定だよ～～～

左サイドの構造

前々回設定したサイドの外枠

一応、確認しておくね。
設定したのは、フロートｆｌｏａｔと、幅と、失敗したパッディングだけ。

#box-nakawaku-left{
width : 200px;
float : left;
padding-top : 10px;
}

サイドバーの中身

こんな感じだよ～～

設定するスタイルの項目は5つ。

1. 見出しｈ３
2. リストＵＬ
3. リストＬＩ
4. リンク
5. ホバーリンク

それぞれのボックス（Ｈ３、ＵＬ、ＬＩ）の横幅は、
先のＩＤ【#box-nakawaku-left】で設定済みなので、
見出しにもＵＬにもＬＩにもリンクにも、横幅は一切指定しません。

基本的に、外枠【#box-nakawaku-left】で設定した
幅２００ピクセルの仕上がりなのですが、
Ｈ３とＵＬに、左の外余白（マージン）を
それぞれ、３ｐｘと６ｐｘ取っていますので（上の画像の赤い矢印部分）、
Ｈ３は１９７ピクセル
ＵＬとその中身のＬＩは、１９４ピクセルの幅で仕上がります。

で、また、失敗しちゃったんだよね^^;
ここも、最後の微調整で、このマージンつけ足したんですね。
本来なら、【#box-nakawaku-left】に左マージン３ｐｘ設定して、
あとは、ＵＬに３ｐｘの左マージンがいいのでしょう……
まあ、許してちょうだい！

左サイドのブロックレベル要素設定

見出しタグ<h3></h3>のＣＳＳ設定

↑↑↑構造は、こんな感じ1だよ。

h3{
  color : #666666;   
  background-color : #cccccc;   
  margin-left : 3px;    
  border-width : 7px;
  border-style : ridge;
  border-color : #aaaaaa;
  padding-top : 5px;
  padding-bottom : 5px;
  padding-left : 7px;
}

border-style : ridge;　浮き出し
今回レイアウトのボーダーに設定した、スタイル。
画像を使わなくても、画像ぽく見えるでしょ？
他に、くぼみとかインセットアウトセットなどがあります。
色々試してみてね！

ここで、見出しタグを使うの？　って意見もあるでしょう。
私的には、「鳥図鑑」ってくらいだから、
鳥の名前を羅列するメニューなので、立派な見出しと判断しました。
HTMLのタグの使い方は、難しいけど、自分が伝えたいことが、伝わる書き方をすればいいんじゃないのかと私は思います。

リストタグ　ＵＬのＣＳＳ設定

下記のとおり

ul{
  list-style-type : none;
  padding-bottom : 20px;
  margin-left : 6px;
}

下のパッディング設定は、次にくる見出しとの余白だよ～～

リストタグＬＩのＣＳＳ設定

li{ 
  font-size : 105%;   
  font-weight : bold;
}

右側の余白の設定について

今回、右側の余白設定は、一切しいていません。

なぜかと言えば――――
この右側に並んでいる【#box-nakawaku-right】のボックスとの間に、４０ピクセルの余白があるからです。
だから、ギュウギュウになる心配はしなくて大丈夫なのよ！

文字の余白（パッディング）は、次のＡ（アンカー）タグで、設定します。

Ａタグの設定　インライン要素からブロックレベル要素へ

お～～タイトルだけ見ると、高尚な香りがするじゃん！

ま～～ね～～(^^)v

以前の記事と、ほぼ同じことをします。
・ヘッポコメニュー作成の過程
・少しはマシなメニュー作成過程

Ａタグは、「インライン要素」です。
それを「ブロックレベル要素」にすることによって、
端っこでも押せる、ボタンぽいリンクになります。
ボタンぽくするために、パッディングで、文字との余白を作ります。
ブロックレベル要素とインライン要素については、こちらから

ＡとＡ：ｈｏｖｅｒの設定

a{
  text-decoration : none;   
  color : #808080;
  border-bottom-width : 2px;
  border-bottom-style : dotted;
  border-bottom-color : #666666;
  padding-top : 15px;
  padding-bottom : 5px;
  padding-left : 15px;
  display : block;
}

a:hover{  
  color : #ffffff;
  background-color : #808040;
  border-bottom-width : 2px;
  border-bottom-style : dotted;
  border-bottom-color : #ffffff;
}

以上

これにて、サイドバーのスタイル設定は終わり。

次回は、フッターの設定かな？

表の設定（テーブル）をいじってないので、見難いですよね
すみません。
そこまで、追いついていません(>_<) さらに、テーブルの設定は、超苦手(-.-)なんです。