【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;
}

関連記事

モバイルサイトを構築するときに役立つフレームワーク5選

スマートフォンやタブレットなどのモバイル端末の普及に合わせて、モバイル端末によるWEBサイトへのアクセスやモバイルアプリケーションの需要が多くなってきていることを感じます。 今回はモバイル端末に最適化されたWEBサイトやアプリケーションを制作するときに役立つフレームワー...続きを読む

2015.02.08HTMLコーディング

ロリポップの簡単インストールで「WordPress」のインストールに失敗した!?

WEBサイトを構築・公開するために必要となるレンタルサーバー。数あるレンタルサーバーの運営サービスで、価格も手ごろなロリポップを利用する方も多いと思います。ロリポップではWordPressを簡単にインストールすることができますが、簡単インストールの途中で「インストールできませんで...続きを読む

2017.09.17WordPressレンタルサーバロリポップ

スマートフォンで動画を作成する動画編集アプリ

最近はスマートフォンで写真や動画を撮影してSNSや動画投稿サイトなどへ手軽に公開できるようになりました。 そこで今回はスマートフォンで動画を編集することができるアプリをまとめてみました。 Video Collage フレームに写真や動画を当てはめてコラージュのよ...続きを読む

2015.03.05動画制作

【フォト】港町焼津の新年の漁船・大漁旗・富士山

静岡県焼津市では新年三ヶ日になると、漁船に大漁旗が掲げられた姿をみることができます。色とりどりの大漁旗が晴天の青空にとても映えます。天気の良い日は富士山と一緒にみることもできます。 フォトギャラリー ※写真をクリックすると拡大表示します。[gallery link="fi...続きを読む

2017.01.03フォトギャラリー

【動画】スマートフォンを使った面白いトリック写真の撮影方法

こんにちは。最近はyoutubeで世界中の様々な方が撮影方法を動画で紹介しています。自分もカメラの勉強にとよく見ています。今回は、スマートフォンとちょっとしたアイディアを加えることで撮影できるトリック写真の撮影方法が紹介されていましたので紹介いたします。動画の解説は英語ですが、映...続きを読む

2018.02.15撮影スキル