Q&A　リストタグの装飾　２

ボタンのように端っこも押せるリンクの設定

クリックする範囲が大きいことは、見栄えもよいですが、閲覧者にも親切だと思います。

時々間違え探しのような、まるで、こちらが試されているようなリンクや、ダミーリンクなどがありますが……大人の事情により以下略

←今回は、これを作ります。
サンプルページは、こちらからどうぞ

Ａタグ（アンカー）をブロックレベル化する

ブロックレベルって、なによ？？

って方は、
前回書いた、ブロックレベル要素とインライン要素をご参照ください。

まず、これが、前回作ったダサダサメニューのスタイルの一覧です。

右上の【ＬＩ】に設定したスタイルのほとんどを、
ごそっと【Ａ】タグに移します。

何をどこまで移すのかは、人によって違うようですが、
私は、文字の大きさとフォントファミリーは【ＬＩ】タグに残していきます。

下記を見ながら入力してください。

表は、スタイルシートマネージャの項目に合わせています。

で、一番下のブルーの箇所。これが、インライン要素をブロックレベル要素化している部分です！

ホームページビルダー・スタイルシートマネージャでの入力の仕方↓↓↓

次は、【ＬＩ】のスタイル設定。

フォントファミリーの設定の仕方は、また書きますが、分からなければ、
取りあえずそのままで。

前回のダサダサメニューは、「勘亭流」などいう字体を使いましたが、
見られる方と見られない方が、いらっしゃったことでしょう。
ああいう字体は、設定しない方が、いいです^^;
見る方のパソコンに左右されます。
今回使用した、「Times New Roman」は、ほぼ、どのＰＣでもＯＫな字体です。
アルファベットだけに、適応される字体です。

次は、【Ａ】タグのhover（ホバー）設定＆前回と同じ【ＵＬ】

ul{  
  list-style-type : none;
  width : 200px;
}

li{
  font-family : "Times New Roman",sans-serif;
  font-size : 120%;
}

a{
  color : #5d5d5d;    
  text-decoration : none;  
  padding-top : 8px;
  padding-left : 10px;
  padding-bottom : 5px;
  margin-bottom : 13px;
  border-width : 2px 2px 2px 12px;
  border-style : solid;
  border-color : #ff8000;
  display : block;
}

a:hover{  
  color : #e3e3e3;
  border-left-width : 12px;
  border-left-style : solid;
  border-left-color : #cccc33;
  border-bottom-style : none;
  border-top-style : none;
  border-right-style : none;
}

色や線の形状を変えて、楽しんでくださいね！

ご注意点

その１
スタイルをあつかったサイトを見ると、
【ＵＬ】【ＬＩ】に、
padding : 0px;
margin : 0px;
の設定を加えているものが多いです。

これは、あらかじめリストタグが持っている余白をリセットさせるものです。
今回は、この設定は、割愛しております。CSSのリセットを行っていれば必要がないです（その内容による）。
CSSリセットを行わないでページ内に組み込む際、余白が気になるようなら、入れてみてください。
詳しくは、下記の記事をご覧ください。
・リストタグの余白やリストマークについて

その２
【ＵＬ】の幅指定について。
入れ子にしてＨＴＭＬを書く場合、外枠に幅指定があり、それに準ずるならば、
入れなくても大丈夫です。

詳細は、２カラムを作る時に、説明します。（また、問題の先送りか！）