講座2

画像を押すと文章が表示するHTMLとCSSを使ってする方法

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

次は、画像を押すと文章が表示するHTMLとCSSを使ってする方法をします。

画像を押すと文章が表示するHTMLとCSSを使ってする方法

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

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

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

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

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

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

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

<div class="g-bunsho-hyouzi1">
  <label for="label1">ここに画像を入れる</label>
  <input type="checkbox" id="label1"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます</div>
</div>

貼り付けました。

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

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

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

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

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

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

画像が挿入されました。

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

「OK」を押します。

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

「画像を押すと文章が表示するHTMLとCSSを使ってする方法」の
画像を押すと文章が表示することを確認します。

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

HTMLとCSSの説明

CSS

/*画像を押すと文書が表示する（基本）*/
.g-bunsho-hyouzi1 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*画像の設定*/
.g-bunsho-hyouzi1 label img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  cursor :pointer; /*矢印の形*/
  -ms-transition: 0.5s; /*変化時間*/  
  -webkit-transition: 0.5s; /*変化時間*/
  transition: 0.5s; /*変化時間*/
}
/*マウスを画像の上にのせたとき*/
.g-bunsho-hyouzi1 label img:hover {
  opacity: 0.7; /*半透明*/
}
/*文章を見えなくする*/
.g-bunsho-hyouzi1 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.g-bunsho-hyouzi1 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
}
/*画像を押すと文章表示*/
.g-bunsho-hyouzi1 input:checked ~ .bunsho-miseru {
  padding: 10px 0; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
}

HTML

<div class="g-bunsho-hyouzi1">
  <label for="label1">ここに画像を入れる</label>
  <input type="checkbox" id="label1"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます</div>
</div>

「margin: 2em 0;」は、画像の上下の余白のCSSコードです。

「padding: 0;」は、画像の周りの余白をゼロにするためのCSSコードです。

「width: 450px;」は、画像の横幅を設定するためのCSSコードです。

「height: 255px;」は、画像の高さを設定するためのCSSコードです。

「cursor :pointer;」は、「続きを見る」の文字の上にマウスの矢印をのせたときの矢印の形を指定するためのCSSコードです。

「-ms-transition: 0.5s;」は、画像の上にマウスの矢印をのせたときに半透明になるまでの時間を指定するためのCSSコードです。

「-ms-transition」の、「-ms-」は、ブラウザーのインターネットエクスプロラーで表示させるためのコードです。

「-webkit-transition: 0.5s;」は、画像の上にマウスの矢印をのせたときに半透明になるまでの時間を指定するためのCSSコードです。

「webkit-transition」の、「-webkit-」は、ブラウザーのグーグルクロームとサファリで表示させるためのコードです。

「transition: 0.5s;」は、画像の上にマウスの矢印をのせたときに半透明になるまでの時間を指定するためのCSSコードです。

「opacity: 0.7;」は、画像の上にマウスの矢印をのせたときの半透明を指定するためのCSSコードです。

「display: none;」は、文章を非表示にするためのCSSコードです。

「height: 0;」は、文章を非表示にするためのCSSコードです。

「overflow: hidden;」は、文章のはみだしを非表示に定するためのCSSコードです。

「opacity: 0;」は、文章を非表示にするためのCSSコードです。

「-ms-transition: 0.8s;」は、画像を押したときに文章が表示される時間を指定するためのCSSコードです。

「-ms-transition」の、「-ms-」は、ブラウザーのインターネットエクスプロラーで表示させるためのコードです。

「-webkit-transition: 0.8s;」は、画像を押したときに文章が表示される時間を指定するためのCSSコードです。

「webkit-transition」の、「-webkit-」は、ブラウザーのグーグルクロームとサファリで表示させるためのコードです。

「transition: 0.8s;」は、画像を押したときに文章が表示される時間を指定するためのCSSコードです。

「padding: 10px 0;」は、文章の余白を指定するためのCSSコードです。

「height: auto;」は、文章の高さを指定するためのCSSコードです。

「opacity: 1;」は、文章を表示するためのCSSコードです。

「input type="checkbox" id="label1"」の、「label1」は、「画像」１つずつに違うラベルが必要となります。

注意事項：１つのページにたくさんのラベルIDを使うときは、ラベルのIDを違うIDにしないといけません。
同じラベルIDは、使えません。

画像を押すと文書が表示する記入例

画像を押すと文書が表示する（基本）

CSS

/*画像を押すと文書が表示する（基本）*/
.g-bunsho-hyouzi1 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*画像の設定*/
.g-bunsho-hyouzi1 label img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  cursor :pointer; /*矢印の形*/
  -ms-transition: 0.5s; /*変化時間*/  
  -webkit-transition: 0.5s; /*変化時間*/
  transition: 0.5s; /*変化時間*/
}
/*マウスを画像の上にのせたとき*/
.g-bunsho-hyouzi1 label img:hover {
  opacity: 0.7; /*半透明*/
}
/*文章を見えなくする*/
.g-bunsho-hyouzi1 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.g-bunsho-hyouzi1 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
}
/*画像を押すと文章表示*/
.g-bunsho-hyouzi1 input:checked ~ .bunsho-miseru {
  padding: 10px 0; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
}

HTML

<div class="g-bunsho-hyouzi1">
  <label for="label1">ここに画像を入れる</label>
  <input type="checkbox" id="label1"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます</div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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


ここに好きな文章を入れます

画像を押すと文書が表示する（下線付き）

CSS

/*画像を押すと文書が表示する（下線付き）*/
.g-bunsho-hyouzi2 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*画像の設定*/
.g-bunsho-hyouzi2 label img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  cursor :pointer; /*矢印の形*/
  -ms-transition: 0.5s; /*変化時間*/  
  -webkit-transition: 0.5s; /*変化時間*/
  transition: 0.5s; /*変化時間*/
}
/*マウスを画像の上にのせたとき*/
.g-bunsho-hyouzi2 label img:hover {
  opacity: 0.7; /*半透明*/
}
/*文章を見えなくする*/
.g-bunsho-hyouzi2 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.g-bunsho-hyouzi2 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
}
/*画像を押すと文章表示*/
.g-bunsho-hyouzi2 input:checked ~ .bunsho-miseru {
  padding: 10px 0; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
  text-decoration: underline; /*下線*/
}

HTML

<div class="g-bunsho-hyouzi2">
  <label for="label2">ここに画像を入れる</label>
  <input type="checkbox" id="label2"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます</div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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


ここに好きな文章を入れます

画像を押すと文書が表示する（マーカー付き）

CSS

/*画像を押すと文書が表示する（マーカー付き）*/
.g-bunsho-hyouzi3 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*画像の設定*/
.g-bunsho-hyouzi3 label img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  cursor :pointer; /*矢印の形*/
  -ms-transition: 0.5s; /*変化時間*/  
  -webkit-transition: 0.5s; /*変化時間*/
  transition: 0.5s; /*変化時間*/
}
/*マウスを画像の上にのせたとき*/
.g-bunsho-hyouzi3 label img:hover {
  opacity: 0.7; /*半透明*/
}
/*文章を見えなくする*/
.g-bunsho-hyouzi3 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.g-bunsho-hyouzi3 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
}
/*画像を押すと文章表示*/
.g-bunsho-hyouzi3 input:checked ~ .bunsho-miseru {
  padding: 0px 10px 0px 10px; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
  background: linear-gradient(transparent 0%, yellow 100%); /*マーカー線*/
  display: inline-block; /*文章のところだけマーカー*/
}

HTML

<div class="g-bunsho-hyouzi3">
  <label for="label3">ここに画像を入れる</label>
  <input type="checkbox" id="label3"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます</div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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


ここに好きな文章を入れます

画像を押すと文書が表示する（枠線付き）

CSS

/*画像を押すと文書が表示する（枠線付き）*/
.g-bunsho-hyouzi4 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*画像の設定*/
.g-bunsho-hyouzi4 label img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  cursor :pointer; /*矢印の形*/
  -ms-transition: 0.5s; /*変化時間*/  
  -webkit-transition: 0.5s; /*変化時間*/
  transition: 0.5s; /*変化時間*/
}
/*マウスを画像の上にのせたとき*/
.g-bunsho-hyouzi4 label img:hover {
  opacity: 0.7; /*半透明*/
}
/*文章を見えなくする*/
.g-bunsho-hyouzi4 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.g-bunsho-hyouzi4 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
}
/*画像を押すと文章表示*/
.g-bunsho-hyouzi4 input:checked ~ .bunsho-miseru {
  padding: 0px 10px 0px 10px; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
  display: inline-block; /*文章のところだけ枠線*/
  border: solid 2px black; /*枠線*/
}

HTML

<div class="g-bunsho-hyouzi4">
  <label for="label4">ここに画像を入れる</label>
  <input type="checkbox" id="label4"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます</div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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


ここに好きな文章を入れます

画像を押すと文書が表示する（枠線と背景）

CSS

/*画像を押すと文書が表示する（枠線と背景）*/
.g-bunsho-hyouzi5 {
  margin: 2em 0 -1em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*画像の設定*/
.g-bunsho-hyouzi5 label img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  cursor :pointer; /*矢印の形*/
  -ms-transition: 0.5s; /*変化時間*/  
  -webkit-transition: 0.5s; /*変化時間*/
  transition: 0.5s; /*変化時間*/
}
/*マウスを画像の上にのせたとき*/
.g-bunsho-hyouzi5 label img:hover {
  opacity: 0.7; /*半透明*/
}
/*文章を見えなくする*/
.g-bunsho-hyouzi5 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.g-bunsho-hyouzi5 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
  display: inline-block; /*文章のところだけ枠線*/
}
/*画像を押すと文章表示*/
.g-bunsho-hyouzi5 input:checked ~ .bunsho-miseru {
  padding: 0px 10px 0px 10px; /*文章の余白*/
  margin-top: 1em; /*文章の上側の余白*/
  margin-bottom: 3em; /*文章の下側の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
  display: inline-block; /*文章のところだけ枠線*/
  border: solid 2px black; /*枠線*/
  background: #ebffe1; /*背景色*/
}

HTML

<div class="g-bunsho-hyouzi5">
  <label for="label5">ここに画像を入れる</label>
  <input type="checkbox" id="label5"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます<br>ここに好きな文章を入れます<br>ここに好きな文章を入れます</div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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


ここに好きな文章を入れます
ここに好きな文章を入れます
ここに好きな文章を入れます

画像を押すと文書が表示する（枠線と背景と下線）

CSS

/*画像を押すと文書が表示する（枠線と背景と下線）*/
.g-bunsho-hyouzi6 {
  margin: 2em 0 -1em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*画像の設定*/
.g-bunsho-hyouzi6 label img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  cursor :pointer; /*矢印の形*/
  -ms-transition: 0.5s; /*変化時間*/  
  -webkit-transition: 0.5s; /*変化時間*/
  transition: 0.5s; /*変化時間*/
}
/*マウスを画像の上にのせたとき*/
.g-bunsho-hyouzi6 label img:hover {
  opacity: 0.7; /*半透明*/
}
/*文章を見えなくする*/
.g-bunsho-hyouzi6 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.g-bunsho-hyouzi6 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
  display: inline-block; /*文章のところだけ枠線*/
}
/*画像を押すと文章表示*/
.g-bunsho-hyouzi6 input:checked ~ .bunsho-miseru {
  margin-top: 1em; /*文章の上側の余白*/
  margin-bottom: 3em; /*文章の下側の余白*/
  padding: 0px 10px 0px 10px; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
  display: inline-block; /*文章のところだけ枠線*/
  border: solid 2px black; /*枠線*/
  background: #fff9e1; /*背景色*/
  text-decoration: underline dashed 1px black; /*下線*/
}

HTML

<div class="g-bunsho-hyouzi6">
  <label for="label6">ここに画像を入れる</label>
  <input type="checkbox" id="label6"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます<br>ここに好きな文章を入れます<br>ここに好きな文章を入れます</div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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


ここに好きな文章を入れます
ここに好きな文章を入れます
ここに好きな文章を入れます

画像を押すと文書が表示する（枠幅いっぱい表示）

CSS

/*画像を押すと文書が表示する（枠幅いっぱい表示）*/
.g-bunsho-hyouzi7 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*画像の設定*/
.g-bunsho-hyouzi7 label img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  cursor :pointer; /*矢印の形*/
  -ms-transition: 0.5s; /*変化時間*/  
  -webkit-transition: 0.5s; /*変化時間*/
  transition: 0.5s; /*変化時間*/
}
/*マウスを画像の上にのせたとき*/
.g-bunsho-hyouzi7 label img:hover {
  opacity: 0.7; /*半透明*/
}
/*文章を見えなくする*/
.g-bunsho-hyouzi7 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.g-bunsho-hyouzi7 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
  display: block; /*枠幅いっぱい表示*/
}
/*画像を押すと文章表示*/
.g-bunsho-hyouzi7 input:checked ~ .bunsho-miseru {
  padding: 0px 10px 0px 10px; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
  display: block; /*枠幅いっぱい表示*/
  border: solid 2px black; /*枠線*/
  background: #ffe1e1; /*背景色*/
  text-decoration: underline dashed 1px black; /*下線*/
}

HTML

<div class="g-bunsho-hyouzi7">
  <label for="label7">ここに画像を入れる</label>
  <input type="checkbox" id="label7"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます<br>ここに好きな文章を入れます<br>ここに好きな文章を入れます</div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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


ここに好きな文章を入れます
ここに好きな文章を入れます
ここに好きな文章を入れます

画像を押すと文書が表示する（指定した幅で表示）

CSS

/*画像を押すと文書が表示する（指定した幅で表示）*/
.g-bunsho-hyouzi8 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*画像の設定*/
.g-bunsho-hyouzi8 label img{
  width: 450px; /*画像の横幅*/
  height: 255px; /*画像の高さ*/
  cursor :pointer; /*矢印の形*/
  -ms-transition: 0.5s; /*変化時間*/  
  -webkit-transition: 0.5s; /*変化時間*/
  transition: 0.5s; /*変化時間*/
}
/*マウスを画像の上にのせたとき*/
.g-bunsho-hyouzi8 label img:hover {
  opacity: 0.7; /*半透明*/
}
/*文章を見えなくする*/
.g-bunsho-hyouzi8 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.g-bunsho-hyouzi8 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
  width: 80%; /*枠の幅*/
}
/*画像を押すと文章表示*/
.g-bunsho-hyouzi8 input:checked ~ .bunsho-miseru {
  padding: 0px 10px 0px 10px; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
  width: 80%; /*枠の幅*/
  border: solid 2px black; /*枠線*/
  background: #e1fbff; /*背景色*/
  text-decoration: underline dashed 1px black; /*下線*/
}

HTML

<div class="g-bunsho-hyouzi8">
  <label for="label8">ここに画像を入れる</label>
  <input type="checkbox" id="label8"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます<br>ここに好きな文章を入れます<br>ここに好きな文章を入れます</div>
</div>
「ここに画像を入れる」の文字を消して、画像を入れてください。

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


ここに好きな文章を入れます
ここに好きな文章を入れます
ここに好きな文章を入れます