講座2

画像が大きくなるHTMLとCSSを使ってする方法

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

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

画像が大きくなるHTMLとCSSを使ってする方法

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

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

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

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

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

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

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

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

貼り付けました。

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

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

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

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

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

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

画像が挿入されました。

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

「OK」を押します。

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

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

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

HTMLとCSSの説明

CSS

/*画像が大きくなる（基本）*/
.ookikunaru-gazou1 {
  overflow: hidden; /*画像のはみ出し部分非表示*/
  width: 350px; /*画像の横幅*/
  height: 190px; /*画像の高さ*/
}
.ookikunaru-gazou1 img {
  width: 350px; /*画像の横幅*/
  display: block; /*画像の位置*/
  transition: 0.5s; /*変化時間*/
  margin: 0px 0px 0px 0px; /*余白なし*/
}
.ookikunaru-gazou1 img:hover {
  transform: scale(1.2, 1.2); /*大きくなる大きさ*/
}

HTML

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

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

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

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

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

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

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

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

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

画像が大きくなる記入例

画像が大きくなる（基本）

CSS

/*画像が大きくなる（基本）*/
.ookikunaru-gazou1 {
  overflow: hidden; /*画像のはみ出し部分非表示*/
  width: 350px; /*画像の横幅*/
  height: 190px; /*画像の高さ*/
}
.ookikunaru-gazou1 img {
  width: 350px; /*画像の横幅*/
  display: block; /*画像の位置*/
  transition: 0.5s; /*変化時間*/
  margin: 0px 0px 0px 0px; /*余白なし*/
}
.ookikunaru-gazou1 img:hover {
  transform: scale(1.2, 1.2); /*大きくなる大きさ*/
}

HTML

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

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

画像が大きくなる（枠線付き）

CSS

/*画像が大きくなる（枠線付き）*/
.ookikunaru-gazou2 {
  overflow: hidden; /*画像のはみ出し部分非表示*/
  width: 350px; /*画像の横幅*/
  height: 190px; /*画像の高さ*/
  border: solid 2px black; /*枠線*/
}
.ookikunaru-gazou2 img {
  width: 350px; /*画像の横幅*/
  display: block; /*画像の位置*/
  transition: 0.5s; /*変化時間*/
  margin: 0px 0px 0px 0px; /*余白なし*/
}
.ookikunaru-gazou2 img:hover {
  transform: scale(1.2, 1.2); /*大きくなる大きさ*/
}

HTML

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

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

画像が大きくなる（枠付き）

CSS

/*画像が大きくなる（枠付き）*/
.ookikunaru-gazou3-waku {
  background-color:  #e9e9e9; /* 枠の背景色指定*/
  border: solid 1px gray; /*枠線*/
  padding-top:  25px; /* 枠の余白*/
  width: 400px; /*枠の横幅*/
  height: 300px; /*枠の高さ*/
}
.ookikunaru-gazou3 {
  overflow: hidden; /*画像のはみ出し部分非表示*/
  width: 350px; /*画像の横幅*/
  height: 190px; /*画像の高さ*/
  margin: auto; /*枠の中央にする設定*/
}
.ookikunaru-gazou3 img {
  width: 350px; /*画像の横幅*/
  display: block; /*画像の位置*/
  transition: 0.5s; /*変化時間*/
  margin: 0px 0px 0px 0px; /*余白なし*/
}
.ookikunaru-gazou3 img:hover {
  transform: scale(1.2, 1.2); /*大きくなる大きさ*/
}

HTML

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

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

画像が大きくなる（文字と枠付き）

CSS

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

HTML

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

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

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

画像が大きくなる（リンク付き）

CSS

/*画像が大きくなる（リンク付き）*/
.ookikunaru-gazou5 {
  overflow: hidden; /*画像のはみ出し部分非表示*/
  width: 350px; /*画像の横幅*/
  height: 190px; /*画像の高さ*/
}
.ookikunaru-gazou5 img {
  width: 350px; /*画像の横幅*/
  display: block; /*画像の位置*/
  transition: 0.5s; /*変化時間*/
  margin: 0px 0px 0px 0px; /*余白なし*/
}
.ookikunaru-gazou5 img:hover {
  transform: scale(1.2, 1.2); /*大きくなる大きさ*/
}

HTML

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

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

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

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

CSS

/*画像が大きくなる（もっと大きく）*/
.ookikunaru-gazou6 {
  overflow: hidden; /*画像のはみ出し部分非表示*/
  width: 350px; /*画像の横幅*/
  height: 190px; /*画像の高さ*/
}
.ookikunaru-gazou6 img {
  width: 350px; /*画像の横幅*/
  display: block; /*画像の位置*/
  transition: 0.5s; /*変化時間*/
  margin: 0px 0px 0px 0px; /*余白なし*/
}
.ookikunaru-gazou6 img:hover {
  transform: scale(1.8, 1.8); /*大きくなる大きさ*/
}

HTML

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

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