《 15:33 公開/更新》
下線が付加されただけのリンクは、指でタップする操作が前提のモバイル環境では使いにくい(押しにくい)ことがあります。モバイル環境での表示時にのみ、テキストリンクを「ボタン型」に装飾してみてはいかがでしょうか。
たくさんのテキストリンクを並べる際、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を適用します。
まずは、「横幅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ソースを記述している場合の書き方をご紹介致します。ここでは、「初期状態ではテキストリンクをボタン型に装飾しておき、描画領域の横幅が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ソースは、どちらの場合も表示結果は同じです。
というわけで、テキストリンクをモバイル環境でのみ「押しやすいボタン」に切り替えるリンクの作成方法でした。タップしやすいリンクにして、閲覧者が不便に思わないナビゲーションを用意しましょう。
()
▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)
