[CSS]今、そして近い将来に使用するであろうスタイルシートのテクニック集

Post on:2011年2月18日

はじめに

ここでフォーカスするのは、今、そして近い将来に使用するであろうスタイリングのテクニックです。HTML5の要素のスタイリングから、ディスプレイごとにを変更するレイアウトまで、明日、来月、あるいは来年使用するかもしれないものを紹介します。

紹介するテクニックは、いくつかのブラウザでサポートされていないものもあります。しかしながら、多くの有用なサイトではこれらのテクニックを使用し、効果をあげているのも事実です。
サポートしていないブラウザ（主にIE）には、JavaScriptの併用を検討してみてください。

参考：: CSS3が非対応なブラウザでも利用できるようにするツールのまとめ

Styling HTML5

HTML5をスタイルすることは、HTML4の時とあまり違いはなく、基本的な方法は同じです。ではHTML5の新しい要素をどうすべきか始めてみましょう。

CSS

article, aside, canvas, details, embed, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display: block;
}
command, datalist, keygen, mark, meter, progress, rp, rt, ruby, time, wbr {
	display: inline;
}

HTML5の新要素をblockとinlineに分けてみました。
実はこれらにHTML5の重要な新要素は含まれていません。そうです、audio, videoです。この二つは正確にどのように扱うべきか、非常に難しい要素です。ブロックでしょうか？　インラインでしょうか？
その答えは、あなたが実際にどのようにそれらを使用するかによります。

また、IEの古いバージョンでHTML5の要素を使用する時は、「html5.js」を使用することで、DOM上で認識するようになります。

Classing like HTML5

おそらく、あなたはHTML5の新しいセマンティックが好きでしょう、しかしサイトを完全にHTML5にすることはなかなかできないでしょう。サイトに来訪するユーザーは古いブラウザを使用しているため、むしろHTML4やXHTMLを採用したいと思っていることでしょう。

そんな人のために、XHTMLなどの旧式の要素を使用して、classにHTML5の要素の名称を使用して制作する方法を紹介します。

HTML

<div class="figure">
    <img src="spring.jpg" alt="A small child with twin pigtail braids, her back to the camera, swings away from the camera on a playground swingset while the late afternoon sun peeks over the crossbar of the swingset.">
    <div class="figcaption">Swinging into spring.</div>
</div>

CSS

.figure {
	float: left;
	border: 1px solid gray;
	padding: 0.25em;
	margin: 0 0 1.5em 1em;
}
.figcaption {
	text-align: center;
	font: italic 0.9em Georgia, "Times New Roman", Times, serif;
}

HTML5にすると、下記のようになります。

HTML5

<figure>
    <img src="splash.jpg" alt="A toddler’s face is obscured by a rippled and dimpled wall of water thrown up by her hands slapping into the surface of the swimming pool in whose waters she sits.">
<figcaption>SPLASH SPLASH SPLASH!!!</figcaption>
</figure>

基本的な構造は同じですが、マークアップはもちろん少し異なるものになっています。
このアプローチの利点は、あなたのサイトがHTML5になる時、divとclassを削除することで簡単に対応できるからです。

[ad#ad-2]

Media Queries

Media Queriesのポイントは、異なるメディアの環境ごとに条件付きで最適なスタイルを与えることができることです。これはデバイスのビューエリアのサイズだけでなく、カラーやピクセル密度に基づいて最適なスタイルを提供することができます。
もちろん、ビューエリアのサイズによって、レイアウトを変更することも可能です。

3カラムのレイアウトで、スタイルシートは下記のようになります。

CSS

body {
	background: #FFF;
	color: #000;
    font: small Arial, sans-serif;
}
.col {
	position: relative;
    margin: 3em 1%;
    padding: 0.5em 1.5%;
    border: 1px solid #aaa;
    border-width: 1px 1px 0 1px;
	float: right;
	width: 20%;
}
#two {
	width: 40%;
}
#footer {
	clear: both;
}

このレイアウトが狭いモニターで表示した際に、2カラムに表示できたら素晴らしいと思いませんか？　Media Queriesを使用すると、簡単に実現することができます。

CSS

まずは、ベースとなるスタイルシートです。

body {
	background: #fff;
	color: #000;
    font: small Arial, sans-serif;
}
.col {
	position: relative;
    margin: 3em 1%;
    padding: 0.5em 1.5%;
    border: 1px solid #aaa;
    border-width: 1px 1px 0 1px;
}
#footer {
	clear: both;
}
.col {
	float: right;
	width: 20%;
}
#two {
	width: 40%;
}

CSS

最後の2つの指定をMedia Queriesで、条件付きで指定します。

@media all and (min-width: 800px) {
    .col {
    	float: right;
    	width: 20%;
    }
    #two {
    	width: 40%;
    	}
}

これで、ビューエリアが800pxより大きい場合にスタイルが適用されます。

しかし、まだここでやめないでください。
800pxよりビューエリアが小さい場合、下記のように表示されてしまいます。

800pxより小さい場合の表示

では、500-800pxの場合には、2カラムになるようにスタイルシートを作成してみます。

CSS

@media all and (min-width: 500px) and (max-width: 799px) {
    .col {
    	float: left;
    	width: 20%;
    }
    #two {
    	float: right;
    	width: 69%;
    }
    #three {
    	clear: left;
    	margin-top: 0;
    }
}

表示すると、下記のようになります。

500-800pxの場合の表示

最後に、ビューエリアが500px以下の場合をスタイルして終了です。
ここでは、500px以下は1カラムにしてみます。

CSS

@media all and (max-width: 499px) {
    #one {
    	text-align: center;
    }
    #one li {
    	display: inline;
    	list-style: none;
		padding: 0 0.5em;
		border-right: 1px solid gray;
		line-height: 1.66;
	}
    #one li:last-child {
    	border-right: 0;
    }
    #three {
    	display: none;
    }
}

500px以下の場合の表示

Styling Occasional Children

2番目や3番目などの要素だけにスタイルを適用したいことはありませんか？　複数のオブジェクトを配置した際に、こういったことが必要になるかもしれません。

例えば、高さの異なるボックスを配置した場合、下記のようにばらばらに配置されてしまうことがあります。

バラバラに配置されてしまった場合

これを解決するには、ボックスごとに個別にidやclassを使用することでも解決しますが、スマートではありません。
下記のスタイルシートを使って、解決してみます。

CSS

.quotebox:nth-child(4n+1) {
	clear: left;
}

これは4つおきに、「clear:left;」を適用しています。

期待通りに配置された場合

これは、Media Queriesを併用してビューエリアごとに数を変更することも可能です。

CSS

@media all and (min-width: 75.51em) {
    .quotebox:nth-child(5n+1) {
    	clear: left;
    }
}
@media all and (min-width: 60.01em) and (max-width: 75em) {
    .quotebox:nth-child(4n+1) {
    	clear: left;
    }
}
@media all and (min-width: 45.51em) and (max-width: 60em) {
    .quotebox:nth-child(3n+1) {
    	clear: left;
    }
}
@media all and (min-width: 30.01em) and (max-width: 45.5em) {
    .quotebox:nth-child(2n+1) {
    	clear: left;
    }
}
@media all and (max-width: 30em) {
    .quotebox {
    	float: none;
    }
}

ここでのサイズ指定は「em」を使用しました。これはレイアウトのテキストの大きさとビューエリアのサイズ変化により適用可能なようにするのに役立ちます。

Styling Occasional Columns

次に、テーブルの列や行のカラーを交互に変更させてみます。

CSS

td:nth-child(odd) {
	background: #fed;
}

奇数のみスタイルを適用したテーブル

シンプルなスタイルですが、ずっと読みやすいテーブルになったのではないでしょうか。
これは、もちろん奇数だけでなく、奇数と偶数、1,4,7番目、という指定もできます。

CSS

td:nth-child(3n+1) {
	background: #edf;
}

1,4,7番目のみスタイルを適用したテーブル

RGB Alpha Color

カラーを16進数で指定するのは、スタイルシートでよく使用される方法の一つです。CSS3ではカラーを指定する際、RGB指定に不透明度（a）を加えて指定することができます。

CSS

.box1 {
	background: rgb(255,255,255);
}
.box2 {
	background: rgba(255,255,255,0.5);
}

左：RGB指定、右：RGBa指定

RGB値はそれぞれ%で指定することもできます。

CSS

.box1 {
	background: rgb(100%,100%,100%);
}
.box2 {
	background: rgba(100%,100%,100%,0.5);
}

aに指定する値は、0が不透明無しで、1が完全な不透明、となっています。上記で使用している0.5は半分不透明で、いわゆる半透明のスタイルです。また、1以上の値（4.2など）を指定しても、ブラウザはそれを1として扱います。

RGBaをサポートしていない古いブラウザで使用する際には、注意が必要です。最初にRGBで指定を行い、次にRGBaで指定を上書きするように記述します。

CSS

{
	color: #000;
	color: rgba(0,0,0,0.75);
}

RGBaには16進法のフォーマットがないことに注意をはらってください。「#00000080」と指定しても、不透明度を適用したブラックにはなりません。

HSL and HSL Alpha Color

CSS3で採用されたもう一つのカラー指定の方法が、HSLです。HはHue（色相）、SはSaturation（彩度）、LはLightness（輝度）の略で、それぞれの値を指定することができます。これはカラーの名称が分からなくてもカラーピッカーの色を指定できる利点があります。

HSLはRGBと同様に不透明度を指定するこもできます。

CSS

.box1 {
	background: hsl(0,0%,100%);
}
.box2 {
	background: hsla(0,0%,100%,0.5);
}

左：HSL指定、右：HSLa指定

Shadowy Styles

ドロップシャドウって覚えてますか？　そうです、90年代半ばに、全てがドロップシャドウを使っていました。
CSS3ではこのドロップシャドウは2種類あり、テキストとボックスにシャドウを与えることができます。

まずは、実例を見てみましょう。

CSS

h1 {
	text-shadow: gray 0.33em 0.25em 0.1em;
}

最初の値（0.33em）は水平方向のオフセット、二番目の値0.25em）は垂直方向のオフセット、三番目の値（0.1em）はぼやけの半径です。これらの値はピクセルなど他の単位を使用することもできます。
スタイルが適用されると下記のように表示されます。

テキストシャドウの実装例

シャドウは複数もたせることもできます。

CSS

h1 {
	text-shadow: gray 0.33em 0.25em 0.1em, -10px 4px 7px blue;
}

複数のシャドウをもたせた実装例

ボックスには「box-shadow」を使用して、同様にスタイルを適用することができます。

ただし、現時点ではこの記述だけではブラウザで動作しないでしょう。記述する際には、ブラウザごとにプレフィックスを付加する必要があります。

CSS

h1 {
	-moz-box-shadow: gray 0.33em 0.25em 0.25em;
	-webkit-box-shadow: gray 0.33em 0.25em 0.25em;
	box-shadow: gray 0.33em 0.25em 0.25em;}

ただし、サポートしていないブラウザではドロップシャドウのスタイルは適用されません。IEはfilterを使用して、シャドウを適用できます。詳しくは下記ページを参考にしてください。

Drop shadow with CSS for all web browsers

Multiple Backgrounds

CSS3で本当に便利なものの一つが、エレメントに多数の背景画像をサポートしたことです。これは今まで同様のことをする際には、divを何重にも入れ子にするしかありませんでした。

実装例をみてみましょう。

HTML

<div class="quotebox">
One’s mind has a way of making itself up in the background, and it suddenly becomes clear what one means to do.
<span>—Arthur Christopher Benson</span>
</div>

CSS

body {
	background: #c0ffee;
	font: 1em Georgia, serif;
	padding: 1em 5%;
}
.quotebox {
	font-size: 195%;
	padding: 80px 80px 40px;
	width: 16em;
	margin: 2em auto;
	border: 2px solid #8d7961;
	background: #fff;
}
.quotebox span {
	font-style: italic;
	font-size: smaller;
	display: block;
	margin-top: 0.5em;
	text-align: right;
}

ここまではシンプルなマークアップとスタイルシートで、下記のように表示されます。

背景無しのプレーンな実装例

背景画像を二つ、適用してみます。

CSS

.quotebox {
      background:
             url(bg01.png) top left no-repeat,
             url(bg02.png) top right no-repeat;
      background-color: #fff;
}

上左と上右のコーナーに背景画像を適用してみました。

背景画像を2つ適用した実装例

背景画像は多数指定することが可能です。

CSS

.quotebox {
background:
             url(bg01.png) top left no-repeat,
             url(bg02.png) top right no-repeat,
             url(bg03.png) bottom right no-repeat,
             url(bg04.png) bottom left no-repeat,
             #fff url(bgparch.png) center repeat;
}

上左、上右、下右、下左、そして真ん中にそれぞれ背景画像を適用してみました。

背景画像を5つ適用した実装例

これらを使用することで、内包されているコンテンツがどのようなサイズであっても期待通り表示され、シンプルで簡単に実装することができます。
もちろん、無駄なdivの入れ子はありません。

2D Transforms

もし今まで、ボーダーやテキストなどいろいろなエレメントを回転させたり歪めたりしたいと望んだことがあるなら、このセクションはあなたのためのものです。
ただし、このスタイルシートはブラウザごとにたくさんのプレフィックスが必要です。

CSS

-webkit-transform: …;
-moz-transform: …;
-o-transform: …;
-ms-transform: …;
transform: …;

まずは、簡単な回転の例をみてみましょう。

CSS

.box1 {
	-moz-transform: rotate(33.3deg);
}
.box2 {
	-moz-transform: rotate(-90deg);
}

エレメントを回転させた実装例

赤い点線は元の位置で、左は33.3度、右は-90度、回転するスタイルを適用しています。

次に、変形をみてみます。

CSS

.box1 {
	transform: scale(0.5);
}
.box2 {
	transform: scale(0.75, 1.5);
}

エレメントを変形させた実装例

値が一つの時はx, y軸の両方、二つの時はそれぞれx軸y軸の大きさを変更します。

Transformには、他にも「skew」で歪み、「translate(xy[x,y])」で移動をスタイルすることができます。

[CSS]今、そして近い将来に使用するであろうスタイルシートのテクニック集

はじめに

Styling HTML5

CSS

Classing like HTML5

HTML

CSS

HTML5

Media Queries

CSS

CSS

CSS

CSS

CSS

Styling Occasional Children

CSS

CSS

Styling Occasional Columns

CSS

CSS

RGB Alpha Color

CSS

CSS

CSS

HSL and HSL Alpha Color

CSS

Shadowy Styles

CSS

CSS

CSS

Multiple Backgrounds

HTML

CSS

CSS

CSS

2D Transforms

CSS

CSS

CSS

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Recommend

Category

Blog Info