[CSS]「:target疑似クラス」をつかった実用的なスタイルシートのテクニック集
Post on:2010年12月24日
sponsors
「:target疑似クラス」をつかって、タブコンテンツ、画像ギャラリー、画像拡大、アコーディオンなど実用的なコンテンツを実装するチュートリアルを紹介します。
キャプチャはW3Cの「The target pseudo-class :target」
[ad#ad-2]
「:target疑似クラス」はCSS3で、アンカーリンクがアクティブな状態にスタイルを適用するものです。
IE6～8では「:target疑似クラス」は動作しないため、代替を用意したり、スクリプト「Selectivizr」を利用するなどなんらかの対応が必要です。
- 「:target疑似クラス」をつかって、タブコンテンツを実装
- 「:target疑似クラス」をつかって、画像ギャラリーを実装
- 「:target疑似クラス」をつかって、画像の拡大表示を実装
- 「:target疑似クラス」をつかって、画像のズームイン・アウトを実装
- 「:target疑似クラス」をつかって、アコーディオンを実装
- 「:target疑似クラス」をつかって、特定の箇所を明示
「:target疑似クラス」をつかって、タブコンテンツを実装
[ad#ad-2]
「:target疑似クラス」をつかって、タブコンテンツを実装するチュートリアルです。
各タブをクリックすると、それに対応したパネルが表示されます。
デモは7つあり、それぞれグレードで評価されています。キャプチャは「Example Six」で、グレードは「A」です。「Example Seven」ではIE7+にも対応しています。
HTML(Example Six)
<div class="w3c"> <div id="tab16"> <a href="#tab16">Tab 16</a> <div>One might well argue, that...</div> </div> <div id="tab17"> <a href="#tab17">Tab 17</a> <div>... 30 lines of CSS is rather a lot, and...</div> </div> <div id="tab18"> <a href="#tab18">Tab 18</a> <div>... that 2 should have been enough, but...</div> </div> </div>
CSS(Eample Six
.w3c { min-height: 250px; position: relative; width: 100%; }
.w3c > div { display: inline; }
.w3c > div > a { margin-left: -1px; position: relative; left: 1px; text-decoration: none; color: black; background: white; display: block; float: left; padding: 5px 10px; border: 1px solid #ccc; border-bottom: 1px solid white; }
.w3c > div:not(:target) > a { border-bottom: 0; background: -moz-linear-gradient(top, white, #eee); }
.w3c > div:target > a { background: white; }
.w3c > div > div { background: white; z-index: -2; left: 0; top: 30px; bottom: 0; right: 0; padding: 20px; border: 1px solid #ccc; }
.w3c > div:not(:target) > div { position: absolute }
.w3c > div:target > div { position: absolute; z-index: -1; }
「:target疑似クラス」をつかって、画像ギャラリーを実装
Making an image gallery with :target
デモページ
「:target疑似クラス」をつかって、画像ギャラリーを実装するチュートリアルです。
各テキストリンクをクリックすると、画像が変更されます。
HTML
<ol> <li id="one"> <p><a href="#one">One</a></p> <img src="http://www.css3.info/wp-content/uploads/2008/02/one.jpg"> </li> <li id="two"> <p><a href="#two">Two</a></p> <img src="http://www.css3.info/wp-content/uploads/2008/02/two.jpg"> </li> <li id="tre"> <p><a href="#tre">Tre</a></p> <img src="http://www.css3.info/wp-content/uploads/2008/02/tre.jpg"> </li> </ol>
CSS
img {
background-color: #fff;
position: absolute;
left: 10px;
top: 10px;
width: 150px;
}
ol { margin-left: 150px; }
li:target img { z-index: 100; }
「:target疑似クラス」をつかって、画像の拡大表示を実装
「:target疑似クラス」をつかって、画像を拡大表示するチュートリアルです。
トリガーは画像のサムネイルだけでなく、テキストリンクをクリックしても、画像が拡大表示されます。
HTML: サムネイルとテキストリンク
<h3>Using images</h3> <a class="playbox" href="#p001"><img src="playbox/target-t.jpg" alt="" /></a> <a class="playbox" href="#p002"><img src="playbox/wheel-t.jpg" alt="" /></a> <a class="playbox" href="#p003"><img src="playbox/barrel-t.jpg" alt="" /></a> <a class="playbox" href="#p004"><img src="playbox/window-t.jpg" alt="" /></a> <a class="playbox" href="#p005"><img src="playbox/flower-t.jpg" alt="" /></a> <a class="playbox" href="#p006"><img src="playbox/photo-t.jpg" alt="" /></a> <h3>Using text links</h3> <ul> <li><a class="playbox" href="#p001">Battlements</a></li> <li><a class="playbox" href="#p002">Cannon Wheel</a></li> <li><a class="playbox" href="#p003">Cannon Barrel</a></li> <li><a class="playbox" href="#p004">Stained Glass Window</a></li> <li><a class="playbox" href="#p005">Flower</a></li> <li><a class="playbox" href="#p006">Windsor Castle Photographer</a></li> </ul>
HTML:拡大画像
<div class="lightbox" id="p001"> <div class="light"></div> <div class="box"> <img src="playbox/target.jpg" alt="" /> <p>Close up of the battlements at Windsor Castle, rotated 90 degrees.<br />Copyright © 2010 - Stu Nicholls</p> <div class="functions"> <a class="playbox previous" title="Previous" href="#p006">«</a> <a class="closebox" title="Close" href="#close">x</a> <a class="playbox next" title="Next" href="#p002">»</a> </div> </div> </div>
CSS
.playbox img {border:1px solid #000; margin:5px;}
.lightbox {width:100%; height:100%; display:none; position:fixed; left:0; top:0; z-index:1000; padding:30px 0 0 0; font-family:arial, sans-serif;}
.lightbox .light {width:100%; height:100%; position:fixed; z-index:-1; top:0; left:0; background:#000; opacity:0.5; filter: alpha(opacity=50);
text-align:center;}
/* this is for IE6 . If you want to have the lightbox scroll with the page in ALL browsers then remove the * html */
* html .lightbox {position:absolute;}
* html .lightbox .light {position:absolute; height:5000px;}
.lightbox .box {width:700px; background:#000; border:10px solid #fff; border-width:10px; margin:0 auto; padding:10px 10px 20px 10px; position:relative; overflow:hidden;
-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-icab-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-khtml-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.lightbox .box img {display:block; margin:0 auto; position:relative;}
.lightbox .box p {width:700px; padding:20px 0; margin:0; color:#fff; text-align:left; font-size:12px;}
.lightbox .functions {position:absolute; bottom:0; left:0; height:30px; width:720px; background:#fff; text-align:center;}
.lightbox .box a {color:#000; font-weight:bold; font-size:25px; text-decoration:none; text-align:center; font-family:"times new roman", serif; padding:0 20px;}
.lightbox .box a.closebox:hover {color:#f00;}
.lightbox .previous:hover,
.lightbox .next:hover {color:#080;}
.lightbox .box2 {width:500px; background:#444; border:10px solid #fff; margin:0 auto; padding:10px; position:relative;
-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-icab-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-khtml-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.lightbox .box2 h3 {color:#fff; font-size:22px; padding:10px 0; margin:0;}
.lightbox .box2 p {width:500px; padding:5px 0; margin:0; color:#fff; text-align:left; font-size:12px; line-height:18px;}
.lightbox .box2 a {color:#fc0;}
.lightbox .box2 a:hover {color:#ff0; text-decoration:none;}
.lightbox .box2 a.closebox {display:block; width:25px; height:30px; background:#444; color:#fff; font-weight:bold; font-size:26px; text-decoration:none; text-align:center; position:absolute; right:-1px; bottom:-1px; border:1px solid #fff;}
.lightbox .box2 a.closebox:hover {color:#f00;}
@-webkit-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:100;
}
}
#p001:target {display:block;}
#p002:target {display:block;}
#p003:target {display:block;}
#p004:target {display:block;}
#p005:target {display:block;}
#p006:target {display:block;}
#p007:target {display:block;}
#p001:target .box img,
#p002:target .box img,
#p003:target .box img,
#p004:target .box img,
#p005:target .box img,
#p006:target .box img {
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 1.5s;
}
「:target疑似クラス」をつかって、画像のズームイン・アウトを実装
Mimic a Click Event with CSS
デモページ
「:target疑似クラス」をつかって、画像をズームイン・ズームアウト表示にするチュートリアルです。
HTML
チュートリアルではHTML5が使用されています。
<figure> <img id="zoom" src="http://d2o0t5hpnwv4c1.cloudfront.net/871_dryEE/dry-ee.png" alt="EE" /> <figcaption> <ul> <li><a href="#zoom">Zoom In</a></li> <li><a href="#">Zoom Out</a></li> </ul> </figcaption> </figure>
CSS
figure {
background: #e3e3e3; display: block; float: left;}
#zoom {
width: 200px;
-webkit-transition: width 1s;
}
#zoom:target {
width: 400px;
}
「:target疑似クラス」をつかって、アコーディオンを実装
Accordion using only CSS
デモページ
「:target疑似クラス」をつかって、アコーディオンを実装するチュートリアルです。
各ラベル（Heading）をクリックすると、アコーディオンで各コンテンツが表示されます。
HTML
※Heading3までの省略
<div id="experiment"> <div class="accordion"> <h2>Accordion Demo</h2> <div id="one" class="section"> <h3> <a href="#one">Heading 1</a> </h3> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div id="two" class="section"> <h3> <a href="#two">Heading 2</a> </h3> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> <div id="three" class="section"> <h3> <a href="#three">Heading 3</a> </h3> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p> </div> </div> </div> </div>
CSS
/*
CSS3 Accordion Experiment
Date: 25th June 2009
Author: Paul Hayes
*/
.accordion {
background: #eee;
border: 1px solid #999;
padding: 0 1em 24px;
width: 500px;
margin: 2em auto;
}
.accordion h2 {
margin: 12px 0;
}
.accordion .section {
border-bottom: 1px solid #ccc;
padding: 0 1em;
background: #fff;
}
.accordion h3 a {
display: block;
font-weight: normal;
padding: 1em 0;
}
.accordion h3 a:hover {
text-decoration: none;
}
.accordion h3 + div {
height: 0;
overflow: hidden;
-webkit-transition: height 0.3s ease-in;
}
.accordion :target h3 a {
text-decoration: none;
font-weight: bold;
}
.accordion :target h3 + div {
height: 100px;
}
.accordion .section.large:target h3 + div {
overflow: auto;
}
「:target疑似クラス」をつかって、特定の箇所を明示
Get to know your CSS3 :target pseudo-class
デモページ
「:target疑似クラス」をつかって、特定の箇所を明示するチュートリアルです。
各ラベル（Block）をクリックすると、それに対応したパネルにボーダーが強調表示されます。
HTML
<div id="main"> <ul> <li><a href="#id1">Block 1</a></li> <li><a href="#id2">Block 2</a></li> <li><a href="#id3">Block 3</a></li> <li><a href="#id4">Block 4</a></li> </ul> <div id="id1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus, felis at varius eleifend, neque orci porta magna, consequat aliquam ligula velit quis erat. Aenean porttitor pellentesque risus, eu tincidunt ipsum blandit in. </p> </div> <div id="id2"> <p>Sed lobortis placerat elit tincidunt tempor. Nam dignissim euismod quam nec tempor. Sed tortor lorem, ultricies a auctor nec, auctor ut neque. Aenean varius, urna eget adipiscing feugiat, nunc ligula molestie massa, id accumsan turpis metus ac ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> <div id="id3"> <p>Pellentesque quis tortor vitae elit cursus vulputate et vel dui. Nunc commodo pretium arcu in ultricies. Nunc vel velit enim, et tincidunt leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div> <div id="id4"> <p>Quisque eget tempor sapien. Cras convallis tempor orci pulvinar scelerisque. Nullam et erat eu nibh sollicitudin congue sit amet id diam. Sed in lectus ut augue euismod porta. Quisque non lacus odio. Nunc ornare adipiscing egestas. </p> </div> </div>
CSS
/*General styles*/
body {
margin: 0;
padding: 0;
}
#main {
width: 960px;
margin: 160px auto 0 auto;
background: white;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
padding: 30px;
border: 1px solid #adaa9f;
-moz-box-shadow: 0 2px 2px #9c9c9c;
-webkit-box-shadow: 0 2px 2px #9c9c9c;
}
/* Add some spacing */
ul, div {
margin-bottom: 10px;
}
/* Default block styles */
div {
padding: 10px;
border: 1px solid #eaeaea;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* Change its appearance when it's matched */
div:target {
border-color: #9c9c9c;
-moz-box-shadow: 0 0 4px #9c9c9c;
-webkit-box-shadow: 0 0 4px #9c9c9c;
box-shadow: 0 0 4px #9c9c9c;
}
sponsors
