講座2

画像を半透明HTMLとCSSを使ってする方法

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

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

画像を半透明HTMLとCSSを使ってする方法

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

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

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

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

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

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

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

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

貼り付けました。

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

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

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

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

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

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

画像が挿入されました。

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

「OK」を押します。

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

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

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

HTMLとCSSの説明

CSS

/*画像を半透明（基本）*/
.htoumei-gazou1 {
  width: 350px; /*画像の横幅*/
  height: auto; /*画像の高さ*/
}
.htoumei-gazou1 img {
  width: 350px; /*画像の横幅*/
  display: block; /*画像の位置*/
  transition: 0.5s; /*変化時間*/
  margin: 0px 0px 0px 0px; /*余白なし*/
}
.htoumei-gazou1 img:hover {
 opacity: 0.5; /*半透明の設定*/
}

HTML

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

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

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

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

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

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

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

「opacity」の、「0.5」の数字を小さくすると、マウスを画像の上にのせたときの半透明をもっと半透明にすることができます。

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

画像を半透明記入例

画像を半透明（基本）

CSS

/*画像を半透明（基本）*/
.htoumei-gazou1 {
  width: 350px; /*画像の横幅*/
  height: auto; /*画像の高さ*/
}
.htoumei-gazou1 img {
  width: 350px; /*画像の横幅*/
  display: block; /*画像の位置*/
  transition: 0.5s; /*変化時間*/
  margin: 0px 0px 0px 0px; /*余白なし*/
}
.htoumei-gazou1 img:hover {
 opacity: 0.5; /*半透明の設定*/
}

HTML

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

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

画像を半透明（枠線付き）

CSS

/*画像を半透明（枠線付き）*/
.htoumei-gazou2 {
  width: 350px; /*画像の横幅*/
  height: auto; /*画像の高さ*/
}
.htoumei-gazou2 img {
  width: 350px; /*画像の横幅*/
  display: block; /*画像の位置*/
  transition: 0.5s; /*変化時間*/
  margin: 0px 0px 0px 0px; /*余白なし*/
  border: solid 2px black; /*枠線*/
}
.htoumei-gazou2 img:hover {
 opacity: 0.5; /*半透明の設定*/
}

HTML

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

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

画像を半透明（枠付き）

CSS

/*画像を半透明（枠付き）*/
.htoumei-gazou3-waku {
  background-color:  #e9e9e9; /* 枠の背景色指定*/
  border: solid 1px gray; /*枠線*/
  padding-top:  25px; /* 枠の余白*/
  width: 400px; /*枠の横幅*/
  height: 300px; /*枠の高さ*/
}
.htoumei-gazou3 {
  width: 350px; /*画像の横幅*/
  height: auto; /*画像の高さ*/
  margin: auto; /*枠の中央にする設定*/
}
.htoumei-gazou3 img {
  width: 350px; /*画像の横幅*/
  display: block; /*画像の位置*/
  transition: 0.5s; /*変化時間*/
  margin: 0px 0px 0px 0px; /*余白なし*/
}
.htoumei-gazou3 img:hover {
 opacity: 0.5; /*半透明の設定*/
}

HTML

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

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

画像を半透明（文字と枠付き）

CSS

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

HTML

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

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

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

画像を半透明（リンク付き）

CSS

/*画像を半透明（リンク付き）*/
.htoumei-gazou5 {
  width: 350px; /*画像の横幅*/
  height: auto; /*画像の高さ*/
}
.htoumei-gazou5 img {
  width: 350px; /*画像の横幅*/
  display: block; /*画像の位置*/
  transition: 0.5s; /*変化時間*/
  margin: 0px 0px 0px 0px; /*余白なし*/
}
.htoumei-gazou5 img:hover {
 opacity: 0.5; /*半透明の設定*/
}

HTML

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

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

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

画像を半透明（もっと半透明）

CSS

/*画像を半透明（もっと半透明）*/
.htoumei-gazou6 {
  width: 350px; /*画像の横幅*/
  height: auto; /*画像の高さ*/
}
.htoumei-gazou6 img {
  width: 350px; /*画像の横幅*/
  display: block; /*画像の位置*/
  transition: 0.5s; /*変化時間*/
  margin: 0px 0px 0px 0px; /*余白なし*/
}
.htoumei-gazou6 img:hover {
 opacity: 0.1; /*半透明の設定*/
}

HTML

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

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