明日もデザインで食べていこう！［09］CSSのみでシンプルなスライドを実現・新セレクタtargetを使う
── 秋葉秀樹 ──

■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/
>

ではでは、今年もどうぞよろしくお願いします！！

【あきば・ひでき】hidetaro7@gmail.com
< http://www.akibahideki.com/blog/
>

テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。
HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign...多種スキルを持つ。Web標準技術だけに執着せず、全てのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。