サイト制作

スマホ対応サイト『リンクを指で押しやすく装飾する方法』

更新日:2011/12/27 公開日:2015/04/13

西村 文宏 (ニシムラ フミヒロ)

All About ホームページ作成ガイド

西村 文宏 (ニシムラ フミヒロ)

こんにちは。All About ホームページ作成ガイドの西村文宏です。

今回は、スマートフォン用ウェブページのために「押しやすいリンク」を作る方法をご紹介いたします。

スマートフォンは指を使って画面に触れることで操作しますから、リンクは大きい方が押しやすくなります。

そこで、リンクを大きな「ボタン」に見えるよう装飾する方法をご紹介いたしましょう。

あくまでも「ボタンに見えるように装飾」するだけなので、リンクそのもののHTMLソースは、以下のようなa要素を使った普通の書き方で問題ありません。

ただ、スタイルシートを使って装飾を適用するために、class属性を付加しています。

<a href="(リンク先)">リンク文字</a>

上記のようなHTMLソースをそのままブラウザで表示させると、普通のリンクとして表示されるだけです。

しかし、以下のようなスタイルシートを追記すると、上記のリンクが「ボタン」のように装飾されて表示されます。

<style type="text/css">
a.largebutton {
/* (1)表示形態 */
display: block;
/* (2)横幅サイズ */
width: 100%;
/* (3)枠線 */
border-style: solid;
border-width: 1px;
border-color: #ccc #999 #999 #ccc;
/* (4)角を丸く */
-webkit-border-radius: 7px; /* Chrome,Safari */
border-radius: 7px; /* CSS3 */
/* (5)余白の調整 */
padding: 6px 0px;
margin: 0.5em auto;
/* (6)文字の装飾 */
text-decoration: none;
/* (7)文字の位置 */
text-align: center;
/* (8)背景グラデーション */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc)); /* Chrome,Safari */
background: linear-gradient(top, #fff, #ccc); /* CSS3 */
}
</style>

上記の25行をそのままHTMLソース内にコピー&ペーストするだけで使えます。

パソコン上で表示を確認したい場合は、ブラウザにChromeかSafariを使ってください。

上記のソースでは、リンクは1行全体に広がって表示されます。

広がり具合は「(2)横幅サイズ」で指定しています。値を100%よりも小さくすることで、幅を狭められますから、望みの大きさに調整してみてください。

「(4)角を丸く」と「(8)背景グラデーション」では、Chrome・Safari専用の記述方法とCSS3標準の記述方法を併記しています。片方の値を修正した場合は、もう片方も同様に修正してください。

ボタンの大きさは「(5)余白の調整」にあるpaddingプロパティの値を変えることで調整できます。

marginプロパティの値を変えると、周囲との距離を変えられます。レイアウトとの兼ね合いや好みに応じて修正してみてください。

続いて、文中のリンクを(文中に配置したまま)ボタン型にして押しやすくする装飾方法をご紹介いたします。

SHARE
西村 文宏 (ニシムラ フミヒロ)

All About ホームページ作成ガイド

西村 文宏 (ニシムラ フミヒロ)

2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。

この著者の他の記事を読む

他の著者をもっと見る

ご注意ください

  • 本記事の内容は、2011/12/27更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
  • 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
  • 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。

カテゴリーから探す

タグから探す

アフィリエイトをはじめよう!
無料新規パートナー登録
広告出稿を希望のかたはこちら
無料資料請求はこちら