STEP.2 各項目を箱形に見えるよう装飾
リストの各項目1つ1つを箱形に見えるよう装飾します。 また、縦方向ではなく横方向に並ぶようにも指定します。
ul.pagelinks li {
width: 1.2em; /* 横幅 */
line-height: 1.2em; /* 高さ */
list-style-type: none; /* 先頭記号なし */
border: 1px solid blue; /* 枠線 */
float: left; /* 横に並べる */
margin: 0.1em; /* 周囲の余白 */
padding: 0px; /* 内側の余白 */
font-family: Arial,sans-serif;/* フォント */
font-weight: bold; /* 太字 */
text-align: center; /* センタリング */
}
上記では、1つ1つの項目を作る「li要素」に対して10個のプロパティを使用しています。
これを表示させると、以下のように見えます。
各項目が箱形に表示され、横方向に並んでいるはずです。
まだ、リンクに対して装飾を行っていないので、クリックできる範囲が狭かったり、背景色がなかったり、数字に下線が引かれていたりします。それは後から装飾します。
スタイルシートソースの各記述の意味を順に説明しておきます。
■width: 1.2em;
横幅を指定します。ここでは「1.2文字分」にしていますが、好みの値を指定して下さい。
■line-height: 1.2em;
行の高さを指定します。つまり、（ここでは）箱の高さになります。先ほどのwidthプロパティと同じ値を指定することで、正方形になります。
■list-style-type: none;
リストに標準で加えられる「先頭記号」を消しています。
■border: 1px solid blue;
枠線を描く指定です。ここでは、太さ1ピクセル・実線(solid)・青色(blue)の枠線を引いています。
■float: left;
各項目を横に並べるために必要な記述です。
■margin: 0.1em;
各項目間の余白量を指定しています。ここでは「0.1文字分」にしていますが、好みの値を指定して下さい。「0px」にすると、周囲の項目とぴったりくっつきます。
■padding: 0px;
内側の余白量を指定しています。これは必ず「0px」にします。 （何も指定しなければ「0px」だと解釈されるので、この記述は省略しても構いません。）
■font-family: Arial,sans-serif;
フォント名を指定しています。ここでは「Arial」を指定しています。「Arial」が存在しない環境では、何らかのゴシック系フォント（sans-serif）が使われます。 この記述は省略しても構いませんし、好みのフォントが他にあればそれを指定しても構いません。
■font-weight: bold;
太字にしています。省略しても構いません。
■text-align: center;
番号をセンタリングして表示させる指定です。箱の中でページ番号が中央に表示されるようにしています。 右端に寄せたい場合は、値に「right」を指定します。
次に、リンクに対して装飾を施します。
