講座2

文字を震えさせるHTMLとCSSを使ってする方法

  • Jo Masafumi
  • Jo Masafumi
学習状況をツイッターでつぶやく

次は、文字を震えさせるHTMLとCSSを使ってする方法をします。

文字を震えさせるHTMLとCSSを使ってする方法

ワードプレスの管理画面を開きます。

左上の「投稿」を押します。

左上の「新規追加」を押します。

左上の「タイトルを追加」に「文字を震えさせるHTMLとCSSを使ってする方法」と入力します。

右側の「テキスト」を押します。

テキストのところにコードを貼り付けます。

テキストのところに下記のコードをコピーして、貼り付けます。

<span class="furueru-mozi1">震える文字（基本）</span>

貼り付けました。

右側の「公開」を押します。

「OK」を押します。

右上の「変更をプレビュー」を押します。

「文字を震えさせるHTMLとCSSを使ってする方法」の
文字が震えることを確認します。

学習状況をツイッターでつぶやく
↑じょうまさふみに学習状況を報告すると喜びます(^^)/

HTMLとCSSの説明

CSS

/*震える文字（基本）*/
.furueru-mozi1 {
  display: inline-block; /*位置*/
  text-decoration: none; /*文字の装飾なし*/
  animation: furueru-mozi1a .1s  infinite; /*震える時間*/
}
@keyframes furueru-mozi1a {
  0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
  25% {transform: translate(2px, 2px) rotateZ(1deg)} /*震える動き調整*/
  50% {transform: translate(0px, 2px) rotateZ(0deg)} /*震える動き調整*/
  75% {transform: translate(2px, 0px) rotateZ(-1deg)} /*震える動き調整*/
  100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}

HTML

<span class="furueru-mozi1">震える文字（基本）</span>

「display」は、文字の位置を指定するためのCSSコードです。

「text-decoration」のところは文字の装飾するためのCSSコードです。

「animation」のところは文字の震える時間を設定するCSSコードです。

「translate」は、文字の震える動きの位置を設定するCSSコードです。

「rotateZ」は、文字の回転の位置を設定するCSSコードです。

文字が震える記入例

震える文字（基本）

CSS

/*震える文字（基本）*/
.furueru-mozi1 {
  display: inline-block; /*位置*/
  text-decoration: none; /*文字の装飾なし*/
  animation: furueru-mozi1a .1s  infinite; /*震える時間*/
}
@keyframes furueru-mozi1a {
  0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
  25% {transform: translate(2px, 2px) rotateZ(1deg)} /*震える動き調整*/
  50% {transform: translate(0px, 2px) rotateZ(0deg)} /*震える動き調整*/
  75% {transform: translate(2px, 0px) rotateZ(-1deg)} /*震える動き調整*/
  100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}

HTML

<span class="furueru-mozi1">震える文字（基本）</span>

記事をプレビュー表示したとき

震える文字（基本）

震える文字（太字）

CSS

/*震える文字（太字）*/
.furueru-mozi2 {
  display: inline-block; /*位置*/
  text-decoration: none; /*文字の装飾なし*/
  font-weight: bold; /*太字*/
  animation: furueru-mozi2a .1s  infinite; /*震える時間*/
}
@keyframes furueru-mozi2a {
  0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
  25% {transform: translate(2px, 2px) rotateZ(1deg)} /*震える動き調整*/
  50% {transform: translate(0px, 2px) rotateZ(0deg)} /*震える動き調整*/
  75% {transform: translate(2px, 0px) rotateZ(-1deg)} /*震える動き調整*/
  100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}

HTML

<span class="furueru-mozi2">震える文字（太字）</span>

記事をプレビュー表示したとき

震える文字（太字）

震える文字（色付き）

CSS

/*震える文字（色付き）*/
.furueru-mozi3 {
  display: inline-block; /*位置*/
  text-decoration: none; /*文字の装飾なし*/
  color: red; /*文字の色*/
  animation: furueru-mozi3a .1s  infinite; /*震える時間*/
}
@keyframes furueru-mozi3a {
  0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
  25% {transform: translate(2px, 2px) rotateZ(1deg)} /*震える動き調整*/
  50% {transform: translate(0px, 2px) rotateZ(0deg)} /*震える動き調整*/
  75% {transform: translate(2px, 0px) rotateZ(-1deg)} /*震える動き調整*/
  100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}

HTML

<span class="furueru-mozi3">震える文字（色付き）</span>

記事をプレビュー表示したとき

震える文字（色付き）

震える文字（リンク付き）

CSS

/*震える文字（リンク付き）*/
.furueru-mozi4 {
  display: inline-block; /*位置*/
  text-decoration: none; /*文字の装飾なし*/
  color: black; /*文字の色*/
  animation: furueru-mozi4a .1s  infinite; /*震える時間*/
}
@keyframes furueru-mozi4a {
  0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
  25% {transform: translate(2px, 2px) rotateZ(1deg)} /*震える動き調整*/
  50% {transform: translate(0px, 2px) rotateZ(0deg)} /*震える動き調整*/
  75% {transform: translate(2px, 0px) rotateZ(-1deg)} /*震える動き調整*/
  100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}

HTML

<span class="furueru-mozi4"><a href="ここにリンクのURLを入れます" rel="noopener" target="_blank">震える文字（リンク付き）</a></span>

記事をプレビュー表示したとき

震える文字（リンク付き）

震える文字（大きい文字）

CSS

/*震える文字（大きい文字）*/
.furueru-mozi5 {
  display: inline-block; /*位置*/
  text-decoration: none; /*文字の装飾なし*/
  color: black; /*文字の色*/
  font-size: 1.5em; /*文字の大きさ*/
  animation: furueru-mozi5a .1s  infinite; /*震える時間*/
}
@keyframes furueru-mozi5a {
  0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
  25% {transform: translate(2px, 2px) rotateZ(1deg)} /*震える動き調整*/
  50% {transform: translate(0px, 2px) rotateZ(0deg)} /*震える動き調整*/
  75% {transform: translate(2px, 0px) rotateZ(-1deg)} /*震える動き調整*/
  100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}

HTML

<span class="furueru-mozi5">震える文字（大きい文字）</span>

記事をプレビュー表示したとき

震える文字（大きい文字）

震える文字（下線付き）

CSS

/*震える文字（下線付き）*/
.furueru-mozi6 {
  display: inline-block; /*位置*/
  text-decoration: underline; /*下線*/
  color: black; /*文字の色*/
  animation: furueru-mozi6a .1s  infinite; /*震える時間*/
}
@keyframes furueru-mozi6a {
  0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
  25% {transform: translate(2px, 2px) rotateZ(1deg)} /*震える動き調整*/
  50% {transform: translate(0px, 2px) rotateZ(0deg)} /*震える動き調整*/
  75% {transform: translate(2px, 0px) rotateZ(-1deg)} /*震える動き調整*/
  100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}

HTML

<span class="furueru-mozi6">震える文字（下線付き）</span>

記事をプレビュー表示したとき

震える文字（下線付き）

震える文字（マーカー付き）

CSS

/*震える文字（マーカー付き）*/
.furueru-mozi7 {
  display: inline-block; /*位置*/
  color: black; /*文字の色*/
  text-decoration: none; /*文字の装飾なし*/
  background: linear-gradient(transparent 0%, yellow 100%); /*マーカー色*/
  animation: furueru-mozi7a .1s  infinite; /*震える時間*/
}
@keyframes furueru-mozi7a {
  0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
  25% {transform: translate(2px, 2px) rotateZ(1deg)} /*震える動き調整*/
  50% {transform: translate(0px, 2px) rotateZ(0deg)} /*震える動き調整*/
  75% {transform: translate(2px, 0px) rotateZ(-1deg)} /*震える動き調整*/
  100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}

HTML

<span class="furueru-mozi7">震える文字（マーカー付き）</span>

記事をプレビュー表示したとき

震える文字（マーカー付き）

震える文字（もっと震える）

CSS

/*震える文字（もっと震える）*/
.furueru-mozi8 {
  display: inline-block; /*位置*/
  color: black; /*文字の色*/
  text-decoration: none; /*文字の装飾なし*/
  animation: furueru-mozi8a .2s  infinite; /*震える時間*/
}
@keyframes furueru-mozi8a {
  0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
  25% {transform: translate(10px, 10px) rotateZ(1deg)} /*震える動き調整*/
  50% {transform: translate(0px, 10px) rotateZ(0deg)} /*震える動き調整*/
  75% {transform: translate(10px, 0px) rotateZ(-1deg)} /*震える動き調整*/
  100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}

HTML

<span class="furueru-mozi8">震える文字（もっと震える）</span>

記事をプレビュー表示したとき

震える文字（もっと震える）

震える文字（ゆっくり震える）

CSS

/*震える文字（ゆっくり震える）*/
.furueru-mozi9 {
  display: inline-block; /*位置*/
  color: black; /*文字の色*/
  text-decoration: none; /*文字の装飾なし*/
  animation: furueru-mozi9a .5s  infinite; /*震える時間*/
}
@keyframes furueru-mozi9a {
  0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
  25% {transform: translate(10px, 10px) rotateZ(1deg)} /*震える動き調整*/
  50% {transform: translate(0px, 10px) rotateZ(0deg)} /*震える動き調整*/
  75% {transform: translate(10px, 0px) rotateZ(-1deg)} /*震える動き調整*/
  100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}

HTML

<span class="furueru-mozi9">震える文字（ゆっくり震える）</span>

記事をプレビュー表示したとき

震える文字（ゆっくり震える）