Blog

CSS3の:targetセレクタを使って、アンカーリンクだけでpJaxのような演出

最近は、ページ遷移せずにページを切り替えるpJaxを使ったサイトを見かける機会が少しずつ増えてきました。

ただ、pJaxを実装するためには、JavaScriptを使う必要があります。

JavaScriptを使わずに、CSSでそれっぽく見せる方法はないかと考えてみたところ、
CSS3のセレクタである、:targetが使えるんじゃないかと思いついて、やってみることにしました。

↓作ってみたもの
DEMO

方法

CSS3では:targetにより、アンカーリンク(ページ内でのリンク)の対象となる要素に対して、
スタイルを適用することができます。

今回の方法では、対象となる要素をすべてposition:fixedで画面いっぱいに表示し、
リンクされていないときは、非表示にするという方法を使いました。

blog1

blog2

 

 

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ