HTML5+CSS3でサイトを作ってみる。

■ CSS3で出来ること

こちらのサイトを参考にしています。CSS3 Click Chart

ボックスを表示させる

パディング、ボーダー、マージンを幅と高ささに含めるかどうか、ブラウザの要素幅計算方法を変更することができます。

--[ html ]-----------------------

<div id="bb">border-box パディング領域を含めて100px幅</div>
<div id="cb">content-box パディング領域を除いて100px幅</div>

--[ CSS ]------------------------

#bb {
	width:100px;
	background: #69c;
	border: solid 1px #036;
	padding: 20px;
	margin:0 0 10px 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

#cb {
	width:100px;
	background: #69c;
	border: solid 1px #036;
	padding: 20px;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	-o-box-sizing: content-box;
	box-sizing: content-box;
}

角丸イメージを作成する

--[ html ]-----------------------

<div id="radius">Radius Border</div>
<div id="radius_img">Radius Image</div>

--[ CSS ]------------------------

#radius {
	background: #69c;
	border: solid 1px #036;
	padding: 10px 30px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
}

#radius_img {
	width:100px;
	background:url("../img/button.png") no-repeat;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	text-align:center;
	padding:8px 0;
}

border-radius:四隅の半径;
border-radius:左上&右下の半径 左下&右上の半径;
border-radius:左上 右上 右下 左下;
半径の値を大きくすることで、イメージを丸く見せることも可能。

三角形を作成する

※これはCSS3ではありません。

--[ html ]-----------------------

<div class="arrow_up"></div>
<div class="arrow_down"></div>
<div class="arrow_right"></div>
<div class="arrow_left"></div>

--[ CSS ]------------------------

div.arrow_up {
	width:0px;
	height:0px;
	margin:0 auto;
	border-left:35px solid transparent; 
	border-right:35px solid transparent;
	border-bottom:35px solid #2f2f2f;
}
div.arrow_down {
	width:0px;
	height:0px;
	margin:0 auto;
	border-top:35px solid #2f2f2f; 
	border-right:35px solid transparent;
	border-left:35px solid transparent;
}
div.arrow_right {
	width:0px;
	height:0px;
	margin:0 auto;
	border-left:35px solid #2f2f2f; 
	border-top:35px solid transparent;
	border-bottom:35px solid transparent;
}
div.arrow_left {
	width:0px;
	height:0px;
	margin:0 auto;
	border-right:35px solid #2f2f2f; 
	border-top:35px solid transparent;
	border-bottom:35px solid transparent;
}

シャドウをつける(テキスト)

--[ html ]-----------------------

<p id="text-shadow">Text shadow</p>

--[ CSS ]------------------------

#text-shadow {
	text-shadow: #666 2px 2px 2px;
}

text-shadow:水平方向の距離 垂直方向の距離 ぼかしの距離 色;

シャドウをつける（ボックス）

--[ html ]-----------------------

<div id="box-shadow">Box shadow</div>

--[ CSS ]------------------------

#box-shadow {
	background:#ccc;
	padding:10px 30px;
	-webkit-box-shadow: #999 3px 3px 3px ;
	-moz-box-shadow: #999 3px 3px 3px ;
	box-shadow: #999 3px 3px 3px ;
}

box-shadow:水平方向の距離 垂直方向の距離 ぼかしの距離 色;

自動で区切り線を引く

div要素の中のp要素で成るテキストを新聞のようなコロンで区切っています。区切り線はイメージではありません。

--[ html ]-----------------------

<div id="multiple-columns"> 
	<p>このテキストはpタグで区切られています。</p> 
	<p>ここからふたつめのpタグです。</p> 
</div>

--[ CSS ]------------------------

#multiple-columns {
	-webkit-column-count: 2;
	-webkit-column-width: 50px;
	-webkit-column-gap: 35px;
	-webkit-column-rule: 1px solid #999;
	-moz-column-count: 2;
	-moz-column-width: 50px;
	-moz-column-gap: 35px;
	-moz-column-rule: 1px solid #999;
	column-count: 2;
	column-width: 50px;
	column-gap: 35px;
	column-rule: 1px solid #999;
	height: 90px;
}

オーバーレイ効果

半透明のRGBをかぶせます。

--[ html ]-----------------------

<div id="rgba-parent"> 
	<p>
	divの子要素にRGBAを使って、
	半透明の色をテキストに重ねています。
	</p> 
	<div class="child"></div>
</div>

--[ CSS ]------------------------

#rgba-parent {
	position: relative;
	top: 0;
	left: 0;
}
.child {
	background: rgba(98, 135, 167, .5);
	position: absolute;
	top: 5px;
	left: 15px;
	width: 60%;
	height: 45%;
	padding: 5px;
}

色相、彩度、明度、アルファの設定

カラーに色相、彩度、明度、アルファを描画します。

--[ html ]-----------------------

<div id="hsla-1" class="hsla">色相</div>
<div id="hsla-2" class="hsla">彩度</div>
<div id="hsla-3" class="hsla">明度</div>

--[ CSS ]------------------------

.hsla {
	padding:10px;
	text-align:center;
}
#hsla-1 {
	background: hsla(120,40%,50%,.8);
}
#hsla-2 {
	background: hsla(120,40%,70%,1);
}
#hsla-3 {
	background: hsla(120,50%,70%,.5);
}

バックグラウンド

バックグラウンド、イメージを描写します。

--[ html ]-----------------------

<div id="bg_images"></div>

--[ CSS ]------------------------

#bg_images {
	width: 130px;
	height: 100px;
	border: solid 1px #630;
	background:
	url("../img/bg_cake.png") center center no-repeat,
	url("../img/bg_floor.gif") top left repeat;
}

/* Below is for IE6-8 
#bg_images {
	background: transparent url(../img/bg_floor.gif) repeat top left;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../img/bg_cake.png', sizingMethod='crop');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_cake.gif', sizingMethod='crop')";
}*/

テキストストローク ※chrome または safariに対応

テキストに点線や直線などのアウトラインを描写します。

--[ html ]-----------------------

<p id="stroke">AB</p>

--[ CSS ]------------------------

#stroke {
	-webkit-text-fill-color: #999;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: #600;

	font-size: 70px;
	font-weight:bold;
	text-align: center;
	width: auto;
	background:#ccc;
}

グラデーション

直線状のグラデーションを生成します。

--[ html ]-----------------------

<div id="gradient">2色グラデ</div>
<div id="gradient2">複数色グラデ</div>

--[ CSS ]------------------------

#gradient {
	width:130px;
	height:50px;
	background-image: -moz-linear-gradient(top, #4477a1, #81a8cb); /* FF3.6 */
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Saf4+, Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4477a1', endColorstr='#81a8cb'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4477a1', endColorstr='#81a8cb')"; /* IE8+ */
}
#gradient2{
	width:130px;
	height:50px;
	background-image:-webkit-gradient(linear,left bottom,left top,from(#ccc),color-stop(45%, #4477a1),color-stop(55%, #81a8cb),to(#333));
}

グラデーション

円形のグラデーションを生成します。

--[ html ]-----------------------

<div id="radial"></div>

--[ CSS ]------------------------

#radial {
	width:130px;
	height:50px;
	background-image: -moz-radial-gradient(center 45deg, circle closest-corner, #cae0f2 10%, #4477a1 70%);
	background-image: -webkit-gradient(radial, center center, 10, center center, 90, from(#cae0f2), to(#4477a1));
}

反射

反射させます。

--[ html ]-----------------------

<p id="reflect">反射してます！</p>

--[ CSS ]------------------------

#reflect {
	font-weight:bold;
	font-size:15px;
	-webkit-box-reflect: below -1px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.3)));
}

回転

オブジェクトを回転させます。

--[ html ]-----------------------

<div id="rotation"></div>

--[ CSS ]------------------------

#rotation {
	width:130px;
	height:100px;
	background:#ccc;
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
}

縮小

オブジェクトを拡大・縮小させます。

--[ html ]-----------------------

<div id="scale"></div>

--[ CSS ]------------------------

#scale {
	width:130px;
	height:100px;
	background:#ccc;
	-webkit-transform: scale(.8);
	-moz-transform: scale(.8);
	-o-transform: scale(.8);
	-ms-transform: scale(.8);
	transform: scale(.8);
}

変形

アニメーションで変形させます。

--[ html ]-----------------------

<div id="transition"></div>

--[ CSS ]------------------------

#transition {
	width:130px;
	height:100px;
	background:#ccc;
	-webkit-transition: 
		-webkit-transform 1s ease-in-out,
		background-color linear 1s,
		color linear 1s;
	-moz-transition:
		-moz-transform 1s ease-in-out,
		background-color linear 1s,
		color linear 1s;
	-o-transition:
		-o-transform 1s ease-in-out,
		background-color linear 1s,
		color linear 1s;
	transition:
		transform 1s ease-in-out,
		background-color linear 1s,
		color linear 1s;
}

#transition:hover {
	-webkit-transform: rotateZ(-20deg);
	-moz-transform: rotateZ(-20deg);
	-o-transform: rotateZ(-20deg);
	background-color: #333;
	cursor: pointer;
}

ボーダーにイメージを適用

ボーダーイメージを調節できる便利なサイトがあるのでこれを使うといいでしょう。 Border image generator
border-style: solid; が抜けていたので追加しました(2012/12/20)。

--[ html ]-----------------------

<div id="border-image"></div>

--[ CSS ]------------------------

#border-image {
	width:100px;
	height:50px;
	border-style: solid;
	border-width: 19px;
	-moz-border-image: url(h../img/border-image.gif) 19 repeat; 
	-webkit-border-image: url(../img/border-image.gif) 19 repeat; 
	-o-border-image: url(../img/border-image.gif) 19 repeat; 
	border-image: url(../img/border-image.gif) 19 repeat;
}

テキスト選択時の背景色

テキスト選択時の背景色を指定します。

--[ html ]-----------------------

<p class="bg_blue">選択時水色</p>
<p class="bg_orenge">選択時オレンジ</p>
<p class="bg_yelgreen">選択時黄緑</p>

--[ CSS ]------------------------

.bg_blue::selection {
	background: #9cc; /* for WebKit, Opera, & IE9 */
}
.bg_blue::-moz-selection {
	background: #9cc; /* for Firefox */
}
.bg_orenge::selection {
	background: #f90; /* for WebKit, Opera, & IE9 */
}
.bg_orenge::-moz-selection {
	background: #f90; /* for Firefox */
}
.bg_yelgreen::selection {
	background: #9c6; /* for WebKit, Opera, & IE9 */
}
.bg_yelgreen::-moz-selection {
	background: #9c6; /* for Firefox */
}

アウトラインのオフセット

ボックス等のアウトラインをオフセット化します。

--[ html ]-----------------------

<div id="offset"></div>

--[ CSS ]------------------------

#offset {
	width:130px;
	height:100px;
	background:#ccc;
	outline: solid 1px #666;
	outline-offset: 5px;
}

ボックスレイジング

右下の角のハンドルによりボックスの大きさを変えられます。

--[ html ]-----------------------

<div id="resizing"></div>

--[ CSS ]------------------------

#resizing {
	width: 130px;
	height: 50px;
	background:#ccc;
	overflow: hidden;
	-moz-resize: both; /* for Firefox 4+ */
	resize: both; /* can be "none", "horizontal", "vertical" or "both" */
}

単語の改行

長すぎて範囲内に収まらない単語に改行を加えるかどうかを決められます。

--[ html ]-----------------------

<div id="wordwrap"> 
	<p><a href="リンク先URL">
	Pneumonoultramicroscopicsilicovolcanoconiosis
	</a></p> 
</div> 

--[ CSS ]------------------------

#wordwrap {
	word-wrap: break-word;
}

バックグラウンドサイズ

バックグランドの大きさや比率を調節します。

--[ html ]-----------------------

<div class="example example-bgsize"> 
<p>このボックスは100%のwidthとheightで構成されています。</p>
</div> 

--[ CSS ]------------------------

.example-bgsize {
	padding:10px;
	background: #6287a7 url(../img/bg-berries.jpg) center center no-repeat;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
	background-size: 100% 100%;
}

ビューポートの高さに応じて高さを設定

コンテンツを縦幅いっぱいに表示したい場合、少し細工しなければheight:100%;で設定しても無効になりますが、 そういう時は"vh"という単位を使います。

--[ html ]-----------------------

<div>height 100%</div>
<div>height 80%</div>
<div>height 100vh</div>
<div>height 80vh</div>

--[ CSS ]------------------------

*{margin:0;padding:0;}
body{background:#eee;}
div{width:25%;display:inline-block;overflow:hidden;vertical-align:top;}
div:nth-child(1){background:#eddbc3; height:100%;}
div:nth-child(2){background:#8fb59c;height:80%;}
div:nth-child(3){background:#e8c571;height:100vh;}
div:nth-child(4){background:#813a26;height:80vh;}

Webfontを使用する

text-indentを使用した画像置き換えは、スパム判定される可能性があるとのことで現在推奨はされておらず、 代替方法として@font-faceを使用し、サーバー上に配置したwebfontを読み込ませることで対応を薦められているようです。

仕組みは自分のサーバーにwebfontをアップし、ユーザー側に読み込ませるというもので、やり方としては <<webfontを入手→コードを記述→html/css/fontをアップ >>という感じです。
参考URL:海外SEO情報ブログ
参考URL2:公開されているWebfont

--[ html ]-----------------------

<p id="wf">Written by webfont</p>
<p>I am normal font</p>

--[ CSS ]------------------------

@font-face {
	font-family:FontName;
	src:url(../font/CabinSketch-Bold.ttf) format("TrueType");
}
#wf{
	font-family:FontName;
}

もっとわかりやすいサンプルはこちら、
また、Webフォント用のページを新設しましたので、ご覧ください。