講座2

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

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

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

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

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

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

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

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

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

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

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

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

貼り付けました。

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

「OK」を押します。

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

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

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

HTMLとCSSの説明

CSS

/*文字を押すと文書が表示する（基本）*/
.bunsho-hyouzi1 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*文字の装飾*/
.bunsho-hyouzi1 label {
  font-size: 1.5em; /*文字の大きさ*/
  font-weight: bold; /*太字*/
  cursor :pointer; /*矢印の形*/
}
/*マウスを文字の上にのせたとき*/
.bunsho-hyouzi1 label:hover {
  color: orange; /*文字の色*/
}
/*文章を見えなくする*/
.bunsho-hyouzi1 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.bunsho-hyouzi1 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
}
/*文字を押すと文章表示*/
.bunsho-hyouzi1 input:checked ~ .bunsho-miseru {
  padding: 10px 0; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
}

HTML

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

「margin: 2em 0;」は、「続きを見る」の文字の上下の余白のCSSコードです。

「padding: 0;」は、「続きを見る」の文字の周りの余白をゼロにするためのCSSコードです。

「font-size: 1.5em;」は、「続きを見る」の文字の大きさを設定するためのCSSコードです。

「font-weight: bold;」は、「続きを見る」の文字を太字にするためのCSSコードです。

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

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

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

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

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

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

「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

/*文字を押すと文書が表示する（基本）*/
.bunsho-hyouzi1 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*文字の装飾*/
.bunsho-hyouzi1 label {
  font-size: 1.5em; /*文字の大きさ*/
  font-weight: bold; /*太字*/
  cursor :pointer; /*矢印の形*/
}
/*マウスを文字の上にのせたとき*/
.bunsho-hyouzi1 label:hover {
  color: orange; /*文字の色*/
}
/*文章を見えなくする*/
.bunsho-hyouzi1 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.bunsho-hyouzi1 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
}
/*文字を押すと文章表示*/
.bunsho-hyouzi1 input:checked ~ .bunsho-miseru {
  padding: 10px 0; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
}

HTML

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

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


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

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

CSS

/*文字を押すと文書が表示する（下線付き）*/
.bunsho-hyouzi2 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*文字の装飾*/
.bunsho-hyouzi2 label {
  font-size: 1.5em; /*文字の大きさ*/
  font-weight: bold; /*太字*/
  cursor :pointer; /*矢印の形*/
}
/*マウスを文字の上にのせたとき*/
.bunsho-hyouzi2 label:hover {
  color: orange; /*文字の色*/
}
/*文章を見えなくする*/
.bunsho-hyouzi2 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.bunsho-hyouzi2 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
}
/*文字を押すと文章表示*/
.bunsho-hyouzi2 input:checked ~ .bunsho-miseru {
  padding: 10px 0; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
  text-decoration: underline; /*下線*/
}

HTML

<div class="bunsho-hyouzi2">
  <label for="label2">続きを見る</label>
  <input type="checkbox" id="label2"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます</div>
</div>

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


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

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

CSS

/*文字を押すと文書が表示する（マーカー付き）*/
.bunsho-hyouzi3 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*文字の装飾*/
.bunsho-hyouzi3 label {
  font-size: 1.5em; /*文字の大きさ*/
  font-weight: bold; /*太字*/
  cursor :pointer; /*矢印の形*/
}
/*マウスを文字の上にのせたとき*/
.bunsho-hyouzi3 label:hover {
  color: orange; /*文字の色*/
}
/*文章を見えなくする*/
.bunsho-hyouzi3 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.bunsho-hyouzi3 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
}
/*文字を押すと文章表示*/
.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="bunsho-hyouzi3">
  <label for="label3">続きを見る</label>
  <input type="checkbox" id="label3"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます</div>
</div>

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


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

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

CSS

/*文字を押すと文書が表示する（枠線付き）*/
.bunsho-hyouzi4 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*文字の装飾*/
.bunsho-hyouzi4 label {
  font-size: 1.5em; /*文字の大きさ*/
  font-weight: bold; /*太字*/
  cursor :pointer; /*矢印の形*/
}
/*マウスを文字の上にのせたとき*/
.bunsho-hyouzi4 label:hover {
  color: orange; /*文字の色*/
}
/*文章を見えなくする*/
.bunsho-hyouzi4 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.bunsho-hyouzi4 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
}
/*文字を押すと文章表示*/
.bunsho-hyouzi4 input:checked ~ .bunsho-miseru {
  padding: 10px 20px 10px 20px; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
  display: inline-block; /*文章のところだけ枠線*/
  border: solid 2px black; /*枠線*/
}

HTML

<div class="bunsho-hyouzi4">
  <label for="label4">続きを見る</label>
  <input type="checkbox" id="label4"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます</div>
</div>

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


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

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

CSS

/*文字を押すと文書が表示する（枠線と背景）*/
.bunsho-hyouzi5 {
  margin: 2em 0 -0.5em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*文字の装飾*/
.bunsho-hyouzi5 label {
  font-size: 1.5em; /*文字の大きさ*/
  font-weight: bold; /*太字*/
  cursor :pointer; /*矢印の形*/
}
/*マウスを文字の上にのせたとき*/
.bunsho-hyouzi5 label:hover {
  color: orange; /*文字の色*/
}
/*文章を見えなくする*/
.bunsho-hyouzi5 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.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; /*文章のところだけ枠線*/
}
/*文字を押すと文章表示*/
.bunsho-hyouzi5 input:checked ~ .bunsho-miseru {
  margin-bottom: 3em; /*文章の下側の余白*/
  padding: 10px 20px 10px 20px; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
  display: inline-block; /*文章のところだけ枠線*/
  border: solid 2px black; /*枠線*/
  background: #ebffe1; /*背景色*/
}

HTML

<div class="bunsho-hyouzi5">
  <label for="label5">続きを見る</label>
  <input type="checkbox" id="label5"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます</div>
</div>

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


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

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

CSS

/*文字を押すと文書が表示する（枠線と背景と下線）*/
.bunsho-hyouzi6 {
  margin: 2em 0 -0.5em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*文字の装飾*/
.bunsho-hyouzi6 label {
  font-size: 1.5em; /*文字の大きさ*/
  font-weight: bold; /*太字*/
  cursor :pointer; /*矢印の形*/
}
/*マウスを文字の上にのせたとき*/
.bunsho-hyouzi6 label:hover {
  color: orange; /*文字の色*/
}
/*文章を見えなくする*/
.bunsho-hyouzi6 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.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; /*文章のところだけ枠線*/
}
/*文字を押すと文章表示*/
.bunsho-hyouzi6 input:checked ~ .bunsho-miseru {
  margin-bottom: 3em; /*文章の下側の余白*/
  padding: 10px 20px 10px 20px; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
  display: inline-block; /*文章のところだけ枠線*/
  border: solid 2px black; /*枠線*/
  background: #fff9e1; /*背景色*/
  text-decoration: underline dashed 1px black; /*下線*/
}

HTML

<div class="bunsho-hyouzi6">
  <label for="label6">続きを見る</label>
  <input type="checkbox" id="label6"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます<br>ここに好きな文章を入れます<br>ここに好きな文章を入れます</div>
</div>

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


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

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

CSS

/*文字を押すと文書が表示する（枠幅いっぱい表示）*/
.bunsho-hyouzi7 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*文字の装飾*/
.bunsho-hyouzi7 label {
  font-size: 1.5em; /*文字の大きさ*/
  font-weight: bold; /*太字*/
  cursor :pointer; /*矢印の形*/
}
/*マウスを文字の上にのせたとき*/
.bunsho-hyouzi7 label:hover {
  color: orange; /*文字の色*/
}
/*文章を見えなくする*/
.bunsho-hyouzi7 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.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; /*枠幅いっぱい表示*/
}
/*文字を押すと文章表示*/
.bunsho-hyouzi7 input:checked ~ .bunsho-miseru {
  padding: 10px 20px 10px 20px; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
  display: block; /*枠幅いっぱい表示*/
  border: solid 2px black; /*枠線*/
  background: #ffe1e1; /*背景色*/
  text-decoration: underline dashed 1px black; /*下線*/
}

HTML

<div class="bunsho-hyouzi7">
  <label for="label7">続きを見る</label>
  <input type="checkbox" id="label7"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます<br>ここに好きな文章を入れます<br>ここに好きな文章を入れます</div>
</div>

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


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

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

CSS

/*文字を押すと文書が表示する（指定した幅で表示）*/
.bunsho-hyouzi8 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*文字の装飾*/
.bunsho-hyouzi8 label {
  font-size: 1.5em; /*文字の大きさ*/
  font-weight: bold; /*太字*/
  cursor :pointer; /*矢印の形*/
}
/*マウスを文字の上にのせたとき*/
.bunsho-hyouzi8 label:hover {
  color: orange; /*文字の色*/
}
/*文章を見えなくする*/
.bunsho-hyouzi8 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.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%; /*枠の幅*/
}
/*文字を押すと文章表示*/
.bunsho-hyouzi8 input:checked ~ .bunsho-miseru {
  padding: 10px 20px 10px 20px; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
  width: 80%; /*枠の幅*/
  border: solid 2px black; /*枠線*/
  background: #e1fbff; /*背景色*/
  text-decoration: underline dashed 1px black; /*下線*/
}

HTML

<div class="bunsho-hyouzi8">
  <label for="label8">続きを見る</label>
  <input type="checkbox" id="label8"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます<br>ここに好きな文章を入れます<br>ここに好きな文章を入れます</div>
</div>

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


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