今年1回目の記事です、どうぞよろしくお願いします。
CSS3で策定されている疑似クラスと呼ばれるセレクタ「target」のキホンを書いてみようと思います。
簡単に言うならば、:targetは、「マウスがクリックされたとき」をキッカケにして、他の要素のスタイルをコントロール出来る、というもの。今までは、:hover（マウスが乗った時）や、:active（マウスボタンが押された、押されっぱなしの状態の間）など、マウスの動きによってCSSだけで状態、スタイルを変えていく事ができました。
まずはシンプルなサンプルから。
< http://akibahideki.com/digicre/case_09/index.html
>
今までだと、「マウスが乗った時に子要素をdisplay: block;にする」というのは、:hover状態を作れば簡単にできました。この例のような「クリックされた時」をキッカケにそう言った事を行うにはJavaScriptが必要でしたが、今回のサンプルではJavaScriptを使わずにこういった事を可能にします。
CSS3で策定されている疑似クラスと呼ばれるセレクタ「target」のキホンを書いてみようと思います。
簡単に言うならば、:targetは、「マウスがクリックされたとき」をキッカケにして、他の要素のスタイルをコントロール出来る、というもの。今までは、:hover（マウスが乗った時）や、:active（マウスボタンが押された、押されっぱなしの状態の間）など、マウスの動きによってCSSだけで状態、スタイルを変えていく事ができました。
まずはシンプルなサンプルから。
< http://akibahideki.com/digicre/case_09/index.html
>
今までだと、「マウスが乗った時に子要素をdisplay: block;にする」というのは、:hover状態を作れば簡単にできました。この例のような「クリックされた時」をキッカケにそう言った事を行うにはJavaScriptが必要でしたが、今回のサンプルではJavaScriptを使わずにこういった事を可能にします。
■HTMLソース
<p><a href="#content">押してください。</a></p>
<div id="content">内容が表示されます。</div>
■CSSソース
div#content {
display: none;
}
div#content:target {
display: block;
}
まず、aタグ内にページ内リンクを作ります。#（ハッシュ）つきのid名を呼び出し、pタグからdivタグのスタイルをコントロールするのです。
呼び出されたid名「#content」（div#content）のtarget時のCSSの指定をします。もともとdiv#contentはdisplay:noneされていて見えないのですが、呼び出す側のaタグに呼び出される側のid名をハッシュ付きで、
div#content:targetとし、スタイルを記述します。
これによって、aタグがクリックされた事をキッカケに:targetが書かれている通りのスタイルに変更されます。
例えば、簡単なスライドのようなものならCSSのみで実現できます。
次のサンプルを見てみましょう。
< http://akibahideki.com/digicre/case_09/example.html
>
このサンプルでは1番目から5番目の「呼び出し」があり、その下にそれに対応する内容が表示されます。
順を追って解説していきたいと思います。
<div>
<ul class="nav">
<li><a href="#id1">1番目</a></li>
<li><a href="#id2">2番目</a></li>
<li><a href="#id3">3番目</a></li>
<li><a href="#id4">4番目</a></li>
<li><a href="#id5">5番目</a></li>
</ul>
<ul class="content">
<li id="id1">1番目の内容です。</li>
<li id="id2">2番目の内容です。</li>
<li id="id3">3番目の内容です。</li>
<li id="id4">4番目の内容です。</li>
<li id="id5">5番目の内容です。</li>
</ul>
</div>
上のul.navがいわゆる「呼び出し元」で、下のul.contentが「呼ばれる側」とでも言いましょうか。1番目のボタンには、ul.content内の「li#id1」が文字通りのターゲットになります。そして:targetと指定されたスタイルの内容に「一時的」に変更されます。
ここで「一時的」と書きましたが、:hoverの場合、マウスが外れると元の状態に戻りますよね？ targetも似てます。他のtargetが指定されたら、今までのターゲットのスタイルは元に戻ります。
「1番目」のボタンを押した次に「2番目」を押してください。「1番目」は、元の状態、透明度がゼロに戻って見えなくなります。「ターゲットが外れたら元にもどる」を覚えておきましょう。
このサンプルでは、「ふわっと」押されたときに透明度が浮かび上がってくるようにtransitionを指定していますが、割愛してシンプルに書くと今回で言えば重要な事は以下のこれだけ、と言って良いでしょう。
ul.content li {
opacity: 0;
}
#id1:target, #id2:target, #id3:target, #id4:target, #id5:target {
opacity: 1;
}
初期設定でopacityをゼロにしておけば、要素は存在するけど透明な状態なので見えない状態となります。ターゲット状態は共通なので、複数同じ指定をしてopacityを1にしています。
今回は最も単純なスライドのようなものでしたが、実は、ボタン一つでスクロールをして写真を切り替えるようなビジュアルも実現可能です。
Web Designing 2011年2月号には、そちらのサンプル記事を寄稿していますので、興味がある方は是非ご覧下さい。
< http://www.amazon.co.jp/exec/obidos/ASIN/B004GY3UQW/dgcrcom-22/
>
ではでは、今年もどうぞよろしくお願いします！！
【あきば・ひでき】[email protected]
< http://www.akibahideki.com/blog/
>
テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。
HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign...多種スキルを持つ。Web標準技術だけに執着せず、全てのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。