HTML5/CSS3を使ってみた
http://puzzel.jp/sample/HTML5/n3/index.html
先日、私のサイトPuzzel.jpを公開してその中のコンテンツでHTML5/CSS3のサンプルサイトを作りました。
そこで色々分かったことなどがあったのでメモっておきます。
①Webfont
@font-face { font-family: mplus-1p-light; src: url('http://mplus-fonts.sourceforge.jp/webfonts/mplus-1p-light.ttf') format("truetype"); }
でフォントを呼び出して
.de { font-family: mplus-1p-light; }
でフォントを表示します
②Transform
transformを使って画像を傾けています。
-webkit-transform: rotate(3deg); -moz-transform: rotate(3deg);
③Border-radius/text-shadow
右と左の上だけ丸くしています。
/*Fx 右左上5px*/ -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 0px; /*Webkit 右左上5px*/ -webkit-border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-right-radius: 0px; }
テキストに影をつけています。
text-shadow: 0px 0px 2px #777;
横へのオフセット 縦へのオフセット ぼかしの大きさとなってます。
④display:box/box-shadow
display:boxを使ってFloat:left同様の事ができる。
#contents { /*box 親DIV要素に*/ display:box; display:-webkit-box; /*webkit*/ display:-moz-box; /*fx*/ display:-ms-box; /*ie*/ /*中央用CSS*/ position: relative; left: 50%; margin-left: -400px; width: 800px; margin-top: 20px; }
Display:blockを使うと、Margin:auto(中央)が使用できなくなってしまうので、他の方法を使った。
ボックスにも影がつけられる。
-webkit-box-shadow: 0px 5px 10px #999; -moz-box-shadow: 0px 5px 10px #999;
横へのオフセット 縦へのオフセット ぼかしの大きさ と成ってます。
⑤反射
Webkitのみです。画像やVideoなどを水面に反射しているようになるCSSです。
-webkit-box-reflect:below 0px -webkit-gradient( linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
from(transparent), color-stop(0.5, transparent), to(white)
で、初めは透明で、0.5ぐらいの白になっていくという感じ。
⑥ボタン
.box1 a { width: 90%; margin-top: 20px; margin-right: auto; margin-bottom: 10px; margin-left: auto; font-weight: bold; line-height: 50px; text-align: center; display: block; background-color: #EBEBEB; background-image: url(grade_4.png); background-position: bottom; -moz-border-radius: 20px; -webkit-border-radius: 20px; -webkit-box-shadow: 0px 0px 7px #00bbff; -moz-box-shadow: 0px 0px 7px #00bbff; }
Boxshadowや色々活用すると見易いボタンになります。
a:hoverを使うともっと良い感じに。
HTMLソースも見てもらえば分かると思いますが、XHTMLで書いているときよりも大分綺麗です。
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <!--[if IE]><script src="iehtml.js" type="text/javascript"></script><![endif]--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
ヘッダー部分ですが、この数行で終わります。
書いてて分かった事。
改行のbrは、
とHTML4の形式になったこと。XHTMLだと
と[ /]を入れないといけなかったののです。
また、headerなら ナビゲーションなら とあるのでどこに何があるとか簡単に分かるよう成ったと思いました。
CSS3もIEなど対応していないブラウザもありますが、Googleのように検索ボタンやボックスの角丸などは使ってみると印象が結構変わるので使ってみるといいと思います。
