株式会社リースエンタープライズ 大阪南森町発、最強のホームページ制作集団

読むだけで今すぐ使えるCSS3テクニック7選(TIPS)

読むだけで今すぐ使えるCSS3テクニック7選(TIPS)

IE8・9の対応が必要なくなってきた昨今、遂に本格的にCSS3をクライアントワークでも導入していける環境になりましたね!

jQueryやJavascriptで実装していた様々なアニメーションも、CSS3だけで実現できる程、CSS3の可能性は広がっています。

かくいう私もCSS3にハマっていて、クライアントワークをこなす中でCSS3に関する知識を蓄えてまいりました。そこで、本項では、超便利CSS3を使用したテクニックをご紹介していきたいと思います。

コピー&ペーストで自由にご使用して頂けるように記述することを目指しました。

是非「これは便利だ!」と感じたら当記事のブックマーク・はてブ登録・ツイッター拡散をお願い致します!!

必ず知っておくべき基本CSS3テクニック

box-sizingでwidthやborderやpaddingの計算を
簡単にしよう

CSS3の中でも私が最も愛しているのがbox-sizing

box-sizingは要素サイズの算出方法を指定する記述で、例えば1pxのボーダーに囲まれた400pxの要素を作成したい場合、記述は下記の通りとなります。

.box {
width:398px;
border:1px solid #000;
}

ボーダーの線幅分を計算してwidthを算出する必要がありました。

しかし、box-sizingを利用した場合は、下記のように記述できます。

.box {
width:400px;
border: 1px solid #000;
-webkit- box-sizing: border-box;
box-sizing: border-box;	
}

box-sizing: border-box;を指定することで、内側にボーダーを指定できます。ボーダーの線幅の計算等をする必要がなくなり、とても楽にコーディングすることが出来ますね!

これは、paddingでも同じ要領で使用することが出来ます。

.box {
width:360px;
padding:20px;
}

としていたものは、

.box {
width:400px;
padding:20px;
-webkit- box-sizing: border-box;
box-sizing: border-box;	
}

と記述することで、同様の結果を生むことが出来ます。

.insidebox {
-webkit- box-sizing: border-box;
box-sizing: border-box;	
}

上記をコピーして頂いて、「.insidebox」をクラスに追加してもらうだけで、box-sizingの効果を適用することができます!

是非、利用してみてください。

background-sizeでレスポンシブ対応もお任せください

backgroundで指定している背景画像の表示幅を自由に変更したい!という時が良くあります。特にレスポンシブデザインを行っているときにありがちですよね。

そこで、背景画像幅を簡単に設定できるbackground-sizeというCSS3を利用します。

まずは、背景画像を作成したサイズのまま表示する場合は、下記のように記述します。

.box {
width:100%;
background:url(img/sample.jpg) no-repeat top center;
}

上記に背景画像幅を指定します。

.box  {
width:100%;
background:url(img/sample.jpg) no-repeat top center;
background-size: 100% auto;
}


前に幅、後ろに高さ(background-size:幅 高さ;)を指定することができます。もちろん、pxでの指定も可能です。

上記の様に指定することで、画面幅に合わせて背景画像が可変するようになります。

calcで幅を計算して、可変と一部固定のレイアウトを
簡単に実現しよう

Webサイトの基本的なレイアウトである2カラム、3カラムのデザイン。私は嫌いなので好んではデザインしませんが、情報サイトやECサイトなど情報量の多いホームページデザインではまだまだ主流の形式ですよね。

ただし、時代は進んで様々な画面サイズで最適に見えるように(レスポンシブ)を求められたりします。

そんな時にオススメの記述がcalcというCSS3です。

例えば、2カラムのデザインで、メインカラムは可変、サイドカラムは300pxで固定のレイアウトを実現する場合にcalcが力を発揮します。

.main {
width:-moz-calc(100% - 320px);
width:-webkit-calc(100% - 320px);
width:calc(100% - 320px);
float:left;
}

.sidebar {
width:300px;
float:right;
}

上記のように記述することで、メインカラムは画面幅MAXから320px引いた数、サイドカラムは300pxで常に固定という計算式をCSS3で作ることができます!

もちろんですが、calc(600px + 120px)というように足し算もできますし、calc(100% / 3)や(200px * 3)というように割り算や掛け算も設定可能です。

各ブラウザの実装状況は下記の通りです。

  • IE 9以降サポート
  • Firefox 4 – 15までは –moz-のベンダープレフィックスで実装
  • Safari 6より –webkit- のベンダープレフィックスで実装
  • iOS 6より実装
  • Android 4.4より実装

かなり使えるので是非利用してみてください。

ボックス内の要素を高さ中央揃えにする方法

ブロック要素の中のテキストやその他要素をブロックの高さの中央に配置したいというシーンが多々あります。

テーブルで組んでいる場合は
Vertical-align:middle;
があるので簡単ですが、テーブルで組んでいない場合は、高さが不明なことが多く、案外難しいですよね。

そんな時は、下記の記述を利用してください。

高さ不明なブロック要素の中で常に中央配置される

.box p {
position: relative;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

これだけで、vertical-align:middleと同様の効果を得られます。
ちなみにIE10以降でも、-ms-のベンダープレフィックス書いておかないと表示がバグります!ぷんすか

アニメーションで使えるCSS3テクニック

transitionを使いこなして、オリジナルのボタンを
作成しよう

CSS3のアニメーションには大きく、transitionanimationの2種類が存在します。

transitionとanimationの違いはまた別の項でまとめるとして、今回は、

transitionを使った汎用性の高いアニメーションボタンの作成例を紹介します。

transitionは:hoverや:active :focusなど擬似クラスを合わせて使用することで簡単にアニメーションを作成できます。

今回はマウスオーバーでアニメーションするボタンを3種作成しました。

色替えアニメーションボタン

<a href=”” class=”btnA”>
クリックする
</a>
.btnA {
display:block;
width:400px;
text-align:center;
color:#FFF;
background:#000;
border:2px solid #000;
border-radius:5px;
-webkit-border-radius:5px;
transition: all 0.5s;
-webkit-Transition: all 0.5s;
}

.btnA:hover {
background:#FFF;
color:#000;
}

押し込みアニメーションボタン

<a href=”” class=”btnB”>
クリックする
</a>
.bthB {
display:block;
width:400px;
text-align:center;
color:#FFF;
background:#333;
box-shadow:0 -7px 0px #000 inset;
-webkit- box-shadow:0 -7px 0px #000 inset;
border-radius:5px;
-webkit-border-radius:5px;
transition: all 0.5s;
-webkit-Transition: all 0.5s;
}

.btnB:hover {
box-shadow:0 -2px 0px #000 inset;
-webkit- box-shadow:0 -2px 0px #000 inset;
}

アイコンアニメーションボタン

<a href=”” class=”btnC”>
クリックする
</a>
.btnC {
	display:block;
	width:400px;
	margin: 0 auto;
	position:relative;
	padding:15px 15px 15px 60px;
	background:#000;
	color:#FFF;
	transition:all 0.5s;
	-webkit-transition:all 0.5s;
	
}
.btnC:before {
	content:'';
	position:absolute;
	background:#FFF;
	top:15px;
	left:20px;
	width:30px;
	height:2px;
	transition:all 0.5s;
	-webkit-transition:all 0.5s;
}
.btnC:after {
	content:'';
	position:absolute;
	background:#FFF;
	top:25px;
	left:20px;
	width:30px;
	height:2px;
	transition:all 0.5s;
	-webkit-transition:all 0.5s;
}

.btnC:hover:before {
	top:20px;
	left:15px;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
}

.btnC:hover:after {
	top:20px;
	left:15px;
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
}

最後のボタンは擬似要素を用いることで、アイコンを作るテクニックの参考にもしてください。

擬似要素と擬似クラスを同時に2つ指定したいときは、
:hover:afterで、擬似クラスを先に記載する必要がありますので、注意してくださいね。

まとめ

読むだけで今すぐ使えるCSS3テクニック7選(TIPS)はいかがでしたでしょうか?

そのまま使ってもらうもよし、しっかり読んでCSS3を理解した方は、アレンジして使って頂くもよし、是非webデザイナーさんの時短につながれば幸いです。

これは使えるなと思っていただけたら、はてブ登録お願い致します!!

株式会社リースエンタープライズでは、他にもWebデザイナーさんが便利に使えそうなTIPS系記事はもちろん、テクニック紹介やデザイン哲学などあらゆる記事を配信していきます。

是非、twitterやfacebook、はてブなどのソーシャルを利用して常にチェックしてみてください。

以上、塩谷でした。

新着記事と笑いは鮮度が命や!

「読むだけで今すぐ使えるCSS3テクニック7選(TIPS)」記事が気に入った方はいいねしよう!!