STEP.5 横幅を制限する場合
リンクの横幅を、親要素の幅いっぱいに広げずに制限したい場合は、widthプロパティを書き加えます。 下記のように、a要素に対するスタイルを記述している箇所に追記します。
a {
display: block;
padding: 0.5em;
border: 1px solid #ccccff;
text-align: center;
text-decoration: none;
line-height: 1.5;
width: 300px; /* リンクの横幅 */
}
display: block;
padding: 0.5em;
border: 1px solid #ccccff;
text-align: center;
text-decoration: none;
line-height: 1.5;
width: 300px; /* リンクの横幅 */
}
widthプロパティは横幅を指定するプロパティです。値に「300px」を指定すれば、横幅が300ピクセルになります。 この値には、余白や枠線の太さは含まれない点に注意して下さい。 （ここでは、横幅の指定が300pxでも余白や枠線の太さがあるため、合計の横幅は300ピクセルよりも大きくなります。）
※Internet Explorerの互換モードでの表示だと、余白や枠線の太さを含めた横幅が300ピクセルになります。
表示すると、以下のように見えます。
その道のプロがあなたをガイド
All About
http://allabout.co.jp/
以上で装飾は終わりです。
最後に、これまでのソースをまとめて掲載しておきます。コピー＆ペーストして使ってみる際にご活用下さい。
