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

関連記事

【WP】開発者向け便利ツールプラグイン

WordPressで開発を行う場合、デバッグやテストなどをサポートしてくれる便利なプラグインをご紹介します。 Debug Bar 「Debug Bar」プラグインはインストールするとサーバの性能(PHP、SQLのバージョン、使用メモリ-)、クエリの応答速度などを確認す...続きを読む

2015.02.27WordPress

モバイル時代のモバイルフレンドリーによるSEO対策

日本国内のスマートフォン保有率は50%にのぼり、20代になると80%にもなります。消費者のパソコンからスマートフォンへのインターネット活用が大きく変わり、ウェブサイトへのアクセス方法もパソコンからスマートフォンへ移りつつあります。 まだ業種によって差はありますが飲食店、美容...続きを読む

2015.03.16SEO

【WP】アップロードするメディアフォルダをカスタマイズする

wordpressでは画像などのメディアファイルを投稿すると初期設定では「投稿年」「投稿月」のフォルダが作られ、そのフォルダ内にデータがアップロードされます。 コーポレートサイトとして運用しカスタム投稿や固定ページを多く使用するような場合はカスタム投稿やページ毎に分けて...続きを読む

2015.03.13WordPress

【リリース】新サービス「プロモーションビデオ制作」

サービス内容に新しく「プロモーションビデオ制作」が加わりました。インターネット環境の高速化やスマートフォンの普及により多くの方が動画コンテンツを身近に楽しむようになりました。そして、動画コンテンツは、新しいマーケティングツールとして注目されています。 店舗のオープンやイベン...続きを読む

2020.02.16

静岡洋館巡り「旧エンバーソン住宅」フォトギャラリー

静岡市の市指定有形文化財「旧エンバーソン住宅」を見てきました。明治時代の西洋建築の装飾などその雰囲気にふれることができました。 概要(引用) 旧エンバーソン住宅は、カナダからキリスト教伝道のため日本に派遣されたロバートエンバーソン師の自邸として、明治37年(190...続きを読む

2015.03.18フォトギャラリー