スキップリンクとは?
状態:-
閲覧数:5,683
投稿日:2010-04-18
更新日:2015-12-26
アクセシビリティ用語
・ページ内先頭部分などに配置されるページ内へのリンクのこと
「スキップナビゲーション」や「ナビゲーションスキップ」といった呼び方もある。
■様々なコーディング手法
スキップリンクのコーディングとしては、概ね、次のようなパターンに分かれる。
・a 要素でマークアップし、隠さず表示させておく
・a 要素でマークアップし、CSSで非表示にする
・a 要素でマークアップし、CSSで画面外に配置する
・背景と同色or透明のgifなどのalt属性にリンク先の説明を記述し、画像をa要素でマークアップする
・HTML 構造上、メインコンテンツをサイト内リンクより上部に配置する
他にも色々あるらしいが、よく見かける手法は「a要素でマークアップし、CSSで画面外に配置する」とのこと。HTMLの構造がシンプルにできる点、CSSで簡単に実装できる点が優れているらしい。
■コーディング例
単純な方法だが、スキップリンク用のclaassを作成し、positionプロパティで画面のはるか左に飛ばしている
<pre class="code"><code>
.skip {
position: absolute;
left: -9000px;
margin: 0;
padding: 0;
}
</code></pre>
▼スキップリンクの実装:CSS 3分コーディング
http://blog.m-school.biz/article/134511604.html
・ページ内先頭部分などに配置されるページ内へのリンクのこと
「スキップナビゲーション」や「ナビゲーションスキップ」といった呼び方もある。
■様々なコーディング手法
スキップリンクのコーディングとしては、概ね、次のようなパターンに分かれる。
・a 要素でマークアップし、隠さず表示させておく
・a 要素でマークアップし、CSSで非表示にする
・a 要素でマークアップし、CSSで画面外に配置する
・背景と同色or透明のgifなどのalt属性にリンク先の説明を記述し、画像をa要素でマークアップする
・HTML 構造上、メインコンテンツをサイト内リンクより上部に配置する
他にも色々あるらしいが、よく見かける手法は「a要素でマークアップし、CSSで画面外に配置する」とのこと。HTMLの構造がシンプルにできる点、CSSで簡単に実装できる点が優れているらしい。
■コーディング例
単純な方法だが、スキップリンク用のclaassを作成し、positionプロパティで画面のはるか左に飛ばしている
<pre class="code"><code>
.skip {
position: absolute;
left: -9000px;
margin: 0;
padding: 0;
}
</code></pre>
▼スキップリンクの実装:CSS 3分コーディング
http://blog.m-school.biz/article/134511604.html
Twitter検索結果。「スキップリンク」に関する最新ツイート
バイオレンス、広告で出てきて流石にリンク飛びたかったのに広告をスキップしかなくて泣いた
俺に女王蜂を見せろ!!!!!!! 2023/02/04 23:49
Quest2で執拗にFBアカウントとのリンクを迫られるけどMeta社がぜんぜん信用できなくてスキップしまくり 2023/02/04 21:02
逆にリンクの状態を読み切ったSC軽井沢のスキップ、栁澤李空が優秀ってことか 2023/02/04 12:05
お題ありがとうございます。
大好きな具が入っている弁当箱は開封の儀もワクワクするね😁
いつも以上に斜めになっていたり、誤字したり、万年筆もスキップしたりと現在の精神状態とリンクしているな。
#飯テロ書写 https://t.co/nFJMZo2eHo 2023/02/01 23:58

私の紹介リンクを使って、待ち行列をスキップし、アクセスを取得できます。
https://t.co/utlO0SdvlL
7/24 2023/01/29 20:36
アイコンに雪女来たということはそろそろ実装されるかなぁ魔妖の新規カード
垂氷はリンク3ってだけで波旬1枚から魔妖EXがすべて繋がるし、魔妖不知火語は通れば実質ターンスキップ級の効果だからぜひとも入れたいところだなぁ https://t.co/lFUcJXk5Ln 2023/01/27 23:27


