to topto bottom

モバイルファースト時代のマルチデバイス対応を確実・簡単に

Windowsタブレットでリンク下線の太さが違ってしまうことがある

Windowsタブレットでリンク下線の太さが違ってしまうことがあるWindowsタブレットでリンク下線の太さが違ってしまうことがある
こんにちは。x-fitチーム・エバンジェリストの渡辺です。
 
Windowsタブレットの機種もだいぶ増えてきましたね。Windows8では、もうすぐ100機種に迫る勢いのようです。
今回は、WindowsタブレットでのWeb閲覧時に、リンクの下線の太さが統一されない現象が確認できたのでご紹介します。
 

現象

以下のようなHTMLコードで確認してみます。
 
<html>
<head>
	<title>link style</title>
</head>
<body>
	<dl>
		<ul><a href="#">リンク1</a></ul>
		<ul><a href="#">リンク2</a></ul>
		<ul><a href="#">リンク3</a></ul>
		<ul><a href="#">リンク4</a></ul>
		<ul><a href="#">リンク5</a></ul>
		<ul><a href="#">リンク6</a></ul>
		<ul><a href="#">リンク7</a></ul>
		<ul><a href="#">リンク8</a></ul>
		<ul><a href="#">リンク9</a></ul>
		<ul><a href="#">リンク10</a></ul>
		<ul><a href="#">リンク11</a></ul>
		<ul><a href="#">リンク12</a></ul>
	</dl>
</body>
</html>
 
下記のような状態です。大きめの表示では、下線の太さが変わり、小さい表示では、下線そのものがなくなってしまうことがあります。
 
1枚目はviewoirt指定なしでピンチインして大きく表示したもの、2枚目はviewportに1800pxを指定し、小さく表示したもの
 
きちんと発生条件を特定できてはいませんが、
  • viewportをdevice-width以外の値に設定している
  • viewportをdevice-width、またはまったく設定していない場合はコンテンツをピンチインして拡大する
と発生することがあるようです。一つ一つのリンクについて、どのような状態だと発生するのか、というところまでは確認できませんでした。
 
この現象が発生すると、リンクによって下線の太さが変わる(あるいはなくなる)ため、コンテンツのリンクに何らかの違いや優劣があるような印象を与えてしまう可能性があります。デザインを重視するサイトでは問題となるかもしれません。
 

回避方法

 
リンクの下線は、ブラウザのデフォルトスタイルによるもので、text-decorationプロパティが利用されています。
この現象を回避するには、aタグに対するtext-decorationプロパティを無効にし、border-bottomプロパティを使って下線を指定します。
 
	a{
		text-decoration:none;
		border-bottom :1px solid;
	}
 
回避するためのスタイルを適用すると以下のような表示となりました。
 
下線の太さが揃い、小さめの表示でも下線がすべて表示されている。
 
細かいところではありますが、Webサイトの表示上、気になる場合は、対応しておくとよいでしょう。
 
このエントリーをはてなブックマークに追加