周囲の余白や文字も含めてリンクをデザイン(3ページ目)

STEP.2 ベースの装飾を作る

それでは、スタイルシートを記述していきましょう。まずは、リンクを作っているa要素に対して、基本となる装飾を施してみます。

リンクを作る「a要素」に対して、6つのプロパティを使って装飾しています。このソースを使って、前ページのHTMLを表示させると、以下のように見えます。
※色が付加されておらず、一時的に下線も消えているので分かりにくいですが、枠線内が（余白部分も文字部分も）すべてリンクになっています。

その道のプロがあなたをガイド
All About
http://allabout.co.jp/

上記のスタイルシートソースの意味は次の通りです。

■display: block;
対象をブロックレベル要素のように表示させる指定です。これを記述することで、リンクを（p要素やdiv要素のような）ブロックのように扱えます。 その結果、左端から右端まで余白を含めた全体がリンクになります。

■padding: 0.5em;
枠線の内側の余白を0.5文字分にする指定です。余白がないと詰まって見えるので加えています。値は好きなように修正して下さい。

■border: 1px solid #ccccff;
枠線「太さ1ピクセル・実線・淡い青色」を周囲に引く指定です。（3つの値は半角スペースで区切って記述します。）

■text-align: center;
文字列をセンタリング（中央寄せ）で表示する指定です。左寄せなら left 、右寄せなら right と記述します。

■text-decoration: none;
リンクの下線を消すための指定です。（斜体や取消線などの装飾も同時に消えます）
※リンクの下線は、一時的に消します。この後の記述で一部分にだけ下線を復活させます。

■line-height: 1.5;
行間を指定しています。line-heightプロパティは正確には「行の高さ」を指定するプロパティです。ここでは「1.5」を指定しているので、「文字の1.5倍の高さ」が行の高さになります。 つまり、「0.5文字分の行間」ができるということです。

次に、span要素に対してスタイルを指定して、リンク内部の各部分に装飾を施します。

リンク内の各部分の装飾を作る >>