[css] pointer-events:none; でリンクを非リンクに変える

author : canamen, Inc.

「pointer-events:none;」はレスポンシブで重宝する可能性が高いです。
「pointer-events:none;」をレスポンシブで使用する方法や考え方はこちらから。合わせてご確認ください!

pointer_events_index
メニューリストを作成して、現在閲覧中のページのaタグをspanタグに変えリンク無効にするか、aタグのままで表示してしまうか、悩みますよね。

「pointer-events:none;」を指定することで、タグのリンクを無効にしてる。

「pointer-events」の導入方法とメリット・デメリット

リンクを非表示にしたい項目の親要素にidを付けcssで装飾を変更する

メリット
・各ページのcssをbodyタグで制御できる。
デメリット
・cssのコードが増えてしまうので、読み込みに時間がかかる可能性がある。
各ページ毎に読み込むcssを分け装飾を変更する

メリット
・各ページの読み込み時間の短縮が可能。
デメリット
・cssを作成していくと共有と各ページで重複するソースが増えてしまう。
・作成に時間がかかります。

ポイント

時間があったり、綺麗なソースにしたい場合のみcssを分けた方がいいと思います。
それ以外は親要素にidを付けて使用しましょう。

ページ数が膨大になる場合、ページロード時間を短くする為に共通のcssと各ページ毎のcssの2種類をlinkさせるサイトが多いです。

「pointer-events」ソースコード例

html

</p>
<div id="list">
<ul>
<li><a class="home" href="/">HOME</a></li>
<li><a class="about" href="./#">ABOUT</a></li>
<li><a class="clients" href="./#">CONTACT</a></li>
</ul>
</div>
<p>

css

#list a.about
{
pointer-events:none;/*リンクを非リンクに変える*/
cursor:default;/*マウスカーソルを矢印のまま変えない*/
text-decoration:none;/*下線を消す*/
color:#000000;/*非リンクの文字色と同じにする*/
}

補足

非リンクになっても、他のリンクと装飾は変わらないので、装飾を変えて一目で非リンクだと分かるようにした方がいいでしょう。

対応ブラウザが少ないので、過信は禁物です。

この記事が気に入ったら
「いいね!」しよう

最新情報をお届けします

このエントリーをはてなブックマークに追加
LINEで送る

鹿児島のホームページ制作、作成は株式会社カナメンへおまかせください。集客、成果がでる、オリジナルデザインのホームページ制作と、SEO対策でビジネスの課題を解決いたします。ホームページのアクセス解析などサポートも充実しています。鹿児島から全国までホームページ制作対応可能です。お気軽にお問い合わせください。

2014年1月
個人事業主「canamen.net(カナメンドットネット)」として開業

2015年9月
Google アナリティクス個人認定資格(GAIQ)取得

2016年11月
株式会社 カナメン として法人化

株式会社 カナメン

〒892-0816
鹿児島市山下町12-12 一二三ビル112

代表取締役 冨永 要

tel : 099-226-1006

mail : info★canamen.co.jp(★を@に)

制作実績
(ホームページ・ポスターなど)

  • twitter
  • facebook
  • google plus
  • flickr
SKILL
  • 企画
  • ディレクション
  • デザイン
  • wordpress
  • JavaScript実装
  • プログラミング
  • 更新作業
  • アクセス解析
  • webマーケティング
  • webコンサルティング
  • ロゴ作成
  • ポスターデザイン
  • 写真撮影
  • イラスト
  • スマホ対応

株式会社 カナメン についてもっと見る

株式会社 カナメン の web サービス

まとめ検索 - koko-search

koko-search

まとめてここから検索。気になることを忘れさせません。まとめ検索 web サービス。【ここサーチ】からすぐに、検索できたりします。

koko-searchをやってみる!
閉じる