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

author :

「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で送る

株式会社 カナメン( canamen, Inc. )は鹿児島で、ホームページ制作を行っています。デザインからコーディング(プログラミング)、アクセス解析まで幅広いスキルでお客様をサポートしています。

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

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

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

株式会社 カナメン

〒892-0815
鹿児島市易居町1-2 ソーホーかごしま 18号室

代表取締役 冨永 要

tel : 090-6986-9718

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

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

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

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

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

まとめ検索 - koko-search

koko-search

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

koko-searchをやってみる!
memosns -メモエスエヌエス-

memosns -メモエスエヌエス-

メモを残すウェブサービス。ウェブ上に自分だけのメモを、さらに、ユーザー同士でメモでコミュニケーションも。メモ・ソーシャル・ウェブサービス

memosns をやってみる!
閉じる