サイトデザインを一新!HTML5+CSS3にて構築

website

2010.11.22

サイトをリニューアルしました!HTML5とCSS3で構築しています。
でも、MozillaかWebkit系でしかまともに見れないのが残念。。。

HTML5について

要素が増えたので、正しいマークアップが出来ているか心配。
今までdiv、p、ulだけで構成していたような気がする。。。

head要素内はシンプルになった。
ドキュメントタイプが<!DOCTYPE HTML>だけになったので、strictやtransitinalかを迷わなくていい!

CSS3について

デザインの多くをCSS3で実現しました。
例えば、右上の「about me」のボタンもCSS3のグラデーションです。
background: -webkit-gradient(linear, left bottom, left top, from(#5b5d6f), to(rgba(111,113,132,1)));
background: -moz-linear-gradient(#5b5d6f, rgba(111,113,132,1));

FireFoxとSafariもしくはChromeだと左側に90度回転したロゴが出ています。
これもCSS3でテキストを装飾しています。
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);

その他、テキストやボックスにシャドウを入れられます。
CSSだけでデザインを一新出来るのが魅力で!

その中でも一番「いい!」と思ったのが、Multiple backgroundsです。
複数のbackgroundを1つの要素に設定出来るので、ヘッダーとフッターにウィンドウ全体に広がる画像があった場合、body要素に2つの背景を指定するだけでOK!
デザインを意識しすぎづにマークアップが出来ます!

参考にしたサイト

http://www.html5.jp/tag/elements/index.html
http://www.htmq.com/css3/index.shtml
http://leaverou.me/ft2010/#intro

  1. Web-Parkのホーム > 
  2. website > 
  3. サイトデザインを一新!HTML5+CSS3にて構築
オススメ本(既読)
読んでみたい本(未読)

Warning: count(): Parameter must be an array or an object that implements Countable in /home/markcrest/web-park.org/public_html/wordpress/wp-includes/class-wp-comment-query.php on line 405

COMMENT PLEASE!!

トラックバック

「サイトデザインを一新!HTML5+CSS3にて構築」のトラックバックURL

Warning: Use of undefined constant display - assumed 'display' (this will throw an Error in a future version of PHP) in /home/markcrest/web-park.org/public_html/wordpress/wp-content/themes/default/single.php on line 105
http://web-park.org/website/renewal20101121.html/trackback
about me

Manabu Kushimoto

Welcome to WEB-PARK.ORG!!
This domain was made since 2008 February.

Gender
Male
Birth year
1982
From
Osaka,Japan
  • はてな?ブックマーク
  • delicious
  • facebook