2-02CSSを使った自由な表現
前回に引き続き、HTMLとCSSを使って、複雑な装飾やお問い合わせフォームの作り方を学んでいきたいと思います。
今回はCSSを使って、より自由で複雑な表現にチャレンジしてみましょう。
今回は以下のような新しいCSSの使い方を覚えていきましょう。
- position
- transform
- transition
- animation
練習用HTMLファイルのダウンロード
今回利用する練習用のHTMLファイルです。
中には以下のものが入っています
- index.html
- style.css
- img
- pic1.jpg
- loading.png
こちらをダウンロードしてホーム＞developフォルダに保存し、これを編集して練習しましょう。
座標で要素の位置を指定する（position）
これまでmarginやpaddingで余白を付けたり、display:flexやfloatで要素を横並びにすることで、レイアウトの調整を行ってきました。これらのCSSプロパティでもレイアウトを調整することは十分可能ですが、より自由に要素を配置するにはpositionというプロパティがあります。
positionはpxで座標を指定することで自由に要素の配置を指定することができます。
見本のindex.htmlを見てみましょう。position-wrapper（赤）とposition-inner（黄）という2つの要素を用意しています。 position-wrapperは横幅500px・高さ500px、position-innerは横幅300px・高さ300pxを指定しています。
まずはposition-wrapperにCSSでposition:relative;を追加しましょう。
.position-wrapper{
width: 500px;
height: 500px;
background: red;
/* ここからpositionプロパティを追加 */
position: relative;
}
次にposition-innerにposition:absolute;を追加します。
.position-inner{
width: 100px;
height: 100px;
background: yellow;
/* ここからpositionプロパティを追加 */
position: absolute;
}
これでpositionで自由に配置する準備ができました。position-innerの配置を、上から100px・左から100px動かしてみましょう。
.position-inner{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
top: 100px;
left: 100px;
}
これでindex.htmlを確認してみます。
positionの座標はtop・bottom・left・rightの4方向から指定することができます。入力された値に合わせて移動が起きます。topを100pxにすると、上から100px要素が移動します。他の方向も同様です。
positionで指定したrelativeは相対位置、absoluteは絶対位置という意味になります。
relativeは元の位置からどれぐらい移動するかを指定できます。absoluteはウインドウもしくは親要素からどれぐらい移動するかを指定できます。
試しにposition-wrapperのpositionをコメントアウト、position-innerのtopを0にしてみましょう。
position-innerが上にはみ出てしまいました。これはposition-innerがsection（このsectionにposition:relativeが設定されている）から測った位置に表示されているためです。任意の親要素から測った位置に指定するには、親要素にposition-relativeをつけておく必要があります。
少しHTMLとCSSを書き換えて、子要素を3つにしてみましょう。
<div class="position-wrapper">
<div class="position-inner1"></div>
<div class="position-inner2"></div>
<div class="position-inner3"></div>
</div>
.position-inner1,
.position-inner2,
.position-inner3{
width: 100px;
height: 100px;
}
.position-inner1{
background: yellow;
}
.position-inner2{
background: blue;
}
.position-inner3{
background: green;
}
この3つの子要素にそれぞれバラバラの値を指定します。
.position-inner1,
.position-inner2,
.position-inner3{
width: 100px;
height: 100px;
position: absolute;
}
.position-inner1{
background: yellow;
top: 100px;
left: 100px;
}
.position-inner2{
background: blue;
top: 150px;
left: 150px;
}
.position-inner3{
background: green;
top: 200px;
left: 200px;
}
一部の要素が重なっています。要素が重なった場合、あとから書かれた要素のほうが上に重なって表示されます。
この重なり順を指定することもできます。z-indexというプロパティを利用します。以下のように指定してみましょう。
.position-inner1{
background: yellow;
top: 100px;
left: 100px;
z-index: 3;
}
.position-inner2{
background: blue;
top: 150px;
left: 150px;
z-index: 2;
}
.position-inner3{
background: green;
top: 200px;
left: 200px;
z-index: 1;
}
z-indexは数値が小さい方が下に、大きいほうが上に重なっていきます。
positionは文字や画像を重ねることもできます。
試しに以下の見本のように、背景・画像・テキストの３つを重ねてみましょう。
<div class="position-banner">
<div class="position-image"><img src="img/pic1.jpg" width="100" height="100"></div>
<div class="position-text">Hello, World!</div>
</div>
回転・移動・傾斜・縮尺
HTML要素はCSSで変形をさせることができます。変形には回転・移動・傾斜・縮尺と4つがあります。
回転（rotete）
要素を回転させるにはrotateを使います。以下の内容をCSSに追加してみましょう。
.transform-rotate{
width: 150px;
height: 150px;
margin: auto;
background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);
/* ここからrotateを追加 */
transform: rotate(45deg);
}
通常では右回転しますが、反対に回転したい場合はマイナスで値を指定すれば可能です。
移動（translate）
要素を移動させるにはtranslateを使います。以下の内容をCSSに追加してみましょう。
.transform-rotate{
width: 150px;
height: 150px;
margin: auto;
background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);
/* ここからtranslateを追加 */
transform: translate(100px,50px);
}
図：translateでX方向に100px、Y方向に50px移動
これでX方向に100px、Y方向に50px移動しました。
X方向だけ動かしたい場合はtranslateX、Y方向だけに動かしたい場合はtranslateYで指定することもできます。
傾斜（skew）
傾斜というのはななめに傾けることです。
要素を傾斜させるにはskewを使います。以下の内容をCSSに追加してみましょう。
.transform-skew{
width: 150px;
height: 150px;
margin: auto;
background: linear-gradient(to right, #ffe000, #799f0c);
/* ここからskewを追加 */
transform: skew(20deg,30deg);
}
これでX方向に20度、Y方向に30度傾斜しました。
X方向だけ動かしたい場合はskewX、Y方向だけに動かしたい場合はskewYで指定することもできます。
縮尺（scale）
縮尺とは要素を拡大・縮小することです。
要素の縮尺を変更するにはscaleを使います。以下の内容をCSSに追加してみましょう。
.transform-scale{
width: 150px;
height: 150px;
margin: auto;
background: linear-gradient(to right, #654ea3, #eaafc8);
/* ここからscaleを追加 */
transform: scale(2,2);
}
元のサイズから2倍のサイズになりました。さらに以下の内容に変更してみましょう。
.transform-scale{
width: 150px;
height: 150px;
margin: auto;
background: linear-gradient(to right, #654ea3, #eaafc8);
/* ここからscaleを追加 */
transform: scale(0.5,0.5);
}
逆に半分のサイズになりました。
scaleは指定した値の倍数で拡大・縮小のサイズを指定することができます。
変形の原点を指定する
変形の原点となる座標を指定することができます。通常では高さ・横幅の中央の部分が原点になって、そこから変形が起こるようになっています。
この原点を指定するのがtransform-originです。指定の値は水平方向がleft・center・right、垂直方向がtop・center・bottom、もしくはそれぞれ左上からのpxで指定することができます。
例えば以下のように指定してみましょう。
.transform-origin{
transform-origin: left top;
transform: scale(0.5,0.5);
}
まとめて指定する
これまで出てきたrotate・translate・skew・scaleの値を、まとめて指定することができます。このまとめて指定にはmatrixを使います。
matrixの書き方
transform: matrix( a , b , c , d , e , f );
a：水平方向のscale b：垂直方向のskew c：水平方向のskew d：垂直方向のscale e：水平方向のtranslate f：垂直方向のtranslate
ここで注意しなければならないのが、b・c（skew）については角度ではなく率で指定すること、translateもpxではなく数値だけで指定するということです。
以下の内容を記述してみましょう。
.transform-matrix {
width: 150px;
height: 150px;
margin: auto;
background: linear-gradient(to right, #ff0099, #493240);
/* ここからtransformを追加 */
transform: matrix(1.5,0,-0.2,1.5,30,30);
}
状態を変化させる
前回の「ボタンを使ってみよう」でも出てきたtransitionです。今回はtransformと組み合わせて使ってみましょう。
.transition{
width: 200px;
line-height: 50px;
border-radius: 5px;
background: skyblue;
color: #fff;
text-align: center;
margin: auto;
/* ここからtransitionを追加 */
transition: 300ms;
}
.transition:hover{
transform: scale(1.2,1.2);
}
ボタン
transitionとtransformを使うと、ユーザーの動きに合わせてアニメーションをさせることができます。
アニメーションを作る
ここで紹介するアニメーションはCSS Transitionとは別で、CSS Animationというものです。CSS Animationはキーフレームアニメーションといって、アニメーションの開始から終了までの特定の地点ごとにプロパティを決められるものです。言葉で説明するのは難しいので、実際にどんなものか見てみましょう。
例えばこのようなイラストがあったとします。
これをキーフレームアニメーションで、くるくると回転させてみます。
Webサイトのローディング中に表示されるアイコンなどはこうやって実装しています。
実際のコードを見てみましょう。
.loading{
width: 50px;
height: 50px;
margin: 30px auto;
/* ここからanimationを追加 */
animation: loading-animation 1s linear infinite;
}
@keyframes loading-animation {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
まずはanimationというプロパティで、アニメーションの名称・長さ・タイミング・再生回数を指定しています。今回の場合は以下のようになっています。
| プロパティ | 値 |
|---|---|
| 名称 | loading-animation |
| 長さ | 1s |
| タイミング | linear |
| 再生回数 | infinite |
タイミングのlinearというのは、アニメーションを一定の速度で再生するという意味です。他にもease（開始と完了をなめらかにする）、ease-in（ゆっくり開始する）、ease-out（ゆっくり終了する）、ease-in-out（ゆっくりはじまって、ゆっくり終わる）などがあります。
再生回数は1,2,3などの数字で指定するか、ずっと再生し続けるinfiniteで指定します。
ここで指定した名称に基づいて、今度はキーフレームを書いていきます。@keyframesという部分です。今回は0〜100%だけで指定していますが、これをさらに細かく区切ってアニメーションを作ることができます。
これはCSS Animationだけで文字や画像をブルブルさせる例です。
.buruburu-text {
text-align: center;
/* ここからanimationを追加 */
animation: buruburu-animation .1s infinite;
}
@keyframes buruburu-animation {
0% {transform: translate(0px, 0px)}
25% {transform: translate(3px, 3px)}
50% {transform: translate(0px, 3px)}
75% {transform: translate(3px, 0px)}
100% {transform: translate(0px, 0px)}
}
.1sというのは0.1秒のことです。CSSでは1未満の数値を記述するとき、ゼロを省略することができます。テキストがブルブルします
それではここまで勉強したCSSを自由に組み合わせて、面白いボタンや飾りを考えてみましょう。
CSSプロパティ
| プロパティ | 値 | 説明 |
|---|---|---|
| position | relative・absolute | 要素を絶対位置・相対位置などに指定する |
| top・left・right・bottom | pxで指定 | 要素の上下左右の位置を指定する |
| transform | translateなど | 要素を変形させる |
| transition | durationなど | 状態をアニメーションさせて変化させる |
| animation | キーフレームアニメーションを作成する |