にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

リンクの装飾をモバイル環境でのみ「押しやすいボタン」に切り替える方法 [ユーザビリティ]

下線が付加されただけのリンクは、指でタップする操作が前提のモバイル環境では使いにくい(押しにくい)ことがあります。モバイル環境での表示時にのみ、テキストリンクを「ボタン型」に装飾してみてはいかがでしょうか。

リンクの押しやすさは環境によって異なる

たくさんのテキストリンクを並べる際、PC環境であれば箇条書きのようにして並べておくのが分かりやすくて使いやすいでしょう。マウス操作が基本ですから、テキストリンクがただ並んでいる状態でも特に不便はありません。しかし、モバイル環境では指でタップしないといけない(押さないといけない)ため、ただ文字列が表示されているだけだと押しにくい場合があります。テキストリンクをCSSで「ボタン」に見えるように装飾しておくと、タップ可能な範囲が広がって使いやすいリンクになるでしょう。

しかし、このようなボタン型のリンクは、マウスで操作するPC環境で閲覧した場合には無駄に空間を占有してしまって見渡しにくいリンクになってしまう可能性もあります。
そこで、PC環境では通常のテキストリンクでありながら、モバイル環境で表示された際には押しやすいボタンの形に装飾する方法が便利です。

上記のリンクは、横幅901px以上の環境では箇条書きのテキストリンクとして表示されますが、横幅900px以下の環境ではボタン型のリンク群として表示されます。
今回は、このようなテキストリンクをモバイル環境でのみ「押しやすいボタン」に切り替えるリンクの作成方法を解説します。

テキストリンクをモバイル環境でのみ「押しやすいボタン」に切り替える記述

まず、以下のようなHTMLソースでリンクリストが用意されている場合を考えます。

HTMLソース

<ul class="text-button-links">
	<li><a href="#">リンクA</a></li>
	<li><a href="#">リンクB</a></li>
	<li><a href="#">リンクC</a></li>
</ul>

ここでは、ul要素とli要素を使って作る「箇条書きリスト」の中に、a要素を使ってテキストリンクが記述されています。ul要素には、後からCSSを適用するためにclass名を割り振ってあります。上記のHTMLに対して、下記のCSSを適用します。

モバイル環境でのみテキストリンクをボタン型に装飾するCSSソース

まずは、「横幅900px以下の場合にだけテキストリンクをボタン型に装飾する」場合のCSSソースをご紹介致します。

CSSソース(1)

@media screen and (max-width: 900px) {

	/* ▼リスト先頭の記号を消す */
	ul.text-button-links {
		list-style-type: none;
		margin: 0px;
		padding: 0px;
	}

	/* ▼リンクをボタン型に装飾する */
	ul.text-button-links a {
		color: white;           /* 文字色を白色に */
		background-color: blue; /* 背景色を青色に */
		border-radius: 12px;    /* 角丸の半径を12pxに */
		text-decoration: none;  /* リンクの下線を消す */
		display: inline-block;  /* インラインブロック化 */
		margin: 2px;            /* 外側の余白 */
		padding: 0.25em 1em;    /* 内側の余白 */
	}

	/* ▼マウスが載った際の追加装飾 */
	ul.text-button-links a:hover {
		text-decoration: underline; /* リンクに下線を付ける */
		background-color: green;    /* 背景色を緑色に */
	}

}

メディアクエリを使って横幅が900px以下の場合を判定し、リンク(a要素)をボタン型に見せる装飾を適用するだけです。とても簡単ですね。

モバイルファーストで、描画領域幅に応じてテキストリンクとボタンリンクを切り替えるCSSソース

次に、モバイルファーストでCSSソースを記述している場合の書き方をご紹介致します。ここでは、「初期状態ではテキストリンクをボタン型に装飾しておき、描画領域の横幅が901px以上であれば通常のテキストリンクに戻す」という装飾を施しています。最初(モバイル向け装飾)で手間の掛かる装飾を指定しているため、「あとからPC向けにそれらの装飾を打ち消す装飾を施す」必要があってソースが長くなってしまっていますが。

CSSソース(2)

/* ▼リスト先頭の記号を消す */
ul.text-button-links {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

/* ▼リンクをボタン型に装飾する */
ul.text-button-links a {
    color: white;           /* 文字色を白色に */
    background-color: blue; /* 背景色を青色に */
    border-radius: 12px;    /* 角丸の半径を12pxに */
    text-decoration: none;  /* リンクの下線を消す */
    display: inline-block;  /* インラインブロック化 */
    margin: 2px;            /* 外側の余白 */
    padding: 0.25em 1em;    /* 内側の余白 */
}

/* ▼マウスが載った際の追加装飾 */
ul.text-button-links a:hover {
    text-decoration: underline; /* リンクに下線を付ける */
    background-color: green;    /* 背景色を緑色に */
}

@media screen and (min-width: 901px) {
 
    /* ▼リスト先頭の記号を加える */
    ul.text-button-links {
        list-style-type: disc;
        padding: 40px;
    }
 
    /* ▼リンクを元のテキスト表示に戻す */
    ul.text-button-links a {
        color: blue;                   /* 文字色を青色に */
        background-color: transparent; /* 背景色を透明に */
        border-radius: 0px;            /* 角丸指定を消す */
        text-decoration: underline;    /* 下線を加える */
        display: inline;               /* インライン化 */
        margin: 0px;     /* 外側の余白をなくす */
        padding: 0px;    /* 内側の余白をなくす */
    }
 
}

上記のCSSソースは、どちらの場合も表示結果は同じです。

というわけで、テキストリンクをモバイル環境でのみ「押しやすいボタン」に切り替えるリンクの作成方法でした。タップしやすいリンクにして、閲覧者が不便に思わないナビゲーションを用意しましょう。

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---