【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】ユーザーの一覧、ユーザー別に最新記事を表示する方法

キュレーションサイトなど最近では複数のライターによって運営される情報サイトをよく見ることができます。そのようなサイトにおいて、ユーザーの一覧を表示する、さらには1ページ内にユーザー事に最新記事を表示するといったページがほしいときがあります。 今回は、WordPressでユー...続きを読む

2016.07.14WordPress

Micro hair saron様WEBサイトのデザイン提案

Micro hair saron様WEBサイトのデザイン提案。店内のインテリアやお店の雰囲気、「シンプル」でありながら心地よさを感じられるようなデザインを心掛けました。お店のコンセプトである「髪だけでなく 時間と空間をデザインして 五感で満足していただくこと。」木の温もりと、...続きを読む

2019.04.24WEBデザイン美容室

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

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

2015.03.09HTMLコーディング

【WP】ワードプレスで会員登録機能を実装するプラグイン「WP-Members」

今回紹介するプラグイン「WP-Members」を使用すると、WordPressでユーザーの登録フォームを公開したり、会員情報として住所やフリガナなど項目をカスタマイズすることや、登録しているユーザーのみに記事を限定に公開する機能を構築することができます。 WP-Member...続きを読む

2016.07.01WordPress

【CSS】互い違いに行の色を変えるテーブルデザイン

CSS3では、nth-childの疑似クラスが定義されて、CSSだけで、テーブル<table>デザインをよりわかりやすく設計することができるようになりました。 nth-child(n)では、n番目の子となる要素にスタイルを適用することができるため、&...続きを読む

2015.02.08HTMLコーディング