こんにちは、SD部の平野です。
今回は、CSSで遊ぼう「CSSで絵を描き、さらに動かしてみよう」をテーマに
- 絵を描く&動かす為に抑えておきたいCSS
- ドットっぽい絵を描いてみよう
の2点をご紹介させて頂きます。
絵を描く&動かす為に抑えておきたいCSS
今回は以下3つのCSSをイメージとして理解しましょう。
- box-shadow
- transform
- animation
では一つずつ簡単に説明します。
box-shadow
その名のとおり、ボックスに1つ以上の影をつけるプロパティです。
HTML
<body> <div class="box1">パターン1</div> <div class="box2">パターン2</div> <div class="box3">パターン3</div> </body>
CSS
/*細かい設定は省略しています*/
.box1 {
box-shadow: 10px 10px 10px 10px #000;
}
.box2 {
box-shadow: 0px -10px 5px 5px #000;
}
.box3 {
box-shadow: 5px 5px 10px 10px #000 inset;
}
box-shadow:
左の値から、水平方向、垂直方向、ぼかし、広がり、色、影を内側に表示したい時はinsetをつけます。
また、1つ以上の影??と疑問に思ったかも知れませんが、カンマ区切りで複数の影をつけることが出来ます。
CSS
/*細かい設定は省略しています*/
.box1 {
box-shadow:
10px 10px 10px 10px #000,
30px 30px 10px 10px #666;
}
.box2 {
box-shadow:
0px 10px 5px 5px #000,
60px -10px 5px 5px #666;
}
transform
要素を変形します。
指定できる値は以下になります。
- translate
- scale
- rotate
- skew
HTML
<body> <div class="box1">translate</div> <div class="box2">scale</div> <div class="box3">rotate</div> <div class="box4">skew</div> </body>
CSS
/*細かい設定は省略しています*/
.box1 {
transform: translate(-50px, 50px);
}
.box2 {
transform: scale(0.5, 1.2);
}
.box3 {
transform: rotate(-25deg);
}
.box4 {
transform: skew(20deg, 20deg);
}
各モジュールの意味は
translate:(X方向の移動距離, Y方向の移動距離)
グレーの部分から左へ50px、下へ50px移動しています。
scale:(X方向の縮尺比率, Y方向の縮尺比率)
横が縮み、縦が伸びました。
rotate:(回転角度)
左に25度回転しました。
skew:(X軸の傾斜角度, Y軸の傾斜角度)
X軸に沿って20、Y軸に沿って20傾斜変形しました。
animation
要素にキーフレームアニメーションを適用する為に指定するプロパティ。
animationを使うには、
- animation-name(アニメーション名を指定)
- animation-duration(1回分のアニメーションの時間の長さを指定)
- animation-timing-function(アニメーションに加速曲線を指定)
- animation-delay(アニメーションをいつ実行するか遅延時間を指定)
- animation-iteration-count(アニメーションの繰り返し回数を指定)
- animation-direction(アニメーションの繰り返し時、偶数回は逆方向にアニメーションをするかを指定)
- animation-fill-mode(アニメーションの実行前や実行後に、指定したスタイルを適用するかを指定)
- @keyframes(アニメーションの始点を0%、終点を100%とし、通過点を明示し、アニメーションの流れを制御する)
を知っておくとよいと思います。
今回これらの詳細は割愛させていただきますが、以下をご覧下さい。
よくある例ですが、このようなことが出来ます。
HTML
<div class="anime01">勝手に動くよ</div> <div class="anime02">ホバーすると動くよ</div>
CSS
/*細かい設定は省略しています*/
.anime01,
.anime02 {
width: 100px;
height: 100px;
}
.anime02 {
margin-top: 20px;
background: #808080;
}
.anime01 {
animation: anime01 5s ease infinite alternate;
}
.anime02:hover {
animation: anime02 3s ease-in infinite;
}
@keyframes anime01 {
0% {width: 100px; height: 100px; background: #F00;}
100% {width: 200px; height: 100px; background: #FF0;}
}
@keyframes anime02 {
0% {width: 100px; height: 100px; background: #808080;}
100% {width: 200px; height: 100px; background: #C0C0C0;}
}
See the Pen Practice by s-ta/w (@w_s-ta) on CodePen.
.anime01のanimationを説明しますと、
@keyframes anime01を
5秒間で
easeという進行で
無限に
奇数回では普通方向の再生、偶数回では逆方向の再生で繰り返す
となります。
.anime02のanimationは、
@keyframes anime02を
hover時に
3秒間で
ease-inという進行で
無限に繰り返す
となります。
かなりざっくりな説明ですが、どんなモノかイメージがもてれば良いかと思います。
ドットっぽい絵を描いてみよう
擬似要素
その前にもう一つ抑えておきたい便利なCSSがあります。
それは擬似要素です。
まずは以下をご覧下さい。
HTML
<body> 今日は良い天気。 昨日、空気飲み込んでたらちょっと浮いたよ☆ 恋人なんていらない。 </body>
CSS
/*細かい設定は省略しています*/
p:before {
margin-right:10px;
content: "村人:";
}
p:after {
content: "...なーんてな、ウソだよ☆";
}
pの前後に:before,:afterのcontentに入れている文字が現れました。
:before,:afterを設定することで、擬似要素が作られます。(html出力されるわけではない)
contentは必須なので、特に設定の必要がなければ、
content="";
ちなみにCSS3だと::before,::afterと書いて擬似クラスとの見分けができます。
※擬似クラスとは、:hoverや:visitedなどのことです。
ドットっぽい絵を描く
さて、ドットっぽい絵を描いてみましょう。
といっても、描き方を説明してるサイトはいっぱいあるでしょうし、
ざっくり説明して、それを参考に試行錯誤するほうがアイデアが生まれると思いますので、
自分なりの簡単な考え方とポイントを紹介しますね。
HTML
<body> <div class="anime"></div> </body>
CSS
/*細かい設定は省略しています*/
.anime {
position: relative;
width: 250px;
height: 250px;
}
.anime:before,
.anime:after {
position: absolute;
content: "";
display: block;
width: 10px;
height: 10px;
}
.anime:before {
box-shadow: 10px 0 #F00;
}
.anime:after {
box-shadow: 10px 20px #808080;
}
説明しますと
.animeの:beforeと:after擬似要素を作りました。
そして、position: relative;を基点とし
:beforeは左から10px、上から0pxの位置に赤い影
:afterは左から10px、上から20pxの位置に灰色の影
を表示しました。
するとこうなります↓
エクセルや方眼紙をイメージするとわかりやすいと思います。
では、このbox-shadowの影を使い絵を描いてみましょう。
CSS
/*細かい設定は省略しています*/
.anime:before {
box-shadow:
30px 0 #F00,
40px 0 #F00,
50px 0 #F00,
60px 0 #F00,
70px 0 #F00,
20px 10px #F00,
80px 10px #F00,
10px 20px #F00,
40px 20px #F00,
50px 20px #F00,
60px 20px #F00,
90px 20px #F00,
0 30px #F00,
60px 30px #F00,
100px 30px #F00,
0 40px #F00,
20px 40px #F00,
30px 40px #F00,
50px 40px #F00,
70px 40px #F00,
80px 40px #F00,
100px 40px #F00,
0px 50px #F00,
40px 50px #F00,
100px 50px #F00,
0px 60px #F00,
40px 60px #F00,
50px 60px #F00,
60px 60px #F00,
100px 60px #F00,
0px 70px #F00,
30px 70px #F00,
70px 70px #F00,
100px 70px #F00,
10px 80px #F00,
40px 80px #F00,
50px 80px #F00,
60px 80px #F00,
90px 80px #F00,
20px 90px #F00,
80px 90px #F00,
30px 100px #F00,
40px 100px #F00,
50px 100px #F00,
60px 100px #F00,
70px 100px #F00;
}
.anime:after {
box-shadow:
120px 10px #808080,
130px 10px #808080,
140px 10px #808080,
150px 10px #808080,
220px 10px #808080,
120px 20px #808080,
150px 20px #808080,
200px 20px #808080,
210px 20px #808080,
150px 30px #808080,
170px 30px #808080,
180px 30px #808080,
210px 30px #808080,
130px 40px #808080,
140px 40px #808080,
210px 40px #808080;
}
長いです。。。
これをブラウザで見ると↓
オサムさんがワーイと言っていますね。
※オサムさん：中学生の時友達と作ったおじさん。
これはまだドットっぽくないですね。
ドットっぽくするポイントです。
↓のようにCSSを変更してみましょう。
ポイント
- .anime:before,.anime:afterのwidthとheightを適度に小さくする
- .anime:before,.anime:afterのbox-shadowにぼかしを加える
CSS
/*細かい設定は省略しています*/
body {
background: #000;
}
.anime {
position: relative;
width: 250px;
height: 250px;
}
/*widthとheightを適度に小さくする↓*/
.anime:before,
.anime:after {
position: absolute;
content: "";
display: block;
width: 8px;
height: 8px;
}
/*box-shadowにぼかしを加える↓*/
.anime:before {
box-shadow:
30px 0 1px #F00,
/*長いので省略*/
}
.anime:after {
box-shadow:
120px 10px 1px #808080,
/*長いので省略*/
}
すると・・・
こっこれは!?わぁードットっぽい。
こんな感じで出来たものにアニメーションをつけたりして遊ぶわけです。
/*細かい設定は省略しています*/
.anime:before {
animation: face 1s ease-in infinite alternate;
transform-origin:50px 100px;
}
.anime:after {
animation: waai 1s ease-in infinite alternate;
transform-origin:165px 40px;
}
@keyframes face {
0% {transform: scale(1,1);}
100% {transform: scale(1.2,0.8);}
}
@keyframes waai {
0% {transform: scale(1,1);}
100% {transform: scale(0.8,1.2);}
}
See the Pen osamu_san by s-ta/w (@w_s-ta) on CodePen.
ちなみに以下のようにhover時の指定も追加できるので、出来ることはたくさんあります。
CSS
/*細かい設定は省略しています*/
.anime:hover:before {
/*hover時にやりたいこと*/
}
.anime:hover:after {
/*hover時にやりたいこと*/
}
アニメーション作ってみました
せっかくなので、最後に今回僕が作ったアニメーションをご紹介します。
hoverした時に右下に表示されるRERUNを押せばアニメーションが始まります。
※CSSの量が多いのでCSSタブを押すと切り替わるまで時間がかかるかも知れませんのでご注意を。
See the Pen c_01 by s-ta/w (@w_s-ta) on CodePen.
簡単にですがどんな作業をしたか載せておきます。
まず、box-shadowを並べました。今回は何も考えず80×80で作ろうと思いました。
6400個のドットになります。これを見た時ただただ後悔しました。
もういやだ。なんで6400にしてしまったんだ。
ふぅーふぅ。あれ、なんでだろ苦しい。逃げたい。
もうここらへんにきたら、手がとまり母親の写真を見つめていました。
とまぁ、こんな感じで制作を進め、なんとか完成させたわけです。
ちゃんと計画をたてないとダメだなと思いました。
自分なりの良い進め方を発見してくださいね。
おわりに
凄く簡単に説明してしまいましたが、調整が必要な箇所や気になる箇所もあると思います。
今回の書き方が全てではありませんし、思うがままに書いてみてください。
他にも表現の方法はあるかと思いますが、あくまで一つの方法です。
このブログの内容が難しいと感じたら、ChromeでキーボードのF12を叩いて、各CSSの値を変更しながら、
なんでこうなるのか考えるとすぐ身につくと思います。
今回の内容は実践的ではなく面倒で効率の悪い感じがしますよね・・・
box-shadow多すぎです。(ちなみに、box-shadowでモナリザを描くすんごい人がいることに最近驚きました。)
ですが、そんなパワープレイで押し切るやり方も面白いものです。
一度、大変なやり方を知れば新たなアイデアや改善に繋がるのではないでしょうか。
知恵を絞れば、もっと効率よく動的に出来ることもあるでしょうが、僕はこういった地道なアナログ的な考えや、
小さな知識を角度を変えて新たな使い道を発見することに喜びを感じます。
長々と読んでいただきありがとうございましたー。
※今回はChromeを対象に制作しております。
また、個人で遊ぶには良いですが、box-shadowの使いすぎや、動きをつける等、CPU,GPUなど説明は割愛しますが、
場合によりブラウザが重くなる原因になりますので、気をつけてください。
あくまで個人で楽しくお絵かきをして、もし業務で使いたいと思った時はどうすれば良いかを考えることも良い成長に繋がりますよね!!
次回予告？？
次回、またブログを書く機会があれば、僕なりに小さな知識からひねり作り上げたモノをご紹介します。
↓次回あるなら予告↓
今回の知識の応用と新たなテクニックを加えて作ります。
えぇっ！！目も動くのっ！？
次回
CSSで目玉描こうぜっ！の巻
それではみなさん
良きマニアックな旅をーーーー
追記
もし間違いがあった時は、僕をいじめず、間違いを発見できた時は成長した瞬間ですから、その成長を噛みしめましょう。
こういった遊び方があるんだぁと受け取って頂けたら凄くうれしいです。
もし勉強する際には、ブラウザの対応状況(ベンダープレフィックス)や、各タグについて必ず一度調べて使ってくださいね！
目指せoneエレメント!!
