• web制作
  • css3
  • 入門
  • 初心者

デモ付きで解説!CSS3を勉強したい人の為の初心者向け入門講座

三浦
このエントリーをはてなブックマークに追加
ただのCSS指定

チームサンタの三浦です。

さて、最近ではweb制作でPC、スマートフォンを同時に制作する or レスポンシブwebデザインでの制作がほとんどになってきましたね。
HTML5、CSS3の勉強をしようしようと思って、ずるずると先延ばしにしている人はおりませんか?
そろそろ勉強しましょう!
もうほとんどのブラウザで対応してますよ!

ということで今回はCSS3の超入門として、新しく増えた要素を学びつつ、
CSS3の基礎中の基礎を学ぶための記事を書いてみたいと思います。

なので難しい理論や方法を記すつもりは全くありません!
これからコーディングの勉強をする方や長らくCSS3を敬遠してきた方、
改めてCSS3を復習しようかなと考えている方に向けた記事となっています。

少しでも誰かのためになれれば幸いです。

CSS3の概要

念のためですが、「CSS」は、ウェブページの見栄えを定義するための言語です。
「Cascading Style Sheets」の略ですが、単に「スタイルシート」と呼ばれる事が多いです。

最初のCSSである「CSS1」の規格は、1996年に確定し、その後、仕様に改良を加えた「CSS2」「CSS2.1」が公表され、その最新版が「CSS3」となっております。
CSSは新旧が混合しても問題ないので、「CSS3で新しく追加されたプロパティを使いたい!」という場合でも、既存のソースをすべて書き換える必要はありません。
「今使っているCSSソース」の中に、いきなり「CSS3の記述」を追記するだけで使えます。

また「HTML5、CSS3」をセットのように説明されることが多いですが、別にHTML5とCSS3を一緒に使わなければいけないわけではありません。
HTML3.2やHTML4.0で記述されているものにも、CSS3を使ってデザインすることが可能です。

CSS3で追加された要素

CSSで追加された要素として、10個のプロパティ(グラデーション、角丸、透過など)、13個のセレクタ(enabled、nth-child、Begins withなど)が追加されております。

今回は追加されたプロパティに注目して、その中からよく使われると思われる下記、
7つをピックアップしてご紹介致します。
・角丸
・ボックスシャドウ
・テキストシャドウ
・透過(色の指定)
・グラデーション
・変形
・アニメーション

また追加セレクタですが、詳しくはチートシートがございますので、
そちらで確認が出来ます。

CSS3 セレクタチートシート(PDF)

実際に動かしてみよう!

とそのまえにベンダープレフィックスとは?

少しコーディングをいじったことのある人であればどこかで見た事があるかと思いますが、
CSSのプロパティの先頭につける-webkit-、-o-などのことを指します。

CSS3はHTMLやCSSのルールを決めているw3cでまだ策定中となっているため、
各ブラウザによって実装がまちまちの状況です。
そのため、機能を動作させるために、プロパティや値の先頭に-moz-や-webkit-などのベンダープレフィックスを付ける必要があります。
種類は下記のものがあります。

※種類
-webkit-:chrome / safari
-moz-:firefox
-o-:opera
-ms-:ie

例えば、border-radiusにベンダープレフィックスをつけると、

<style>
border-radius:5px;
-webkit-border-radius:5px;
</style>

と、このように使います。

現在どのブラウザがどの要素を対応しているのかは下記のサイトで確認することが出来ます。

caniuse.com

border-radiusだとie9以上であれば基本的に使える状況ですね!

角丸対応

それではいよいよ実装に移ります!!

角丸

まずはよく使う、「角丸」から!

  • テスト1〜3

HTML

<div>テスト1</div>

CSS

div {
	width: 150px;
	height: 150px;
	margin: 30px;
	background-color: #e74c3c;
	border: 2px solid #CCC;
}

上記のコードだと、ブラウザではこのように表示されます。

ただのCSS指定

それではこれに「角丸」の効果をつけたいと思います。
「角丸」をつけるには「border-radius」を使用します。

HTML

<div id="test01">テスト1</div>

CSS

#test01 {
   border-radius:20px;
}
ただのCSS指定

無事角丸になりましたね!!
角丸はmarginやpaddingのように4つの指定を行うことが出来ます。

border-radius: 10px 30px 50px 80px;

左上、右上、右下、左下の順番です。
またパーセント指定で表示することも可能です。

それぞれ対応させると次のようになります。

HTML

<div id="test01">テスト1</div>
<div id="test02">テスト2</div>
<div id="test03">テスト3</div>

CSS

#test01 {
     border-radius:20px;
}
#test02 {
	border-radius: 10px 30px 50px 80px;
}
#test03 {
	border-radius: 50%;
}
ただのCSS指定

実際の様子はデモページでご確認ください。

デモページ

透過(色の指定)

次は透過と色の指定についてご説明致します。

  • テスト4〜5

透過はすでにお使いの方も多いかも知れませんね!
下記のプロパティを使用します。

opacity:0.5;

値は0〜1を指定し、値が低くなればなるほど、透明度が増します。
0で完全に見えなくなります。

色の指定はもちろん以前のCSSからあったのですが、
CSS3から新たに「rgba」というものが追加されました。

background-color:rgba(0,0,0,0.5);

左から順に
・赤
・緑
・青
・透明度

ですので、今回の指定では「黒の半透明」の指定になります。

デモページ

ボックスに影

divなどのボックス要素に影を落とす効果です!

  • テスト6〜9

ボックスに影をつけるには下記のプロパティを使用します。

box-shadow:5px 10px;

値はそれぞれx方向、y方向にどれだけ動かすかを示します。
今回の場合は「右に5px」「下に10px」に位置に影をつける事を意味しています。

ブラウザで確認するとこのようになります。

ただのCSS指定

また「box-shadow」は2〜4つの値で定義されますが、任意で「色」、「insetキーワード」を指定する事が出来ます。
「insetキーワード」とは内側に影をつくる事をいいます。

box-shadow:5px 10px 5px 10px rgba(0,0,0,0.3) inset;

左から、「水平方向」「垂直方向」「影のぼかし距離」「影の広がり(大きさ)」「色と透明度」「内側or外側」の値となっております。
またカンマで区切ることで、複数の影を効果としてつける事ができます。

実際にどのようになるか見た方が早いと思いますので、
例として様々なパターンを指定したボックスシャドウをご紹介します。

HTML

<div id="test06">テスト6</div>
<div id="test07">テスト7</div>
<div id="test08">テスト8</div>
<div id="test09">テスト9</div>

CSS

#test06 {
	box-shadow:5px 10px;
}
#test07 {
	box-shadow:5px 10px 5px 10px;
}
#test08 {
	box-shadow:5px 10px 5px 10px rgba(0,0,0,0.3) inset;
}
#test09 {
	box-shadow:5px 10px 5px 10px rgba(0,0,0,0.3) inset,
10px 20px 5px red;
}
ただのCSS指定

デモページ

テキストに影

もちろんテキストにも影をつける事ができます!

  • テスト10〜11

使用プロパティは「text-shadow」

値は上記で紹介した「box-shadow」をほぼ同じなので、省略致します!
※補足情報として、値はマイナスでもオーケーです!

HTML

<p id="test10">テスト10</p>
<p id="test11">テスト11</p>

CSS

#test10 {
	text-shadow:3px 3px 3px red;
}
#test11 {
	text-shadow:5px 5px 3px red,
-3px -3px 3px blue;
}
ただのCSS指定

デモページ

線形グラデーション(円形グラデーション)

グラデーションについて説明致します!

  • テスト12〜15

プロパティは「background:linear-gradient」を使用します。
下記ご覧下さい。

background:linear-gradient(red,blue);

上記指定してあげると、上から下にかけて、赤から青にグラデーションするbackgroundをつける事が出来ます。
※グラデーションはまだ対応していないブラウザも多いので、実際に指定する場合はベンダープレフィックスを用いて複数書いて上げましょう。

ただのCSS指定

基本的には開始と終わりの2色を指定することが多いのですが、中間色を指定することも出来ます。
そしてその割合も指定可能(%でもpxでも)

background:linear-gradient(red 20%,blue 50%,yellow 70%);
ただのCSS指定

またグラデーションの開始位置、そして線形グラデーションではなく円形グラデーションをかけることも出来ます。
それぞれ適応したものをご紹介致しますので、
違いを比べて頂ければと思います。

HTML

<div id="test12">テスト12</div>
<div id="test13">テスト13</div>
<div id="test14">テスト14</div>
<div id="test15">テスト15</div>

CSS

#test12 {
	background:-webkit-linear-gradient(red,blue);
	background:linear-gradient(red,blue);
}
#test13 {
	background:-webkit-linear-gradient(red 20%,blue 50%,yellow 70%);
	background:linear-gradient(red 20%,blue 50%,yellow 70%);
}
#test14 {
	background:-webkit-linear-gradient(bottom left,red,blue,yellow);
	background:linear-gradient(bottom left,red,blue,yellow);
}
#test15 {
	background:-webkit-radial-gradient(red,blue);
	background:radial-gradient(red,blue);
}
ただのCSS指定

デモページ

だんだん頭がいっぱいになってきましたか!?
もう少しで終わりですので、がんばりましょう!

変形

次は変形についてご説明致します!

  • テスト16〜19

使用プロパティは「transform」
これで、大きさや移動、回転等の指定をしていきます。
また起点の位置を示す「transform-origin」というプロパティもあります。

まずは大きさを変化させます。

transform-origin:top left;
transform:scale(1.2,1.5);

まずは大きくし始める起点を左上に固定しています。
そして、x方向に1.2倍、y方向に1.5倍大きくしております。

移動、回転、傾斜につきましても、
実際のデモを見てご確認して頂ければと思います。

HTML

<div id="test16">テスト16</div>
<div id="test17">テスト17</div>
<div id="test18">テスト18</div>
<div id="test19">テスト19</div>

CSS

#test16 {
	-webkit-transform-origin:top left;
	-webkit-transform:scale(1.2,1.5);
	transform-origin:top left;
	transform:scale(1.2,1.5);
}
#test17 {
	-webkit-transform:translate(10px, -20px);
	transform:translate(10px, -20px);
}
#test18 {
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}
#test19 {
	-webkit-transform:skew(30deg, 20deg);
	transform:skew(30deg, 20deg);
}
ただのCSS指定

デモページ

アニメーション

いよいよ最後のアニメーションの説明をさせて頂きます!

  • テスト20〜22

アニメーションにはたくさんのプロパティが存在しております。
(こちらも実際はベンダープレフィックスを使用して制作してください。)

・transition-property:all;(対象になるもの)
・transition-duration:1s;(アニメーションにかかる時間)
・transition-timing-function:ease;
linear(一定),ease(なめらか),ease-in(最初だけなめらか),ease-out(後半なめらか),ease-in-out(最初と後半なめらか)
・transition-delay:0.3s;(処理を遅らせる)

以上の4つから構成させれていますが、これらを一つにまとめることが出来ます。

transition:all 1s ease 0.3s;

順位に決まりはありませんが、最初に出て来た数字が「duration(アニメーションにかかる時間)」となっております。

実際にホバー時に上記アニメーションを仕掛けたデモを確認してみて下さい。

デモページ(テスト20)

ホバー時のアニメーションだが、ホバー前の元要素に書くのも一つのポイントです。

キーフレーム

ちょっと複雑になってきますが、
アニメーションの途中途中で複数の変化をつけたい場合に「キーフレーム」という要素を使用します。
こちらもたくさんの値が存在します。
一つ一つ確かめて覚えていきましょう。

・animation-name:animationFrames;(keyとなる名前)
・animation-duration:1.5s;(アニメーションにかかる時間)
・animation-timing-function:ease;(動き方)
・animation-delay:0.3s;(処理を遅らせる)
・animation-iteration-count:infinite;(何回繰り返すか infiniteは無限)
・animation-direction:normal;(normal,alternate)

一つにまとめることが出来ます。

animation:animationFrames 1.5s ease 0.3s infinite normal;

決めた名前「animationFrames」に「keyframes」を指定します。
「keyframes」とはいつ何の動きをさせるか複数の動きを指定する時に使用するものです。

@keyframes animationFrames{
 0% {height: 150px;}
 50% {height: 200px; background: red;}
 100% {height: 250px; background: blue;}
}

この場合、徐々に高さが大きくなり、背景色が変わる指定になっています。

実際に動いているものを見ないと感覚が掴めないと思いますので、
下記をご覧下さい。

HTML

<div id="test21">テスト21<br>normal</div>
<div id="test22">テスト22<br>alternate</div>

CSS

#test21:hover {
	cursor:pointer;
	-webkit-animation:animationFrames 1.5s ease 0.3s infinite normal;
	animation:animationFrames 1.5s ease 0.3s infinite normal;
}
@-webkit-keyframes animationFrames{
 0% {height: 150px;}
 50% {height: 200px; background: red;}
 100% {height: 250px; background: blue;}
}
@keyframes animationFrames{
 0% {height: 150px;}
 50% {height: 200px; background: red;}
 100% {height: 250px; background: blue;}
}
#test22:hover {
	cursor:pointer;
	-webkit-animation:animationFrames2 1.5s ease 0.3s infinite alternate;
	animation:animationFrames2 1.5s ease 0.3s infinite alternate;
}
@-webkit-keyframes animationFrames2{
 0% {height: 150px;}
 50% {height: 200px; background: red;}
 100% {height: 250px; background: blue;}
}
@keyframes animationFrames2{
 0% {height: 150px;}
 50% {height: 200px; background: red;}
 100% {height: 250px; background: blue;}
}

ホバーするとアニメーションが動き出します!

デモページ

まとめ

いかがでしたでしょうか?
CSS3を勉強したい人の為の初心者向け入門講座でした。

スマートフォンではもうガリガリCSS3を使えますし、憎っくきIEさんもどんどんバージョンアップして、多くのプロパティに対応しております。
PCでガリガリとCSS3を使う日ももう間近でしょう。
今のうちに復習、勉強してすんなりと使えるようになりましょう!

色々説明足らずの部分、分かりにくい部分沢山あるかと思いますが、
実際に手を動かして、ブラウザで動きを確認して、楽しく勉強してもらえればと思います。

rss登録
このエントリーをはてなブックマークに追加