【CSS】スキップリンクのclipの使い方で戸惑ったのでメモ

WordPressのデフォルトテーマである「TwentyFourteen」のスタイルシールを読んでいるときに、clip: rect(1px, 1px, 1px, 1px);という見たことのないプロパティを見つけたので、clipの使い方について説明します。

一般的なclipの使い方

画像のトリミング

そもそも clip が使われている場面をあまり見ませんが、画像をトリミングする際に使われることがあるそうです。
CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

clip: rect(10px, 20px, 20px, 10px);
とすることで左,上:10px,10pxから100pxの画像をトリミングできます。
clip・・・・・ボックスを切り抜き表示(クリッピング)する

音声ブラウザ用のテキスト非表示

clip: rect(1px, 1px, 1px, 1px);で4つ指定します。
上の場合は面積0で切り取り、何も表示されなくなります。
1pxの正方形で切り取られると勘違いしやすいです。

これにより、リンクもテキストも表示はされませんが、音声ブラウザは読み上げることができます。

clip: auto;にすると、こんな感じで現れます。
スキップリンク

テキストリーダーの使用例

TwentyFourteenではこのように記述されています。

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute;
}

透明化して文字は消えてもリンクは残りますが、これなら完全に消えますね。

HTMLはheader.php内に書かれています。
日本語での使用する場合は php _e() により「Search」は「検索」、「Skip to content」は「コンテンツへ移動」になります。

<a href="#search-container" class="screen-reader-text"><?php _e( 'Search', 'twentyfourteen' ); ?></a>

<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>

スキップリンクについて。
スキップリンクの実装:CSS 3分コーディング

さいごに

TwentyFourteenはデフォルトテーマということもあり、アクセシビリティに配慮されていますね。
他のテーマがどうなっているかは知らないですが、実装していてマイナスな評価になることはないはずなので、TwentyFourteenのテーマを参考に、実装してみてはいかがでしょうか。

WordPressの自作テーマにおいては優先順位の低い存在だと思いますが、多くの人に配布するなら実装していて欲しい機能ですね。

スポンサーリンク
RESAD
RESAD

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
RESAD