サイトリニューアル(css3編)

サイトリニューアル(css3編)

前回のサイトリニューアル(html5編)につづき、今回はCSS3編を。まあそれほど多用してはいないんですが。当然と言ってはなんですが、IEは未対応で…。

テキストにドロップシャドウ

最近ちょくちょく使ってるサイトを見かけるようになりました。うちでもテキストにシャドウをかけている場所が何ヶ所かありますが、例えば上のエントリータイトルの部分がそうですね。

ドロップシャドウ

.text-shadow {
	text-shadow: 1px 1px 1px #79f;
}

x方向に1px、y方向に1px、ぼけ1px、色#79f のドロップシャドウを指定しています。

ボックスにドロップシャドウ

Aboutページでちょこっと使ってます。

.box-shadow {
	-webkit-box-shadow: 3px 3px 6px #555;
	-moz-box-shadow: 3px 3px 6px #555;
}

x方向、y方向、ぼけ具合、色 の指定の仕方は、テキストの場合と同じ。webkitというのはChromeやSafari用で、mozの方がFirefox用になります。

ボックスに角丸

同じくAboutにて使用。

.box-radius {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}

8px は角丸の半径ですね。

ウィンドウサイズに応じてCSSを変える

CSS3のMedia Queriesというやつらしいですが、ブラウザのウィンドウサイズに応じてCSSを変更できるというもの。

/* 横幅1677px以上 */
@media screen and (min-width: 1677px) {
	.mediaqueries {
		max-width: 1360px;
	}
}
/* 横幅1337px~1676px */
@media screen and (min-width: 1337px) and (max-width: 1676px) {
	.mediaqueries {
		max-width: 1020px;
	}
}
/* 横幅997px~1336px */
@media screen and (min-width: 997px) and (max-width: 1336px) {
	.mediaqueries {
		max-width: 680px;
	}
}
/* 996px以下 */
@media screen and (max-width: 996px) {
	.mediaqueries {
		width: 340px;
	}
}

このサイトは上の4段階で変化します。とは言え横幅1337px以上になると、あまり見られることはなさそうですが…。IEでは機能しないので、固定幅にしてます。

アニメーション

アニメーションプロパティtransitionというのを使うと、JavaScriptを使わずに動きを付けることができます。ただし現状ではwebkit系(Chrome、Safari)のみで、Firefoxでも対応してません。まああくまで実験ということで。サイト右部の「TOP」「ABOUT」のナビゲーション辺りで使いました。

.transition {
	opacity: 0.5;
	-webkit-transition: 1s ease-in-out;
}
.transition:hover {
	opacity: 1;
}

上の場合だとマウスオーバーした時に、1秒かけてopacity(透明度)が0.51 になる、みたいなかんじですね。

今のところは、こんなかんじでCSS3を使ってます。何度か述べたように現状ではIEが対応してないので、企業サイトではまだ使いづらいですが、個人サイトレベルなら積極的に使っていけそうかな。

サイトリニューアル(html5編)

サイトリニューアル(html5編)

さてさて、Movable Type 5にしてからは、サイトがMTデフォルトなデザインで放置してましたが、ようやくリニューアルです! サイト全体を右寄せにしたり、ロゴを右上、PAGE TOPを右下に固定したり、今までとちょいと違うことをやってみてます。

まあデザインに関してはさておき、今回はhtml5でコーディングすることをメインテーマにしていました。トップページはdivを1つも使わないという逆div厨風を吹かしています。あやしい所はまだありそうですが、とりあえずやってみることが大事! ざっくりとした構成を以下にまとめてみました。

html5でのサイト構成

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<header>
	<hgroup>
		<h1></h1>
		<h2></h2>
	</hgroup>
</header>
<nav>
	<ul>
		<li></li>
		<li></li>
	</ul>
</nav>
<article>
	<section>
		<h1></h1>
		<p></p>
	</section>
</article>
<aside>
	<section>
		<h2></h2>
	</section>
	<section>
		<h2></h2>
	</section>
</aside>
<footer>
	<p><small></small></p>
</footer>
</body>
</html>

html5でのサイト構成図

「article」の使い方にちょっと迷いました。これについてW3C(日本語訳)では以下のように記述。

article 要素は blog エントリや新聞記事など、文書の中で独立した一片の内容を表します。
HTML 5 における HTML 4 からの変更点

独立っていう概念が分かりづらい感じがしましたが、上記のとおりエントリ部分を囲んでみました。

IE用にhtml5.jsを読み込み

Internet Explorerは現在最新版の8でもhtml5には対応していません。これはJavaScriptを1つ読み込ませれば簡単に解決。
HTML5 を IE や Firefox 2 でも使えるようにする方法 – html5doctor – HTML5.JP
上記サイトの中ほどにあるhtml5.jsを使ってhead内に以下を入れてやればおkです。

<!--[if IE]>
	<script type="text/javascript" src="html5.js"></script>
<![endif]-->

cssのリセット

html5は今までなかった要素が増えたので、cssをリセットするのも盛りだくさん。これもHTML5.JPさんを参考に。
HTML5 のリセット・スタイルシート – html5doctor – HTML5.JP

バリデート

文法チェックしたら一応OK出ました。ただWeb制作者おなじみのFirefoxアドオンHtml Validatorは、なぜかhtml5になると&amp;&copy;のような&の付く特殊文字がエラー扱いになって、ちょっと残念なかんじに…。Another HTML-lintも未対応ですね。

html5にしてみて

というほどでもないんですがね。まあ基本的なところで

<div id="header">
</div>

みたいにやっていたところを

<header>
</header>

にしていって、あとは時間を<time>でくくったくらいなんで。
「form」はtype要素が増えたり、「canvas」で何かしら描いたり、「audio」やら「video」やら…とまだまだ試してないことが多すぎるので、たまにアウトプットしていければいいかなと思ってます。
サイトリニューアル(css3編)に続く…