自作ホームページにCSSをちょっと組み込む(まわす)
CSSもやってみたいなー
というだけでCSS一口かじっただけのあるみにの話。
自作ホームページにCSSを導入してみたい
自作ホームページを作っていて↓↓
すこしずつでも改造していけたらなーと思っているわけです
…
……と思ったら5000兆年経過していた
というわけで、なんかHTMLだけではできないような面白い演出？ができるCSSを試してみたいと思います
CSSとは
CSSは、HTMLと組み合わせて使用する言語です。 HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。 例えば、ウェブページがスクリーンに表示される際の色・サイズ・レイアウトなどの表示スタイルや、 プリンタなどの機器で印刷・出力される際の出力スタイル、 音声で読み上げられる際の再生スタイルなど、 ウェブページをどのようなスタイルで表示・出力・再生するかについて指定することができます。
http://www.htmq.com/csskihon/001.shtml より引用
簡単に言えば、ウェブページの色んな要素の、表示、出力、再生の仕方をいじくれる。
つまり「見え(聴こえ)方」を変えられるので、見栄えを良くしたり、わかりやすくするデザインができるということ
使ってみたいぜ
まあ、CSSを使ってみることの方が今回の目的ですね
手段と目的が入れ替わった瞬間である
とりあえず回してみた
カスホームページ、ものすごくどうでもいいパワーアップ pic.twitter.com/4kxkDfTgRB
— えんかあるみに (@alumini_strugg) 2018年7月15日
画像にカーソルが重なったらヨガ少年が回るようにしてみました。
触って回るが、マウスをはなしても逆回転して戻ったりしない所がこだわりです。
なんでか……
まわる pic.twitter.com/m6UNiq3EZs
— えんかあるみに (@alumini_strugg) 2018年7月15日
(GIFにしただけ)
こう、触るたびに回転するので、ユーザーが一方向に回してる感がでません？でない？
そんなかんじです（）
実装内容
参考にしたサイトはここ
回転について↓↓
回転という値を扱うのは
transform: rotate()
でした。()内に値を入れると回転し、回転軸もX,Y,Z軸と指定できる。
重要なのは、カーソルが重なった時を検知する
:hover
だろうか
これは「疑似クラス」というらしく、セレクタ要素の特定の状態に対して指定ができるというものみたいです。
.rote_target{
}
回転の対象になるrote_targetクラスをつくる。
特に指定することもないので、空白。
.rote_target:hover
{
transform: rotateZ(360deg);
transition: .3s;
}
次に、「要素の上にマウスがある状態」ときの、rote_targetクラスを指定するために、
:hoverがついたクラスを改めて記述します。
ここで、360°回転させる記述と、それに0.3秒かかるという記述をしました。
transition
は他のプロパティの値変化に対して、変化するのにかかる時間を与えるものです。
transition 1sとすれば一秒かけて値変化を連続的に行わせてくれるので、結果的にアニメーションに見えるということです。
わりとアニメーション的な表現にとって重要やんけ！！サラッと流すところだった。
あとはhtml内で、
<img src="ヨガの画像.jpg" alt="ヨガポーズ"height="300" class="rote_target">
なんてふうにimgにclass属性rote_targetを与えておくと、
適用させた画像が回転してくれるわけですよ。
ちなみに、
.rote_target{
transition: .3s;
}
.rote_target:hover
{
transform: rotateZ(360deg);
}
のように、回転前が空白になっているrote_targetクラスに0.3秒かかるということだけ書いておくと
回転が戻るようになります。
これは、hover状態の有無にかかわらず、rote_targetの方に時間変化の情報が残っているために、 hoverすると360°、hoverしてないと0°（記述がないため初期値）というプロパティの値に対して、時間変化することができるためです。
どっちに対しても最大時間0.3秒で行き来しようとするため、目的の回転角を目指して右往左往できるということらしい。
伝われ～
それに対して今回採用している:hoverのクラスだけに時間変化の情報を記述するとどうなるかというと、
hover中は「0.3秒かかる」という情報があるのでその通りに遷移しようとするが、 hoverを外れると、元のクラスには時間変化に関する記述がないために瞬時に変化したプロパティ＝元の画像の角度（0°）に戻る事になる。
なので戻るアニメーションは起こらないということになる。
というわけです。
回転が戻るのは戻るので面白いのだけど、”一方向にクルクル回す”ということにこだわりたかったんですよね。
今回のケースは、瞬時に戻る0°と、回転のゴールである360°が同じ見た目で、回転時間が短いので、回転中に離してもあまり違和感ないかと思います。
まとめ
というわけでCSSでいらすとや君を回せました。
なんの意味もない（）
htmlもcssも正直ロクな知識があったわけではないですが、自分なりにCSSの挙動に対して理解しながら実装できたかなと思います。
cssで書いたクラスは、htmlの各成分の要素として適応が効くので、一度つくれば色々なものにつけられるのがよさそうです。
レイアウトに関する記述はCSS側に任せて、必要なものを、必要な所に適応していく。
そんな感じでやっていけばいいんですかね。
触れたら回転するCSSはほかのところにも付けられそうなので、ボタンとかに使えるかな？
簡単に画像にちょっとしたアニメーションを持たせられるのはいいなあ
ということでちょくちょくへなちょこホームページをいじっていけたらと思います。
