CSS3

positionを使ったボックスの中央配置

positionを使用したボックスの中央配置の記述。

HTML記述例

<div class="box">
  <div class="box_inner">中央に表示したい内容</div>
</div>

CSS記述例

.box {
	position: relative;
}

.box_inner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}

上記、box-innerについては下記でも同様の結果が得られます。

.box_inner {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

サンプルを確認する

CSS3によるボタン

最近流行りのフラットデザインではなく、立体的なボタンのサンプルです。
フラットデザインではボタンからグラデーションや影を排除し、明確にリンクとわかるアイコン(>等)を加えることをしますが、今回はグラデーション影(box-shadow)を利用しました。

続きを読む

古いIE(6~9)にCSS3を対応させる

サポートの切れたWindowsOSの標準ブラウザを無視し、モダンブラウザを対象にCSS3を記述するのであれば、下記の対応はいらないと思います。(2016年9月現在)
古いIEに対応する必要がある方は参考にしてみてください。

– – – – – – – – – – – –

古いIE(Internet Explorer 6~9)でもCSS3のプロパティを反映させようと思った場合、『CSS3 PIE』というものを使います。
今のところ対応しているプロパティは少ない(角丸、グラデーション、ボックスの影など)ですが、使えないよりマシと思えば利用してみるのもいいと思います。

続きを読む

text-shadow box-shadowの使い方

テキストやボックスを立体的に見せるスタイルシートの説明です。
text-shadowはテキストに、box-shadowはボックスに影を付けます。(そのままです)

続きを読む