HTML / CSS 入門

HTML / CSS入門編（９）（CSS を使ってぐりぐり動かす）

パソコンを使う女性

WordPress で記事を書いていく中で、HTML / CSS も一緒に使ってみたい方へ！

【第９回】では、CSS を使って画像を動かす、アニメーションするなど、面白いことをいろいろやってみます。

CSS を使って画像を動かすサンプル

画像を左から右に動かしてみます。

走る人のシルエット

画像を CSS で左から右に 400ピクセル動かしています。再生回数を無限にしています。

アニメーションを利用することで、次のような演出も可能になります。


斜め掛けバッグの写真

【オシャレに着こなす大人のカジュアル】


スタイリッシュなあなたに合わせる、ふわっと優しさを見せつつも男を感じさせるファッション。ワンポイントの決め手にショルダーでシックにキメるコントラストがたまらない。


【シックに着こなす大人のカジュアル】


ダンディなあなたに合わせる、大人カジュアル、遊びすぎない色合いにワンポイントでシックに決めるブラックショルダーのコントラストがたまらない。


斜め掛けバッグの写真

※ スクロール等で、要素が画面表示されてからアニメーションを開始させるには別途 JavaScript での実装が必要になります。

画像をフェードイン表示する、画像をズームイン表示するなどもアニメーションの一つです。

走る人のシルエット
通勤する人のシルエット
小人のシルエット

それでは、WordPress 上で、実際に簡単なアニメーションを実現してみましょう！

CSS を使ってアニメーションさせる方法

WordPress で画像をアニメーションさせる場合は、画像にクラスを指定して、CSS でアニメーションを指定します。

■ Step.1 画像に クラス名 を指定する

画像にクラス名を付けるイメージ

「記事編集画面」で、画像・イメージのプロパティで「高度な設定」の中にある「追加CSSクラス」にクラス名を記載します。

ここでは仮に「myTestImage」を記入しています。

■ Step.2 CSS を記載する

CSSを記入するイメージ

「記事編集画」面で、「カスタムHTMLブロック」に CSS のコードを貼り付けます。

以下のサンプルコードを貼ってください。

<style>
.myTestImage{
    animation: name_animTest 3s infinite;
}

@keyframes name_animTest {
    0% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(400px);
    }
}
</style>

■ Step.3 動かしてみる

プレビュー画面で動かしてみましょう。

次の画像のように、左から右に動いたら成功です。

イノシシのシルエット

楽しいですね！

アニメーション CSS の説明

■ 「animation」プロパティ

動かしたいイメージに「myTestImage」クラス名を付けました。このクラスに対して、「animation」プロパティを設定しています。

.myTestImage{
  animation: name_animTest 3s infinite;
}

「animation」プロパティで「アニメーションをすること」と指定しています。

値の意味は次の通りです。

name_animTest


どのようなアニメーション（変化）をさせるかを設定するために、名前を付けます。
ここでは「name_animTest」の名前を付けていますが、「test1」でも「sample_anima」でも任意の文字列を付けることができます。
※この文字列は、後ほど使います。
3s


アニメーション（変化）させる秒数を指定しています。「3s」で３秒です。
開始から終了までの時間を指定します。

infinite


「アニメーション」を無限に繰り返す指定です。
指定しない場合、アニメーションは１回で止まります。

■ アニメーション（変化）の指定「@keyframes」

どのようなアニメーションをするかを「@keyframes」で指定します。

@keyframes name_animTest {
    0% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(400px);
    }
}

「＠keyframes」でアニメーションの方法を指定します。「@keyframes」の後ろに、「animation」プロパティで指定した名前を記載します。

ここでは、先ほど指定した「name_animTest」を記載しています。

「0%」や「100％」は、アニメーションの開始と終了の間の「地点」を表します。

アニメーションの時間とパーセント

「0%」は開始直後、

「50％」はちょうど真ん中、

「100%」は終了時点です。

「0％」のアニメーション開始時に「transform: translateX(0px);」でＸ軸（横位置）は 0px の場所を指定し、「100%」のアニメーション終了時に「transform: translateX(400px);」 でＸ軸（横位置）は400px の場所を指定しています。

最初の「animation」プロパティで、アニメーションの時間を「3s（３秒）」と指定していますので、３秒かけて横に０pxの位置から４００pxの位置まで画像が移動します。

いろいろなアニメーションを作ってみる

CSS の部分を書き換えることで多様なアニメーションができます。いくつかサンプルを見てみましょう。

■ ズームイン

画像をズームインしながら、フェードイン（ボワっと表示）しています。

オバケのシルエット

<style>
.myTestImage {
    animation: name_animTest 3s infinite;
}

@keyframes name_animTest {
    0%, 20% {
        transform: scale(0.5);
        opacity: 0;
    }
    95% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}
</style>

「scale」は大きさを表します。「scale(0.5)」は大きさ50%、「scale(1)」は100%の大きさです。

「opacity」は透明度です。0で透明（見えない）、1で非透明（完全に見える）です。

  • 0%～20% の間は、「opacity: 0;」なので見えません。「scale(0.5);」なので、大きさは50%になっています。
  • 20%～95% の間は、「opacity: 0;」 →「opacity: 1;」 とアニメーションしますので、ぼんやり表示していきます。さらに 「scale(0.5);」 → 「scale(1);」とアニメーションしますので大きさが50％→100％に変化します。
  • 95%～100% の間でぼんやり消しています。

■ 下から現れてちょっと上下にブレる

下から現れて、上まで行ったらちょっと上下にポコポコ移動します。

蝙蝠のシルエット

<style>
.myTestImage {
    animation: name_animTest 3s infinite;
}

@keyframes name_animTest {
    0% {
        transform: translateY(140px);
        opacity: 0;
    }
    50% {
        opacity: 1;
        transform: translateY(0);
    }
    60% {
        transform: translateY(30px);
    }
    70% {
        transform: translateY(0px);
    }
    80% {
        transform: translateY(20px);
    }
    95% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
</style>

「translateY」で、Ｙ軸（縦）の位置を変えて移動させています。

■ くねくねさせてみる

ぐにょんぐにょんクネクネさせています。

お化けと家のシルエット

<style>
.myTestImage {
    animation: name_animTest 3s infinite;
}

@keyframes name_animTest {
    0% {
        transform: skew(0deg, 0deg);
    }
    10%, 60% {
        transform: skew(5deg, 5deg);
    }
    20%, 70% {
        transform: skew(-4deg, -4deg);
    }
    30%, 80% {
        transform: skew(3deg, 3deg);
    }
    40%, 90% {
        transform: skew(-2deg, -2deg);
    }
    50%, 100% {
        transform: skew(1deg, 1deg);
    }
}
</style>

「skew」で画像に角度を付けています。プラス方向とマイナス方向に交互に角度を付けることで、クネクネさせています。

まとめ

CSS では、画像などをアニメーションさせることができます。

  • 画像にクラス名を付けます
  • animation プロパティでアニメーションの時間や属性を指定します
  • Keyframesでアニメーションの動きを指定します

多様な動きで表現することができますので、記事のデザインが楽しくなりますね、

■　最初から読む

HTML入門編（１）（WordPress で HTML を使ってみよう！）

WordPress を使って記事を書いていく中で、よく聞く「HTML で記述する」ということについて漠然と理解している方もいると思います。「HTML を使うことでできること」、そして、「そもそも HTML とは何か？」から紹介し、HTML を使いこなしてさらに表現豊かな記事を書けるようになる「知識と方法」を、連載記事で初心者にもわかりやすく丁寧に紹介させていただきます。

続きを見る

WordPress のおすすめテーマ



  • SEO に強く【集客力強化】が望める
  • かっこいい（かわいい）ホームページを作りやすい
  • 初心者でも使えて、上級者になっても満足できる


本気でブログアフィリエイトを戦うなら、使うテーマは「AFFINGER」！

WordPress ブログの最上級おすすめテーマ「AFFINGER」をお試しください。



AFFINGER の紹介はこちら




AFFINGER（アフィンガー）テーマは「ここ」がすごい！【WordPress 初心者必見！】

AFFINGER テーマを使うと「オシャレなサイト」を作りやすくなります。オシャレなサイトは、ユーザーの滞在時間が増え、サイト評価があがり、サイトの露出が増えて、さらにユーザ（読者）を呼び込む好循環を実現します。WordPressのテーマ「AFFINGER」を徹底紹介します。

続きを見る

「WordPress で HTML / CSS を使う」一覧はこちらをクリック！





WordPress



AFFINGER



アフィリエイト入門



ベトナム






ブログランキング・にほんブログ村へ　　



Presented By Irojiro Haraguro .Com