こんにちは。All About ホームページ作成ガイドの西村文宏です。
今回は、スマートフォン用ウェブページのために「押しやすいリンク」を作る方法をご紹介いたします。
1行まるまる占有する「大きなボタン」に装飾する方法
スマートフォンは指を使って画面に触れることで操作しますから、リンクは大きい方が押しやすくなります。
そこで、リンクを大きな「ボタン」に見えるよう装飾する方法をご紹介いたしましょう。
あくまでも「ボタンに見えるように装飾」するだけなので、リンクそのものの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を使ってください。
上記のソースでは、リンクは１行全体に広がって表示されます。
広がり具合は「(2)横幅サイズ」で指定しています。値を100%よりも小さくすることで、幅を狭められますから、望みの大きさに調整してみてください。
「(4)角を丸く」と「(8)背景グラデーション」では、Chrome・Safari専用の記述方法とCSS3標準の記述方法を併記しています。片方の値を修正した場合は、もう片方も同様に修正してください。
ボタンの大きさは「(5)余白の調整」にあるpaddingプロパティの値を変えることで調整できます。
marginプロパティの値を変えると、周囲との距離を変えられます。レイアウトとの兼ね合いや好みに応じて修正してみてください。
続いて、文中のリンクを（文中に配置したまま）ボタン型にして押しやすくする装飾方法をご紹介いたします。
ログインしてご覧ください。
ご注意ください
- 本記事の内容は、2015/04/13更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
- 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
- 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。
関連記事
カテゴリーから探す
タグから探す
- アフィリエイトをはじめよう！
- 無料新規パートナー登録
- 広告出稿を希望のかたはこちら
- 無料資料請求はこちら