サイトリニューアル(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が対応してないので、企業サイトではまだ使いづらいですが、個人サイトレベルなら積極的に使っていけそうかな。

ボックスの中央配置をMacIEにも適応させる

CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 | CREAMU ブックマーク数

というエントリーがはてなブックマークで上がっていました。

Web creators 2007年 03月号 (P.56) に記載されていた『CSSのみでボックスをブラウザの中央に配置する』というCSSの記述方法を紹介したものです。

実際に使用することは少ないかもしれませんが、昔はテーブルレイアウトでやっていた中央配置をCSSでやるというのは、何となく実装したくなるもの。このサイトでも2つ前のエントリー内で最後に上げた「404 Not Found ページ」にて実装しています。

http://chocobit.com/404.html

ここの Not Found ページに限っては、文字の大きさを変更しても改行されずに表示させるため、あえて親ボックスの横幅(ついでに縦幅も)のサイズを固定させず、横幅の負marginの単位をemにし、フォントサイズを変更しながら微調整するという、ちょっと変則パターンにしています。(ただし、IE6ではフォントサイズによっては改行してしまうようです…)

このボックスを中央配置する方法、このままではMacIEで表示が崩れてしまいます。横はセンター位置にくるのですが、縦のセンターが効かずにブラウザの上部に上半分が隠れる形になってしまいます。「今さらMacIEって…」と思う人もいるかもしれませんが、MacIEにハックをかけている人は今も多いと思うので、これを解消させる方法を紹介します。

やり方は、スタイルシートに

/*\*//*/
#mainbox {
position: fixed;
}
/* */

と記述。これだけです。(※メインボックスのdiv要素 id=”mainbox” とした場合)

テストページ

前後の /*\*//*/ ~ /* */ は囲まれた部分のみMacIEに適用させるハックです。
要はMacIEだけpositionを absolute → fixed としただけですね。簡単でした。以上。

div要素を増やさずに「角丸」を表現する

Web2.0的なデザインでよく使われるボックス四隅の角丸ですが、うちのサイトのような可変幅で表現しようとすると、無駄にdiv(もしくはspan)要素を増やさなければならなかったりします。

Javascriptで見せる方法もあるから、それを使えばソースに無駄はなくなるけど、個人的にはそれだけのためにJavascriptを使うのはどうも…てな感じだ。

ということで、今回はCSSだけで角丸をつくる方法を紹介。
(四隅の画像は使いますが。)

で、最初にことわっておくと、IEには対応してません。(7も)
「えーっ!?」と言われそうですが、Firefoxにはもちろん、IE以外のCSS2をサポートしたブラウザには対応してます。

なのでこの方法、「角丸でもよいが、まぁそうでなくてもよい」程度に思ってもらえればよいかと。

ではやり方です。

  1. まず四隅の画像を用意
    角丸画像1
    角丸画像2
    角丸画像3
    角丸画像4
  2. 角丸にしたいdiv要素を用意(幅は50%の可変幅に設定)

    これを角丸にしたいっ

  3. CSSを以下のように設定
    div#kadomaru {
    width: 50%;
    background-color: #572c00;
    }
    div#kadomaru:before {
    display: block;
    line-height: 0;
    content: url(top-left.gif);
    background: url(top-right.gif) no-repeat top right;
    }
    div#kadomaru:after {
    display: block;
    line-height: 0;
    content: url(bottom-left.gif);
    background: url(bottom-right.gif) no-repeat bottom right;
    }
  4. これだけで

    Firefoxでは角丸に!

これはCSSの「:before」「:after」疑似要素、「content」プロパティを使用して表現してます。

IE7さえ対応してくれれば、もっと積極的に使っていけるんだけど。
ブラウザのシェアを考えると、仕事では使えないですね…。

個人サイトではオススメ。うちもどこかに入れようと検討中です。