あけましておめでとうございます。フリーのマークアップエンジニア草野です。
ちょっと間が空いてしまいましたが、第三回のテーマは「矢印付きのメニューをつくろう」です。
今回はPCだけでなくスマートフォン等のタッチデバイスでも分かりやすく使いやすいUIを考える際に活用できるアイデアを盛り込んでいますので、ご自身のサイトなどに活用してみてください。

１．メニューのベースを作る

［サンプル１］

<ul class="menu">
	<li><a href="#">メニュー１</a></li>
	<li><a href="#">メニュー２</a></li>
	<li><a href="#">メニュー３</a></li>
</ul>

/*リセット*/
ul,li{
	margin:0;
	padding:0;
	list-style:none;
}
/*メニュー用スタイル*/
.menu{
	border:#ccc 1px solid;
}
.menu li+li{
	border-top: #ccc 1px solid;
}
.menu a{
	display:block; /*ブロック化*/
	padding: 15px; /*a要素の領域を拡大*/
	color:#666;
	text-decoration:none;
}
.menu a:hover{
	background:#e7e7e7; /*ロールオーバー時の設定*/
}

ul要素でメニューの構造を作り、a要素をブロック化してpaddingを設定することで、枠内全体をクリック可能な状態にします。こうしておくことでリンク可能な領域が広くなりますので、マウスでも指でもどちらでもストレス無く操作できるようになります。
メニューやボタンのような枠囲みされたリンク領域を作る場合には、必ずa要素のブロック化をしておくようにしましょう。

今回デザイン的に下線は付けたくないので削除し、代わりに:hoverで背景全体の色が変わるようにしておくことで「リンク領域である」ことを視覚的に示しています。
ただし、スマートフォン等のタッチデバイスではそもそも「ロールオーバー」という機能そのものが存在しませんので、このままでは「タップしてみて初めてリンクであることが確認できる」という状態になってしまっています。

２．リンクしていることを明示するためメニューに矢印を追加する

［サンプル2］

.menu a:after{
	/*①*/
	content:"";
	display:block;
	
	/*②*/
	width:8px;
	height:8px;
	border-top: #666 2px solid;
	border-right: #666 2px solid;
	
	/*③*/
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

タッチデバイス向けのUI対策でよく取られているのが、「矢印等のデザインでリンクしていることを明示する」という手法です。
矢印の形状は様々ですが、今回は直角を使った右矢印を追加してみたいと思います。

①:after擬似要素で空のブロックコンテンツを生成

矢印画像アイコンを背景画像に貼っても良いのですが、その場合いわゆるRetina問題（※１）が生じてしまいます。スマートフォン環境も考慮した場合、できるだけ画像に頼らない手法を検討することをおすすめします。そこで、:after擬似要素で矢印を描画するための空のコンテンツを生成し、CSSで直角矢印を作ることにします。

②borderで直角を描画

生成したブロックにborderで直角を描画します。今回は上と右ですが、隣り合う２辺であれば基本的にどこでも構いません。
width/heightが矢印の大きさになりますので、デザインに合わせて適宜設定しましょう。

③時計回りに45度回転させる

CSS3のtransformプロパティを使って時計回りに45度回転させます。回転させる方向と角度を調整することで、上下左右どちら向きの矢印でも表現することができます。
なおtransformプロパティはブラウザによって対応状況が異なるため、iOSやAndroid、Safari向けに -webkit-プレフィックス、IE9向けに-ms-プレフィックスをつける必要があります。

３．矢印をメニューの右端に配置する

［サンプル3］

.menu a{
	/*省略*/
	
	/*④*/
	position:relative;
}
.menu a:after{
	/*省略*/
	
	/*⑤*/
	position:absolute;
	right: 15px;
	
	/*⑥*/
	top:0;
	bottom:0;
	margin:auto;
}

最後に、作成した矢印をメニューの右端に配置します。今回は親要素を基準として任意の場所に配置したいので、positionを使った絶対配置を使います。

④親要素を絶対配置のための「基準ボックス」とする

position:absolute;で要素を絶対配置するためには、「基準ボックス」が必要です。これを基準として絶対配置の座標を決めるからです。もし基準ボックスを設定しないままposition:absoluteを使用した場合、自動的にbody要素（＝ブラウザ枠全体）が基準ボックスとなりますので、任意の位置に絶対配置することは困難となります。
ある要素を基準ボックスとするためには、position:relativeまたはposition:absoluteが設定されている必要がありますが、通常基準ボックスを設定するだけであればrelativeを使用します。

⑤矢印の左右位置を設定

position:absolute;で配置方法を絶対配置に変更し、rightプロパティでa要素の右端から15pxの位置に矢印を配置します。

⑥矢印の上下位置を設定

上下方向は、メニューが複数行になる等、高さが変わったとしても自動的にa要素の上下中央に配置したいと思います。
ポイントは「topとbottomを両方0に設定し、marginをautoにする」ということです。この方法のメリットは、どんなサイズの要素でも自動的に親要素に対して上下中央に配置することが可能なことです。ちなみに「leftとrightを両方0」にすれば、左右中央揃えの絶対配置も可能です。

いかがでしたか？
絶対配置の上下中央揃え等は、単純ですが知っていると便利なテクニックですので是非活用してみてください。
ではまた次回！

• 
•