KOJIKA17

idとclassを使わないで、HTML5とCSS3でコーディングしてみた。

Webサイトをコーディングする時に、idとclassを考えるのが面倒臭くなったので、idとclassを使わないでコーディングしてみました。
シンプルなサイトなら簡単でつまらないので、idとclassを使っても難しそうなデザインにしています。

今回もJavaScriptは一切、使用していません。

完成したサイト

id, classなしで組んだサイトを見る。

サイトでやってみたHTML5

HTML5では、html, head, bodyタグを完全に省略しても構わないとされています。
省略してもDOMツリー上に存在しているので、

body {background:#f00;}

というCSSの記述も認識してくれました。

サイトで使用したCSS, CSS3の簡単なまとめ

Child Selector

結合子を">"で繋ぐことによって、その要素の直下に存在する要素のみstyleをかけることができます。

:root

bodyの外側に、styleをかけることができます。
IEで見た時に、背景が赤くなってしまうのが嫌だったので:rootを使用しました。

:before, :after

擬似的に要素を作ることができます。

:first-child

その要素の中で一番始めにくる要素を指定できます。

:nth-child(n)

その要素の中で何番目の要素かを指定できます。
数字で指定, odd, even, 数列のような書き方まで幅広く使えます。

:last-child

その要素の中で一番最後の要素を指定できます。

Multiple Background images

背景画像を複数枚指定することができます。カンマ区切りで背景を指定します。

background:url(img.png) ,
	url(img2.png) ,
	url(img3.png);}

Overflow-x, y

元々はIEの独自プロパティでしたが、CSS3になりました。

body {overflow-x:hidden;}

Opacity

要素自体の不透明度を変更することができます。

a img:hover {opacity:.8;}

RGBA

カラーの不透明度を変更することができます。

background-color:rgba(255, 43, 123, .8);

Box Shadow

要素に影をつけることができます。
insetをつけることで、内側にも影をつけることができます。


box-shadow:0 1px 5px #666 ,
	inset 0 5px 5px #111;

Text Shadow

文字に影をつけることができます。

text-shadow:0 -1px 2px #666;

Content

:afterや:beforeと一緒に使うことが多いです。
contentを使用すると、文字、数字、画像、titleやhrefの中身などを表示することができます。
:after, :beforeではなく、要素自体に使うと"Image replacement"となり、contentの内容に置き換えることができます。ただし現在ではOperaしかフルサポートされていません。

nav li:before{
	content:"\3e";
	margin:0 5px 0 0;
	color:#fff;}

2D Transforms

回転(rorate), 拡大縮小(scale), ゆがみ(skew), 移動(translate)など行うことができます。
transform-originでtransformの基点をあらかじめ決めておくと良いかもしれません。初期値は50% 50%です。
現時点ではprefixが必須です。

header>header>ul li {
	-o-transform-origin:0 0;
	-moz-transform-origin:0 0;
	-webkit-transform-origin:0 0;
	transform-origin:0 0;}

ul li:first-child {
	-o-transform:rotate(5deg);
	-moz-transform:rotate(5deg);
	-webkit-transform:rotate(5deg);
	transform:rotate(5deg);}

Transitions

簡単なアニメーション機能を加えることができます。カンマ区切りでプロパティを増やせます。

transition:background-color 1s 0s;

Border Radius

角丸にすることができます。

border-radius:10px;

Gradient

背景にグラデーションを行うことができます。
少し前までは、Webkit, FireFoxしか使えず、さらに記述方法もWebkit, FireFoxでバラバラでしたが、最近統一されて、Operaもgradientが使用できるようになりました。
ただしそれぞれのprefixが必要になります。

background:	-o-linear-gradient(transparent 10%, rgba(255, 255, 255, .8) 30%);
background:	-moz-linear-gradient(rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .8) 30%);
background:	-webkit-linear-gradient(rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .8) 30%);
background:	linear-gradient(rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .8) 30%);

transparentで透明にすることができますが、Opera以外だと影が入ってしまうのでrgba(255, 255, 255, 0)という記述にしています。
また今回は使っていませんでしたが、background-sizeと相性が良さそうです。

id, classなしでコーディングしてみて

頭の中でツリー構造を描けないと、CSS3セレクタがあってもその良さを十分発揮させるには、難しいかもしれません。

Multiple Background Imagesには助けられました。
画像の複数指定できることによって、不要なタグが減り、HTML, CSSのセレクタの数が大きく減ったからです。

あとgradientヤバすぎる。
"グラフィックデザイン"の部分はgradientがないとキツかった。

最後に、id, classを使わずにサイトを組むもんじゃない。