講座2

画像を回すHTMLとCSSを使ってする方法

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

次は、画像の上にマウスの矢印をのせると回る画像をHTMLとCSSを使ってする方法をします。

画像を回すHTMLとCSSを使ってする方法

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

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

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

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

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

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

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

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

貼り付けました。

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

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

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

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

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

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

画像が挿入されました。

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

「OK」を押します。

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

「画像を回すHTMLとCSSを使ってする方法」の
画像の上にマウスの矢印をのせると画像が回ることを確認します。

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

HTMLとCSSの説明

CSS

/*画像が回る（基本）*/
.mawaru-gazou1 {
  width: 350px; /*画像の横幅*/
  height: auto; /*画像の高さ*/
}
.mawaru-gazou1 img {
  width: 350px; /*画像の横幅*/
  display: block; /*画像の位置*/
  transition: 1s; /*変化時間*/
  margin: 0px 0px 0px 0px; /*余白なし*/
}
.mawaru-gazou1 img:hover {
  transform: rotateZ( 360deg ); /*Z回転の設定*/
}

HTML

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

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

「height」の、「auto」は自動で高さを調整してくれます。

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

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

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

「rotateZ」は、回転を設定するCSSコードです。

「rotateZ」を「rotateX」に変えると、縦回転します。

「rotateZ」を「rotateY」に変えると、横回転します。

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

画像が回る記入例

画像が回る（基本）

CSS

/*画像が回る（基本）*/
.mawaru-gazou1 {
  width: 350px; /*画像の横幅*/
  height: auto; /*画像の高さ*/
}
.mawaru-gazou1 img {
  width: 350px; /*画像の横幅*/
  display: block; /*画像の位置*/
  transition: 1s; /*変化時間*/
  margin: 0px 0px 0px 0px; /*余白なし*/
}
.mawaru-gazou1 img:hover {
  transform: rotateZ( 360deg ); /*Z回転の設定*/
}

HTML

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

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

画像が回る（枠線付き）

CSS

/*画像が回る（枠線付き）*/
.mawaru-gazou2 {
  width: 350px; /*画像の横幅*/
  height: auto; /*画像の高さ*/
}
.mawaru-gazou2 img {
  width: 350px; /*画像の横幅*/
  display: block; /*画像の位置*/
  transition: 1s; /*変化時間*/
  margin: 0px 0px 0px 0px; /*余白なし*/
  border: solid 2px black; /*枠線*/
}
.mawaru-gazou2 img:hover {
  transform: rotateZ( 360deg ); /*Z回転の設定*/
}

HTML

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

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

画像が回る（枠付き）

CSS

/*画像が回る（枠付き）*/
.mawaru-gazou3-waku {
  background-color:  #e9e9e9; /* 枠の背景色指定*/
  border: solid 1px gray; /*枠線*/
  padding-top:  25px; /* 枠の余白*/
  width: 400px; /*枠の横幅*/
  height: 300px; /*枠の高さ*/
}
.mawaru-gazou3 {
  width: 350px; /*画像の横幅*/
  height: auto; /*画像の高さ*/
  margin: auto; /*枠の中央にする設定*/
}
.mawaru-gazou3 img {
  width: 350px; /*画像の横幅*/
  display: block; /*画像の位置*/
  transition: 1s; /*変化時間*/
  margin: 0px 0px 0px 0px; /*余白なし*/
}
.mawaru-gazou3 img:hover {
  transform: rotateZ( 360deg ); /*Z回転の設定*/
}

HTML

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

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

画像が回る（文字と枠付き）

CSS

/*画像が回る（文字と枠付き）*/
.mawaru-gazou4-mozi {
  font-size:  1.5em; /* 文字の大きさ*/
  text-align: center; /*文字の位置*/
  font-weight: bold; /*太さ*/
}
.mawaru-gazou4-bunsho {
  font-size:  1.2em; /* 文字の大きさ*/
  text-align: left; /*文字の位置*/
  padding-top: 20px; /*文字の上側の余白*/
}
.mawaru-gazou4-waku {
  background-color:  #e9e9e9; /* 枠の背景色指定*/
  border: solid 1px gray; /*枠線*/
  padding:  20px; /*枠内の上側の余白*/
  width: 400px; /*枠の横幅*/
  height: auto; /*枠の高さ*/
}
.mawaru-gazou4 {
  width: 350px; /*画像の横幅*/
  height: auto; /*画像の高さ*/
  margin: auto; /*枠の中央にする設定*/
}
.mawaru-gazou4 img {
  width: 350px; /*画像の横幅*/
  display: block; /*画像の位置*/
  transition: 1s; /*変化時間*/
  margin: 0px 0px 0px 0px; /*余白なし*/
}
.mawaru-gazou4 img:hover {
  transform: rotateZ( 360deg ); /*Z回転の設定*/
}

HTML

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

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

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

画像が回る（リンク付き）

CSS

/*画像が回る（リンク付き）*/
.mawaru-gazou5 {
  width: 350px; /*画像の横幅*/
  height: auto; /*画像の高さ*/
}
.mawaru-gazou5 img {
  width: 350px; /*画像の横幅*/
  display: block; /*画像の位置*/
  transition: 1s; /*変化時間*/
  margin: 0px 0px 0px 0px; /*余白なし*/
}
.mawaru-gazou5 img:hover {
  transform: rotateZ( 360deg ); /*Z回転の設定*/
}

HTML

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

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

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

画像が回る（もっと大きく）

CSS

/*画像が回る（もっと回転）*/
.mawaru-gazou6 {
  width: 350px; /*画像の横幅*/
  height: auto; /*画像の高さ*/
}
.mawaru-gazou6 img {
  width: 350px; /*画像の横幅*/
  display: block; /*画像の位置*/
  transition: 1s; /*変化時間*/
  margin: 0px 0px 0px 0px; /*余白なし*/
}
.mawaru-gazou6 img:hover {
  transform: rotateZ( 720deg ); /*Z回転の設定*/
}

HTML

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

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

画像が回る（縦回転）

CSS

/*画像が回る（縦回転）*/
.mawaru-gazou7 {
  width: 350px; /*画像の横幅*/
  height: auto; /*画像の高さ*/
}
.mawaru-gazou7 img {
  width: 350px; /*画像の横幅*/
  display: block; /*画像の位置*/
  transition: 1s; /*変化時間*/
  margin: 0px 0px 0px 0px; /*余白なし*/
}
.mawaru-gazou7 img:hover {
  transform: rotateX( 360deg ); /*X回転の設定*/
}

HTML

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

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

画像が回る（横回転）

CSS

/*画像が回る（横回転）*/
.mawaru-gazou8 {
  width: 350px; /*画像の横幅*/
  height: auto; /*画像の高さ*/
}
.mawaru-gazou8 img {
  width: 350px; /*画像の横幅*/
  display: block; /*画像の位置*/
  transition: 1s; /*変化時間*/
  margin: 0px 0px 0px 0px; /*余白なし*/
}
.mawaru-gazou8 img:hover {
  transform: rotateY( 360deg ); /*Y回転の設定*/
}

HTML

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

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