2/3 スマートフォンで押しやすいボタン型リンクを作るCSS [ホームページ作成] All About

リンクをボタン型に装飾して表示するCSSソース

それでは、下図のように、「a要素で作ったリンク」にCSSを加えて、「ボタン型」に見えるよう装飾してみましょう。

a要素で作ったリンクをCSSでボタン型に装飾した例

ここで必要な装飾（CSSの記述）は、以下の通りです。

枠線を引く（左上を明るく、右下を暗く）
枠線の角を丸くする
余白を加える（押しやすく、見やすくするため）
背景をグラデーションにする（上を明るく、下を暗く）
リンクの下線を消す
リンクの形態や掲載位置による調整

上記１～６のステップごとに、記述するCSSソースをご紹介致します。

１．枠線を引く（左上を明るく、右下を暗く）

border-style: solid;
border-width: 1px;
border-color: #ccc #999 #999 #ccc;

四辺に枠線を引く

上下左右に枠線を引き、左側と上側に明るい色を指定し、右側と下側に暗い色を指定すれば、やや立体的なボタンのように見えます。

border-styleプロパティは「線種」を、border-widthプロパティは「線の太さ」を、border-colorプロパティは「線の色」を指定します。値を4つ記述した場合は、「上→右→下→左」（時計回り）の順に指定したことになります。

２．枠線の角を丸くする

-webkit-border-radius: 7px; /* Chrome,Safari */
-moz-border-radius: 7px;    /* Firefox */
border-radius: 7px;         /* CSS3 */

枠線の角を丸くする

枠線の角を丸くするには、border-radiusプロパティ（CSS3）を使います。値には、丸くする半径を指定します。ここでは7pxにしていますが好みに応じて調整して下さい。

CSS3でのプロパティ名は「border-radius」ですが、ここではChromeやSafariのベンダープレフィックス（プロパティの頭に「-webkit-」などの文字列を加えて試験実装であることを示す）を加えた「-webkit-border-radius」も一緒に記述しておきます。

スマートフォン専用ページにするなら、Firefox用の「-mox-border-radius」は記述しなくて構いませんが、PCから閲覧される可能性も考慮するなら、記述しておきましょう。

３．余白を加える（押しやすく、見やすくするため）

padding: 0.3em 0.9em;

余白を加えて押しやすくする

paddingプロパティは、枠線より内側の余白量を指定します。上記では、上下に0.3文字分・左右に0.9文字分の余白を設けています。

ある程度の余白がないと、ボタンが詰まって見にくくなってしまいます。余白を大きめに取ると、クリック可能範囲の広い大きなボタンになります。

４．背景をグラデーションにする（上を明るく、下を暗く）

/* ▼Chrome,Safari */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
/* ▼CSS3 */
background: linear-gradient(top, #fff, #ccc);

グラデーションを加える

背景にグラデーションを加えると、よりボタンらしく立体的に見えます。 CSS3では、backgroundプロパティの値に「liner-gradient(開始位置,開始色,終了色)」と記述することで、線形グラデーションを加えられます。

ここでは、ChromeとSafariのベンダープレフィックスを付加した「-webkit-gradient」も同時に記述しておきます。CSS3とは記述内容が少し異なり、「-webkit-gradient(種類,開始位置,終了位置,from(開始色),to(終了色))」と記述します。

グラデーションは、上から下に向かって、白色(#fff)から灰色(#ccc)に変化するよう指定しています。なお、順序を逆にすると、「押し下げられたボタン」のように見せられます。

PC用ブラウザも考慮するなら、上記のソースに加えて下記のように、Firefox用に「-moz-liner-gradient」を、Opera用に「-o-liner-gradient」（※Opera11以降のみ）を、IE用に「filter」プロパティを同時に記述しておきましょう。

/* ▼Firefox */
background: -moz-linear-gradient(top, #fff, #ccc);
/* ▼Opera */
background: -o-linear-gradient(top, #fff, #ccc);
/* ▼IE */
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffcccccc);

５．リンクの下線を消す

text-decoration: none;

リンクの下線を消す

text-decorationは、文字の装飾を指定するプロパティです。たいていのブラウザでは、リンクには標準で下線が引かれます。text-decorationプロパティの値に「none」を指定すれば、その下線を消すことができます。

必要に応じて、リンクの下線を消して下さい。下線がない方がボタンらしく見えますが、リンクであることを示すために下線を引いたままでも構わないでしょう。

６．リンクの形態や掲載位置による調整
（Ａ）本文中のリンクを装飾する場合：

margin: 0px 0.3em;
line-height: 2em;
white-space: nowrap;

行間を広く取って重なりを防ぐ

marginプロパティ（枠線の外側の余白）を使って、「ボタン型リンク」と「左右に隣接する文字」とを少しだけ離しています。ぴったりくっついているよりは、少し離れている方が読みやすいでしょう。

line-heightプロパティは、1行の高さを指定するプロパティです。ここでは「2文字分（＝2em）」を指定しています。これによって、リンクのある行だけ、行間を広めに取ることができます。

行間が空いていないと重なってしまう

十分な行間を空けないと、右図のようにボタンが上下の行に重なってしまいますので注意して下さい。

先ほどpaddingプロパティで上下に0.3文字分の余白を設けましたから、「リンク文字の高さ（1.0em）」＋「上下の余白（0.3em×2＝0.6em）」で、合計1.6emよりも大きな値を「行の高さ」として指定する必要があります。好みで調整して下さい。

ボタンの途中で改行された例

ボタン（リンク）の途中で行末に達してしまった場合、そのままでは右図のように、ボタンの半ばで自動改行されてしまいます。それを防ぐため、white-spaceプロパティに、値「nowrap」を指定しています。これによって、ボタンの半ばで行末に達するような場合は、ボタン全体の表示が次の行へ送られます。

（Ｂ）リンクだけを1行に広げて掲載する場合：

display: block;
width: 100%;
text-align: center;
margin: 0.5em auto;

リンクを1行全体に広げる

displayプロパティに値「block」を指定することで、リンクをブロックレベル要素のように表示させられます。 widthプロパティに値「100%」を指定すれば、横幅が1行全体に広がります。text-alignプロパティで、文字を中央に寄せています。中央に寄っている方がボタンらしく見えるでしょう。

marginプロパティ（枠線の外側の余白）では、上下に0.5文字分（0.5em）の余白を設け、左右の余白は自動調整するよう指定（auto）しています。自動調整を指定すると左右で均等に余白が設けられますから、ボタン自体がセンタリングして表示されます（下図参照）。センタリングの必要がなければ「0」を指定しておけば良いでしょう。その場合は、左寄せで表示されます。