トップ･ページの表示 注意書きの表示 掲示板に書き込む前に必ず この ”注意書き”を お読み下さい．

"沙羅"
★この掲示板は書き込みを停止いたしました 。
記事の書き込みはリンク･ページの表示 http://ashtarte.hotcom-web.com/utf8/smt.cgi?r+rpr/ を ご利用 下さい。

  　 
 　 

ページの表示順：｛ 新しい順／ 古い順｝．
初期･ページの表示･位置：｛ 先頭ページ／ 末尾ページ｝．
１ページ内のスレッド表示数：







<Number>: [000003A5]　 <Date>: 2021/10/17 20:09:51
<Title>: CSSデモ／タブ
<Name>: amanojaku@管理人

改造する場合に注目する所は「TAB-ggg」、「TAB-ggg-sssUNIT」の2種類あります。
「ggg」はグループ番号、「sss」はシリアル番号。

実際のページ
http://xd305417.html.xdomain.jp/demo/CSSQuestion001.htm


<html>
    <head>
<!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
        <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
        <TITLE>test</TITLE>
        <style type='text/css'>
        <!--
.tab-wrap {
    display: flex;
    flex-wrap: wrap;
}
.tab-label {
    font-weight: bold;
    color: #fef;
    background: #0bb;
    margin: 0.1em 0.3em 0.1em 0em;
    padding: 0.2em 1em;
    order: -1;
}
.tab-label:hover {
    font-weight: bold;
    color: #777;
    background: #0ee;
}
.tab-content {
    width: 100%;
    display: none;
}
.tab-switch:checked + .tab-label {
    font-weight: bold;
    color: #777;
    background: #0f7;
}
.tab-switch:checked + .tab-label+.tab-content {
     display: block;
}
.tab-wrap > input[type='radio'] {
    display: none;
}
        -->
        </style>
    </head>
    <body>

三択問題は下記サイト様から引用。<br>
【動物クイズ】動物の知識が身につく三択問題<br>
https://pedant19.com/animal-quiz<br>
<br>
<hr>
<br>

ダチョウの脳みそのサイズはどれくらい？<br>
ヒント：人間の脳みそは1200～1400グラムくらい。<br>
    <div class='tab-wrap'>
        <input id='TAB-001-001UNIT' type='radio' name='TAB-001' class='tab-switch'>
        <label class='tab-label' for='TAB-001-001UNIT'>40グラム</label>
        <div class='tab-content'>
正解です：１ばんの「40グラム」<br>
        </div>

        <input id='TAB-001-002UNIT' type='radio' name='TAB-001' class='tab-switch' >
        <label class='tab-label' for='TAB-001-002UNIT'>400グラム</label>
        <div class='tab-content'>
不正解です。<br>
        </div>

        <input id='TAB-001-003UNIT' type='radio' name='TAB-001' class='tab-switch' >
        <label class='tab-label' for='TAB-001-003UNIT'>1400グラム</label>
        <div class='tab-content'>
不正解です。<br>
        </div>
    </div>
<br>
<hr>
<br>

動物の赤ちゃんのサイズ<br>
つぎのうちで、生まれたての赤ちゃんのサイズが１ばん小さい動物はどれ？<br>
    <div class='tab-wrap'>
        <input id='TAB-002-001UNIT' type='radio' name='TAB-002' class='tab-switch' >
        <label class='tab-label' for='TAB-002-001UNIT'>トイプードル</label>
        <div class='tab-content'>
不正解です。<br>
        </div>

        <input id='TAB-002-002UNIT' type='radio' name='TAB-002' class='tab-switch' >
        <label class='tab-label' for='TAB-002-002UNIT'>カンガルー</label>
        <div class='tab-content'>
正解です：２ばんの「カンガルー」<br>
カンガルーの赤ちゃんはわずか２センチ程度の大きさで生まれてくる。<br>
        </div>

        <input id='TAB-002-003UNIT' type='radio' name='TAB-002' class='tab-switch' >
        <label class='tab-label' for='TAB-002-003UNIT'>キリン</label>
        <div class='tab-content'>
不正解です。<br>
        </div>
    </div>
<br>
<hr>
<br>

つぎのうちで本当にある恐竜の名前はどれ？<br>
    <div class='tab-wrap'>
        <input id='TAB-003-001UNIT' type='radio' name='TAB-003' class='tab-switch' >
        <label class='tab-label' for='TAB-003-001UNIT'>ゴジラサウルス</label>
        <div class='tab-content'>
正解です：１ばんの「ゴジラサウルス」<br>
化石を発見した人がゴジラの大ファンだったのでゴジラサウルスと名付けられた。<br>
        </div>

        <input id='TAB-003-002UNIT' type='radio' name='TAB-003' class='tab-switch' >
        <label class='tab-label' for='TAB-003-002UNIT'>デジモンサウルス</label>
        <div class='tab-content'>
不正解です。<br>
        </div>

        <input id='TAB-003-003UNIT' type='radio' name='TAB-003' class='tab-switch' >
        <label class='tab-label' for='TAB-003-003UNIT'>ポケモンサウルス</label>
        <div class='tab-content'>
不正解です。<br>
        </div>
    </div>
<br>
<hr>
<br>

    </body>
</html>

<Number>: [00000452]　 <Date>: 2021/03/30 12:43:23
<Title>: CSSデモ／タブ　ラジオボタン使用(2)
<Name>: amanojaku@管理人

改造する場合に注目する所は「TAB-ggg」、「TAB-ggg-sssUNIT」の2種類あります。
「ggg」はグループ番号、「sss」はシリアル番号。

実際のページ
http://xd305417.html.xdomain.jp/demo/CSSTabRadio002.htm


<html>
  <head>
<!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
    <TITLE>test</TITLE>
    <style type='text/css'>
    <!--
.tab-container {
  display: flex;
  flex-wrap: wrap;
}
.tab-label {
  font-weight: bold;
  color: #fef;
  background: #0bb;
  margin: 0.1em 0.3em 0.1em 0em;
  padding: 0.2em 1em;
  order: -1;
}
.tab-label:hover {
  font-weight: bold;
  color: #767;
  background: #0ee;
}
.tab-content {
  width: 100%;
  display: none;
}
.tab-radio:checked + .tab-label {
  font-weight: bold;
  color: #767;
  background: #0f7;
}
.tab-radio:checked + .tab-label+.tab-content {
   display: block;
}
.tab-container > input[type='radio'] {
  display: none;
}
    -->
    </style>
  </head>
  <body>

  <div class='tab-container'>
    <input id='TAB-001-001UNIT' type='radio' name='TAB-001' class='tab-radio' checked>
    <label class='tab-label' for='TAB-001-001UNIT'>001-001UNIT</label>
    <div class='tab-content'>
いろはにほへと ちりぬるをわかよたれそ つねならむうゐのおくやま けふこえてあさきゆめみし ゑひもせす<br>
    </div>

    <input id='TAB-001-002UNIT' type='radio' name='TAB-001' class='tab-radio' >
    <label class='tab-label' for='TAB-001-002UNIT'>001-002UNIT</label>
    <div class='tab-content'>
ちりぬるをわかよたれそ つねならむうゐのおくやま けふこえてあさきゆめみし ゑひもせす<br>
    </div>

    <input id='TAB-001-003UNIT' type='radio' name='TAB-001' class='tab-radio' >
    <label class='tab-label' for='TAB-001-003UNIT'>001-003UNIT</label>
    <div class='tab-content'>
つねならむうゐのおくやま けふこえてあさきゆめみし ゑひもせす<br>
    </div>
  </div>

  </body>
</html>

<Number>: [0000046F]　 <Date>: 2021/03/27 03:58:41
<Title>: CSSデモ／タブ　リンク使用(1)
<Name>: amanojaku@管理人

<html>
  <head>
<!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
    <meta charset='UTF-8'>
      <TITLE>test</TITLE>
      <style type='text/css'>
      <!--
.content {
  display: none;
}
.content:target {
  display: block;
}
      -->
      </style>
    </head>
    <body>
<nav>
  <a href='#home'>Home</a>
  <a href='#about'>About</a>
  <a href='#members'>Members</a>
</nav>
<div id='home' class='content'>Home here</div>
<div id='about' class='content'>About here</div>
<div id='members' class='content'>Members here</div>
  </body>
</html>

Block( Address 000004FD　Identity 000003A5 )






ページの表示順：｛ 新しい順／ 古い順｝．
初期･ページの表示･位置：｛ 先頭ページ／ 末尾ページ｝．
１ページ内のスレッド表示数：

 　 
 　 

管理者用 Password：

  




SMT Version 8.022(+A) Release M6.
Author : amanojaku.