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

関連記事

ブログやWEBサイトのトラフィック(アクセス)を増やす方法

ブログやWEBサイトの集客・収益効果を高めるために、トラフィック(アクセス)を増やすことは重要な課題といえます。 一般的にトラフィック(アクセス)を増やすためには有料広告が確実に効果がある方法ですが、立ち上げたばかりのサイトや予算をかけることが出来ない場合は、お金をかけ...続きを読む

2015.02.14SEO

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

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

2020.02.16

株式会社寺坂商店との業務提携のお知らせ

拝啓 時下ますますご清栄のこととお喜び申し上げます。 平素は格別のご高配を賜り、厚く御礼申し上げます。 さて、このたび当社は、株式会社寺坂商店(本社:静岡県藤枝市藤枝5-17-3、代表取締役:寺坂 祐紀)との間で、業務提携を行うことを決議いたしましたので、お知らせい...続きを読む

2022.07.22

【無料】商用利用OKシームレステクスチャ「木目パネル(ヒノキ風)」素材

自然の木目を表現したシームレスの無料で使えるテクスチャです。ヒノキの木目パネル、壁、フローリングのようなイメージに仕上げています。継ぎ目のないシームレス加工をしているテクスチャです。テクスチャマッピングやタイル敷の背景素材などにお使いいただけます。商用利用OKのフリー素材...続きを読む

2018.09.14シームレステクスチャ

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

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

2017.01.03フォトギャラリー