副題
Bootstrap3でCSSの追加無しにプレースホルダーリンク上のカーソルをpointerにする
結論
role="button"属性を追加する。
bootstrap3.3.7.css
[role="button"] {
cursor: pointer;
}
概要
プレースホルダーリンクは、通常のリンクと異なり、マススオーバー時のカーソルがtextの「I」のようなものになってしまう。
デフォルトの指矢印「」のようなものにしたい。
なりゆき
- SPA風ページ作りたい
- ページ遷移はJSが担当する
- テキストリンクを作りたい
- ただしリンク移動はせず、JSでページ書き換える
- なので、移動先は指定せず、プレースホルダーリンクに
onClickを設定する - カーソルはリンクだとわかりやすいようにがいい
- プレースホルダーリンクではカーソルがにならない
-
href="javascript:void(0)"はかっこ悪いからキライ -
return false;もちょっと…そもそもダミーのリンクURLも設定するの面倒 - CSSで設定したい
- CSS書きたくない
- Bootstrapから探す
- あった
あくまでローカルなもののズボラ策として。
検証環境
- Bootstrap3.3.7
- Firefox 50
コード
<a href="test">普通のリンク</a> <br>
<a>プレースホルダリンク</a> <br>
<a href="javascript:void(0)">JavaScriptリンク</a> <br>
<a role="button">ロール付きプレースホルダリンク</a>
普通のリンク
プレースホルダリンク
JavaScriptリンク
ロール付きプレースホルダリンク
QiitaもBootstrapな同じスタイルがあるはずですけどプレビューでは出力のrole属性が削除されている。
role属性って？
Web Accessibility Initiativeが策定したWAI-ARIAという、アクセシビリティを高めるための仕様の一部。
障害者のための補助属性などにもなるもよう。
まだまだ普及はしていないだろうが、表示上のスタイルのためだけに乱用することはよくないでしょう。
が、これが2014年3月20日勧告で、Bootstrap3自体は2013年からリリースしている。(初リリース時点ではroleは含まれていないが)
role属性の設定もbuttonしか書かれていないので、BootstrapはWAI-ARIAを意識したrole属性じゃないんじゃないかなーと思います。
ただそのまま、押せる(button)ことを表したいときに使うスタイル、程度かもしれません。