【CSS】リンクフォーカスを利用したナビゲーションのボタン操作

css-link-focus-navigation

CSSの{a:hover}を使うとマウスオーバーの操作によって背景の色や画像を変えることができます。ナビゲーションメニューなどによく使われる手法ですが今回は{a:focus}に着目してみました。

{a:focus}はリンクにフォーカスされているとき。クリックされた時やTabキーなどでフォーカスが合っている時を指します。

{a:focus}を使うと、ランディングページやシングルページを制作しているときに、ナビゲーションを固定してページのスクロールに合わせてナビゲーションを追ってくる仕組みを構築するとき、クリックされた状態を保ったナビゲーションを作ることができそうです。

css-link-focus-navigation

CSS

使い方は{a:hover}と同じです。リンクにフォーカスされたときに背景色が変わるようにしてみました。

.navigation ul {
	margin: 0;
	padding: 0;
}
.navigation li {
	float: left;
	list-style: none;
}
.navigation a {
	color: #fff;
	text-decoration: none;
	display: inline-block;
	width: 100px;
	height: 60px;
	text-align: center;
	line-height: 61px;
	font-size: 13px;
}
.navigation a:hover,
.navigation a:focus {
	outline: 0;  
	background-color: #666;
}

関連記事

【JavaScript】横にスライドするレスポンシブメニューを実装するライブラリ『mmenu』

スマートフォンやタブレットのアプリなどでボタンを押すとメニューが横から展開するインターフェイスをみることがあります。今回はそのような横にスライドするメニューを実装することができるJavaScriptライブラリ『mmenu』を紹介します。 『mmenu』 ダウン...続きを読む

2015.03.04HTMLコーディング

Google Chart API でQRコードを自動生成する方法

Google Chart APIはGoogleが提供しているグラフなどのイメージを作成してくれるAPIサービスです。URLに必要な値を与えるだけで、グラフなどのイメージを返してくれます。 主にグラフなどを作成することができるのですが、その機能のなかにQRコードを作成して...続きを読む

2015.03.09HTMLコーディング

【デザイン】アイディアに溢れたウェディングポートレート

ユーモア、クリエイティブ、アートさまざまなアイディアに彩られたウェディングポートレートをまとめてみました。 matt shumate Photographer 主にウェディングなどの写真を撮影されているフォトグラファーの「matt shumate」氏のポートレートより...続きを読む

2015.02.15インスピレーション

HTML文章の歴史を振り返る

WEBサイトの制作において基礎となるのは、HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)略称をHTML(エイチティーエムエル)と呼ばれる、拡張子が.htmlや.htmなどであらわされる文章ファイルです。 WEBサイトの制作に...続きを読む

2015.01.14HTMLコーディング

【ソーシャルメディア】2004から2013年までのソーシャルメディアの成長

検索エンジンジャーナルによる2004から2013年までのソーシャルメディアの成長をあらわした図解です。( Search Engine Journal ) The Growth of Social Media v2.0 [INFOGRAPHIC] 図解をみてみると、...続きを読む

2015.02.17WEB