講座2

画像をポヨンポヨンさせるHTMLとCSSを使ってする方法

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

次は、画像をポヨンポヨンさせるHTMLとCSSを使ってする方法をします。

画像をポヨンポヨンさせるHTMLとCSSを使ってする方法

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

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

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

左上の「タイトルを追加」に「画像をポヨンポヨンさせるHTMLとCSSを使ってする方法」と入力します。

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

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

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

<div class="poyon-gazou1">
ここに画像を入れる
</div>

貼り付けました。

「ここに画像を入れる」の文字を消します。

文字を消したところに「画像」を入れます。
左上の「メディアを追加」を押します。

左上の「メディアライブラリ」を押します。

①「WordPress」を選択します。
画像は、他の画像でも大丈夫です。

②「配置：なし」、「リンク先：なし」、「サイズ：フルサイズ」を選択します。

③右下の「投稿に挿入」を押します。

画像が挿入されました。

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

「OK」を押します。

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

「画像をポヨンポヨンさせるHTMLとCSSを使ってする方法」の
画像がポヨンポヨンすることを確認します。

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

HTMLとCSSの説明

CSS

/*ポヨンポヨン画像（基本）*/
.poyon-gazou1 {
  display: inline-block; /*位置*/
  width: 300px; /*画像の横幅*/
  height: 170px; /*画像の高さ*/
  animation: poyon-gazou1a 2s  ease-in-out infinite; /*ポヨンポヨンする時間*/
}
@keyframes poyon-gazou1a {
  0%   { transform: scale(0.9, 0.9) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
  15%  { transform: scale(0.8, 0.8) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
  30%  { transform: scale(1.0, 0.7) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
  50%  { transform: scale(0.7, 1.0) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
  70%  { transform: scale(0.9, 0.7) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
  100% { transform: scale(0.9, 0.9) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}

HTML

<div class="poyon-gazou1">
ここに画像を入れる
</div>

「overflow」の、「hidden」は画像が大きくなったとき、はみ出た画像を非表示にするCSSコードです。

「width」の、「350px」の数字が大きくなるほど画像の横幅が大きくなります。

「height」の、「190px」の数字が大きくなるほど画像の高さが大きくなります。

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

「transition」の、「0.5s」の数字が大きくなるほど、画像が大きくなるのに時間がかかります。

「margin」は、画像の周りの余白を設定するCSSコードです。

「Scale(1.2)」の、「1.2」の数字を大きくすると、マウスを画像の上にのせたときの大きさを大きくすることができます。

「ここに画像を入れる」の文字を消して、画像を入れてください。

ポヨンポヨン画像記入例

ポヨンポヨン画像（基本）

CSS

/*ポヨンポヨン画像（基本）*/
.poyon-gazou1 {
  display: inline-block; /*位置*/
  width: 300px; /*画像の横幅*/
  height: 170px; /*画像の高さ*/
  animation: poyon-gazou1a 2s  ease-in-out infinite; /*ポヨンポヨンする時間*/
}
@keyframes poyon-gazou1a {
  0%   { transform: scale(0.9, 0.9) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
  15%  { transform: scale(0.8, 0.8) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
  30%  { transform: scale(1.0, 0.7) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
  50%  { transform: scale(0.7, 1.0) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
  70%  { transform: scale(0.9, 0.7) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
  100% { transform: scale(0.9, 0.9) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}

HTML

<div class="poyon-gazou1">
ここに画像を入れる
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

ポヨンポヨン画像（枠線付き）

CSS

/*ポヨンポヨン画像（枠線付き）*/
.poyon-gazou2 {
  display: inline-block; /*位置*/
  width: 300px; /*画像の横幅*/
  height: 170px; /*画像の高さ*/
  border: solid 2px black; /*枠線*/
  animation: poyon-gazou2a 2s  ease-in-out infinite; /*ポヨンポヨンする時間*/
}
@keyframes poyon-gazou2a {
  0%   { transform: scale(0.9, 0.9) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
  15%  { transform: scale(0.8, 0.8) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
  30%  { transform: scale(1.0, 0.7) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
  50%  { transform: scale(0.7, 1.0) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
  70%  { transform: scale(0.9, 0.7) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
  100% { transform: scale(0.9, 0.9) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}

HTML

<div class="poyon-gazou2">
ここに画像を入れる
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

ポヨンポヨン画像（枠付き）

CSS

/*ポヨンポヨン画像（枠付き）*/
.poyon-gazou3-waku {
  background-color:  #e9e9e9; /* 枠の背景色指定*/
  border: solid 1px gray; /*枠線*/
  padding-top:  25px; /* 枠の余白*/
  width: 400px; /*枠の横幅*/
  height: 300px; /*枠の高さ*/
}
.poyon-gazou3 {
  width: 300px; /*画像の横幅*/
  height: 170px; /*画像の高さ*/
  margin: auto; /*枠の中央にする設定*/
  animation: poyon-gazou3a 2s  ease-in-out infinite; /*ポヨンポヨンする時間*/
}
@keyframes poyon-gazou3a {
  0%   { transform: scale(0.9, 0.9) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
  15%  { transform: scale(0.8, 0.8) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
  30%  { transform: scale(1.0, 0.7) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
  50%  { transform: scale(0.7, 1.0) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
  70%  { transform: scale(0.9, 0.7) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
  100% { transform: scale(0.9, 0.9) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}

HTML

<div class="poyon-gazou3-waku">
<div class="poyon-gazou3">
ここに画像を入れる
</div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

ポヨンポヨン画像（文字と枠付き）

CSS

/*ポヨンポヨン画像（文字と枠付き）*/
.poyon-gazou4-mozi {
  font-size:  1.5em; /* 文字の大きさ*/
  text-align: center; /*文字の位置*/
  font-weight: bold; /*太さ*/
}
.poyon-gazou4-bunsho {
  font-size:  1.2em; /* 文字の大きさ*/
  text-align: left; /*文字の位置*/
  padding-top: 20px; /*文字の上側の余白*/
}
.poyon-gazou4-waku {
  background-color:  #e9e9e9; /* 枠の背景色指定*/
  border: solid 1px gray; /*枠線*/
  padding:  20px; /*枠内の上側の余白*/
  width: 400px; /*枠の横幅*/
  height: auto; /*枠の高さ*/
}
.poyon-gazou4 {
  width: 300px; /*画像の横幅*/
  height: 170px; /*画像の高さ*/
  margin: auto; /*枠の中央にする設定*/
  animation: poyon-gazou4a 2s  ease-in-out infinite; /*ポヨンポヨンする時間*/
}
@keyframes poyon-gazou4a {
  0%   { transform: scale(0.9, 0.9) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
  15%  { transform: scale(0.8, 0.8) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
  30%  { transform: scale(1.0, 0.7) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
  50%  { transform: scale(0.7, 1.0) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
  70%  { transform: scale(0.9, 0.7) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
  100% { transform: scale(0.9, 0.9) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}

HTML

<div class="poyon-gazou4-waku">
<div class="poyon-gazou4-mozi">ここに文字を入れる</div>
<div class="poyon-gazou4">
ここに画像を入れる
</div>
<div class="ookikunaru-gazou4-bunsho">ここに文章を入れる</div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

ここに文字を入れる
ここに文章を入れる

ポヨンポヨン画像（リンク付き）

CSS

/*ポヨンポヨン画像（リンク付き）*/
.poyon-gazou5 {
  display: inline-block; /*位置*/
  width: 300px; /*画像の横幅*/
  height: 170px; /*画像の高さ*/
  animation: poyon-gazou5a 2s  ease-in-out infinite; /*ポヨンポヨンする時間*/
}
@keyframes poyon-gazou5a {
  0%   { transform: scale(0.9, 0.9) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
  15%  { transform: scale(0.8, 0.8) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
  30%  { transform: scale(1.0, 0.7) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
  50%  { transform: scale(0.7, 1.0) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
  70%  { transform: scale(0.9, 0.7) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
  100% { transform: scale(0.9, 0.9) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}

HTML

<div class="poyon-gazou5">
<a href="ここにリンクのURLを入れます" rel="noopener" target="_blank">ここに画像を入れる</a>
</div>

「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

ポヨンポヨン画像（速いポヨンポヨン）

CSS

/*ポヨンポヨン画像（速いポヨンポヨン）*/
.poyon-gazou6 {
  display: inline-block; /*位置*/
  width: 300px; /*画像の横幅*/
  height: 170px; /*画像の高さ*/
  animation: poyon-gazou6a 0.5s  ease-in-out infinite; /*ポヨンポヨンする時間*/
}
@keyframes poyon-gazou6a {
  0%   { transform: scale(0.9, 0.9) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
  15%  { transform: scale(0.8, 0.8) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
  30%  { transform: scale(1.0, 0.7) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
  50%  { transform: scale(0.7, 1.0) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
  70%  { transform: scale(0.9, 0.7) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
  100% { transform: scale(0.9, 0.9) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}

HTML

<div class="poyon-gazou6">
ここに画像を入れる
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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

ポヨンポヨン画像（マウスの矢印をのせるとポヨンポヨン止まる）

CSS

/*ポヨンポヨン画像（マウスの矢印をのせるとポヨンポヨン止まる）*/
.poyon-gazou7 {
  display: inline-block; /*位置*/
  width: 300px; /*画像の横幅*/
  height: 170px; /*画像の高さ*/
  animation: poyon-gazou7a 2s  ease-in-out infinite; /*ポヨンポヨンする時間*/
}
.poyon-gazou7:hover {
  animation: poyon-gazou7a 0s  ease-in-out infinite; /*ポヨンポヨンする時間*/
}
@keyframes poyon-gazou7a {
  0%   { transform: scale(0.9, 0.9) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
  15%  { transform: scale(0.8, 0.8) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
  30%  { transform: scale(1.0, 0.7) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
  50%  { transform: scale(0.7, 1.0) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
  70%  { transform: scale(0.9, 0.7) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
  100% { transform: scale(0.9, 0.9) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}

HTML

<div class="poyon-gazou7">
ここに画像を入れる
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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