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

"Twilight"

Index Menu
(1)<FirstTitle>:JavaScriptデモ/AJAX「外部テキスト・ファイル読み込み」 <FirstUser>:amanojaku@管理人 (1)<FirstTitle>:黄金比、白銀比、青銅比、白金比、第2黄金比、フィボナッチ <FirstUser>:amanojaku@管理人

   
   

ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:







<Number>: [000002BB]  <Date>: 2022/01/23 12:02:24
<Title>: JavaScriptデモ/AJAX「外部テキスト・ファイル読み込み」
<Name>: amanojaku@管理人



AJAXを使っているのでクライアント上では正常に動作しません。
動作を確認するには、サーバーかローカル・サーバーが必要です。


【HTMLファイル】

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
<link rel="preload" href="sample.txt" as="script">
  <!--
preloadで先読みすれば、ロードの時間を短縮できる可能性がある。
-->
<title></title>
</head>
<body>
  <button type="button" onclick="AJAX_Display()">Click!</button><br>
  <div id="idDisplay"></div>

</body>
<script>
  function AJAX_Display() {
    let wDisplay = document.getElementById("idDisplay");
    let sFileName = "sample.txt"
    let sCharset = "UTF-8"; // 文字エンコード
    // 文字エンコードが間違っていると、全角文字が文字化けします。

    let oAJAX = new XMLHttpRequest();
    oAJAX.overrideMimeType('text/plain; charset=' + sCharset);
    oAJAX.open("GET", sFileName, true);
    oAJAX.onload = function () {
      console.log("oAJAX.onload");
      if (this.readyState === 4 && this.status === 200) {
        console.log("this.readyState: " + this.readyState);
        console.log("this.status: " + this.status);
        let res = oAJAX.responseText;
        wDisplay.innerHTML = res;
      }
    };
    oAJAX.send(null);
  }
</script>
</html>


【sample.txt】

<span style="background-color: #0f0;" >HELLO WORLD!</span><br>

Block( Address 000002BB Identity 000002BB )


<Number>: [000002BA]  <Date>: 2022/01/20 14:17:02
<Title>: 黄金比、白銀比、青銅比、白金比、第2黄金比、フィボナッチ
<Name>: amanojaku@管理人



「黄金比」「白銀比」「青銅比」「白金比」「第2黄金比」とは?
https://business-textbooks.com/type-of-ratio/

フィボナッチ比率|テクニカル分析入門
http://www.fx-soken.co.jp/tech/fibonacci-ratio.html

Block( Address 000002BA Identity 000002BA )


<Number>: [0000028C]  <Date>: 2022/01/16 10:18:34
<Title>: CSSデモ/SideMenu012
<Name>: amanojaku@管理人



このコードは1つのGridレイアウトで構成されているので、フレキシブルにレイアウトを変更することが可能です。

下記は実際のページです。

http://xd305417.html.xdomain.jp/demo/SideMenu012.htm

改造する場合に注目する所は「Tab-ggg」、「Tab-ggg-sss」です。
「ggg」はグループ番号、「sss」はシリアル番号。


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
  -->
  <title></title>
  <style>
    .Border {
      border: solid thin #000;
    }

    .Display_None {
      display: none;
    }

    .Display_InlineBlock {
      display: inline-block;
    }

    .Display_Block {
      display: block;
    }

    .Position_Relative {
      position: relative;
    }

    .Position_Absolute {
      position: absolute;
    }

    .WhiteSpace_Nowrap {
      white-space: nowrap;
    }

    .UserSelect_None {
      user-select: none;
    }

    .Visibility_Hidden {
      visibility: hidden;
    }

    .Global_Container {
      display: grid;
      grid-template-columns: 2fr 1% auto 1fr;
      gap: 0;
    }

    .Main_Container {
      box-sizing: border-box;
      border: solid thin #000;
      grid-column: 1;
      grid-row: 1 / span 2147483647;
      height: 75vw;
    }

    .TabLabel {
      display: block;
      grid-column: 3;
      grid-row: span 1;
      box-sizing: border-box;
      border: solid thin #000;
      user-select: none;
      white-space: nowrap;
      font-weight: bold;
      color: #fef;
      background: #0bb;
    }

    .TabContent {
      display: none;
      grid-column: 4;
      grid-row: 1 / span 2147483647;
      box-sizing: border-box;
      border: solid thin #000;
      height: 75vw;
    }

    .TabSwitch:checked+label {
      font-weight: bold;
      color: #767;
      /*#8f8 #7f7 #5fb*/
      background: #8f8;
    }

    .TabSwitch:checked+label+.TabContent {
      display: block;
    }

    .Global_Container>label:hover {
      font-weight: bold;
      color: #767;
      /*#bef #aef #ede*/
      background: #bef;
    }

    .TabSwitch:checked+.label:hover {
      font-weight: bold;
      color: #767;
      background: #bef;
    }

    .TabLabel_Residue {
      display: block;
      grid-column: 3;
      grid-row: span 2147483647;
      box-sizing: border-box;
      border: solid thin #000;
      user-select: none;
    }

    .Global_Container>input[type='radio'] {
      display: none;
    }

  </style>
</head>
<body class="Body_Container">
  <div class="Global_Container">
    <div class="Main_Container"></div>

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

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

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

    <div class="TabLabel_Residue"></div>
  </div>
</body>
</html>


<Number>: [000002AF]  <Date>: 2022/01/15 23:05:57
<Title>: CSSデモ/SideMenu031
<Name>: amanojaku@管理人



このコードは1つのGridレイアウトで構成されているので、フレキシブルにレイアウトを変更することが可能です。

下記は実際のページです。

http://xd305417.html.xdomain.jp/demo/SideMenu031.htm

改造する場合に注目する所は「Tab-ggg」、「Tab-ggg-sss」です。
「ggg」はグループ番号、「sss」はシリアル番号。


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
  -->
  <title></title>
  <!--
!importantはもう使わない!CSSの優先順位をおさらいしよう
http://creator.aainc.co.jp/archives/4947
スタイルの優先順位
http://www.htmq.com/csskihon/007.shtml
要素型セレクタ(タイプセレクタ) …… 特定の要素にスタイルを適用する
http://www.htmq.com/selector/type.shtml
全称セレクタ(ユニバーサルセレクタ) …… すべての要素にスタイルを適用する
http://www.htmq.com/selector/universal.shtml
  -->
  <style>
    .Border {
      border: solid thin #000;
    }

    .Display_None {
      display: none;
    }

    .Display_InlineBlock {
      display: inline-block;
    }

    .Display_Block {
      display: block;
    }

    .Position_Relative {
      position: relative;
    }

    .Position_Absolute {
      position: absolute;
    }

    .WhiteSpace_Nowrap {
      white-space: nowrap;
    }

    .UserSelect_None {
      user-select: none;
    }

    .Visibility_Hidden {
      visibility: hidden;
    }

    .Stealth {
      /*CSS優先順位:10点*/
      display: none;
    }

    .Body_Container .Stealth {
      /*CSS優先順位:20点*/
      display: none;
    }

    .Global_Container {
      display: grid;
      grid-template-columns: 2fr 1% auto 1fr;
      gap: 0;
    }

    .Main_Container {
      box-sizing: border-box;
      border: solid thin #000;
      grid-column: 1;
      grid-row: 1 / span 2147483647;
      height: 75vw;
    }

    .TabLabel {
      display: block;
      grid-column: 3;
      grid-row: span 1;
      box-sizing: border-box;
      border: solid thin #000;
      user-select: none;
      white-space: nowrap;
      font-weight: bold;
      color: #fef;
      background: #0bb;
    }

    .TabContent {
      display: none;
      grid-column: 4;
      grid-row: 1 / span 2147483647;
      box-sizing: border-box;
      border: solid thin #000;
      height: 75vw;
    }

    .TabSwitch:checked+label {
      font-weight: bold;
      color: #767;
      /*#8f8 #7f7 #5fb*/
      background: #8f8;
    }

    .TabSwitch:checked+label+.TabContent {
      display: block;
    }

    .Global_Container>label:hover {
      font-weight: bold;
      color: #767;
      /*#bef #aef #ede*/
      background: #bef;
    }

    .TabSwitch:checked+.label:hover {
      font-weight: bold;
      color: #767;
      background: #bef;
    }

    .TabLabel_Residue {
      display: block;
      grid-column: 3;
      grid-row: span 2147483647;
      box-sizing: border-box;
      border: solid thin #000;
      user-select: none;
    }

    .Global_Container>input[type='radio'] {
      display: none;
    }

  </style>
</head>
<body class="Body_Container">
  <div class="Global_Container">
    <div class="Main_Container"></div>

    <input id='Tab-001' type='radio' name='Tab-001' class='TabSwitch' checked>
    <label class="TabLabel Stealth" for="Tab-001"></label>
    <div class="TabContent"></div>

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

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

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

    <div class="TabLabel_Residue"></div>
  </div>
</body>
</html>

Block( Address 000002B9 Identity 0000028C )


<Number>: [0000025C]  <Date>: 2022/01/16 10:15:46
<Title>: CSSデモ集(-)
<Name>: amanojaku@管理人



CSSデモ/Commentary001
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+000002AD&tsn+000002AD&bts+2022/01/15%2016%3A44%3A52&

CSSデモ/「transform、transition」(2)
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+00000132&tsn+00000133&bts+2021/06/27%2018%3A27%3A51&

CSSデモ/吹き出し
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+00000206&tsn+00000206&bts+2021/10/15%2018%3A56%3A05&

CSSデモ/タブ
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+000003A5&tsn+000003A5&bts+2020/09/27%2018%3A34%3A30&

CSSデモ/タブ リンク使用(2)
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+00000470&tsn+00000471&bts+2021/03/27%2023%3A31%3A38&

CSSデモ/アコーディオン・メニュー011
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+0000029E&tsn+0000029E&bts+2022/01/11%2000%3A25%3A45&

CSSデモ/アコーディオン・メニュー021
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+0000029E&tsn+0000029F&bts+2022/01/11%2000%3A25%3A45&

CSSデモ/アコーディオン・メニュー031
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+0000029E&tsn+000002A5&bts+2022/01/11%2000%3A25%3A45&

CSSデモ/超シンプルCSSドロップダウンメニュー
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+0000023B&tsn+0000023B&bts+2021/11/15%2010%3A22%3A55&

CSSデモ/シンプルCSSドロップダウンメニュー086
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+00000264&tsn+00000264&bts+2021/12/06%2019%3A49%3A43&

CSSデモ/SideMenu012
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+0000028C&tsn+0000028C&bts+2022/01/04%2023%3A36%3A55&

CSSデモ/SideMenu031
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+0000028C&tsn+000002AF&bts+2022/01/04%2023%3A36%3A55&

CSSデモ/ハンバーガー・メニュー012
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+00000280&tsn+00000280&bts+2021/12/26%2010%3A50%3A04&

CSSデモ/ハンバーガー・メニュー016
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+00000280&tsn+00000281&bts+2021/12/26%2010%3A50%3A04&

CSSデモ/Accordion002
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+00000214&tsn+00000216&bts+2021/10/22%2023%3A52%3A44&

CSSデモ/インラインSVG「ハート」
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+00000284&tsn+00000284&bts+2021/12/30%2019%3A42%3A22&

参考

!importantはもう使わない!CSSの優先順位をおさらいしよう
http://creator.aainc.co.jp/archives/4947
スタイルの優先順位
http://www.htmq.com/csskihon/007.shtml
要素型セレクタ(タイプセレクタ) …… 特定の要素にスタイルを適用する
http://www.htmq.com/selector/type.shtml
全称セレクタ(ユニバーサルセレクタ) …… すべての要素にスタイルを適用する
http://www.htmq.com/selector/universal.shtml


<Number>: [0000025D]  <Date>: 2022/01/11 00:52:22
<Title>: CSSデモ(+JavaScript)集
<Name>: amanojaku@管理人



CSSデモ(+JavaScript)/ハンバーガー・メニュー006
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+00000242&tsn+00000253&bts+2021/11/21%2002%3A33%3A11&

CSSデモ(+JavaScript)/ハンバーガー・メニュー019
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+00000280&tsn+00000282&bts+2021/12/26%2010%3A50%3A04&

Block( Address 000002B8 Identity 0000025C )


<Number>: [00000098]  <Date>: 2022/01/16 09:54:30
<Title>: Javaの注意点
<Name>: amanojaku@管理人



可読性が上がるなら積極的に三項演算子を使う事が推奨されます。

ファイルにはtry-with-resources文を使うことが強く推奨されます。

できれば、正規表現の習得が推奨されます。

できれば、「オブジェクト指向プログラミング、総称型(Generics)」の習得が推奨されます。
オブジェクト指向プログラミングに関しては下記デモを参考にして下さい。

Javaデモ/CUI対戦デモ(10) オブジェクト指向プログラミング
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+00000437&tsn+000004F7&bts+2021/02/08%2006%3A20%3A07&


GUIコンポーネントの設定もはイベント・ディスパッチ・スレッドで設定しなければならなくなりました(下記ページ参照)。

Java Swing/「JFrameスケルトン・テンプレート」(7)
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+00000428&tsn+00000428&bts+2021/01/20%2016%3A41%3A48&


スレッドは「Concurrency Utilities」のスレッドが強く推奨されます。
(知らぬ間に)古いタイプのThreadが非推奨に?、(正式な非推奨では無いかもしれないが)そんなクズみたいなモノを何時までも使わないでくれよ、って話(下記ページ参照)。
当然、「排他制御:synchronized」、「最適化の抑制:volatile」も理解している必要があります。

マルチコア時代のCPUリソースを有効活用--Java EE 7で進化した並列処理を理解する
https://builder.japan.zdnet.com/java/35032957/
https://builder.japan.zdnet.com/java/35032957/2/


余裕があるなら、「Stream API、ラムダ式」も勉強してみると良いでしょう。

Javaの小技
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+000000E0&tsn+000000E0&bts+2018/07/30%2020%3A54%3A02&


Stringの文字列結合はクソ遅い(アマチュアなら それほど気にしなくても良い)。
注意点、StringBufferはスレッドセーフ、StringBuilderはスレッドアンセーフ。

【Java】文字列結合の速度比較
https://qiita.com/nkojima/items/0098dccbe4a593bc0306


Mostly-Concurrent Mark & Sweep GC のアルゴリズム
http://www.nminoru.jp/~nminoru/java/cms/concurrent_mark_sweep.html

>メモリの低価格・大容量化、64 ビットプロセッサの普及に伴って JavaVM が使える・使うメモリ量は増大している。 STW(Stop-the-World) 型 GC アルゴリズムの多くは、GC が管理しているメモリ量、生存しているオブジェクトの個数、生存しているオブジェクトの参照数のいずれかに比例するため、GC 停止時間がどんどん伸びる傾向があるのである。 ギガバイトを越えるようなメモリを使用した場合、GC による停止時間が 10 秒を越えるようなパターンの現れている。

この「GC による停止時間が 10 秒を越えるようなパターン」とは、ギガバイトを越えるようなメモリを使用した場合なので、一般の話では有りません。
このGC による停止は「STW(Stop-the-World)」とも呼ばれる。

Javaのヒープ・メモリ管理の仕組み
https://4geek.net/how-java-heap-and-memory-management-work/

現在、オプションで圧倒的にパフォーマンスの良いZGC(Z Garbage Collector)がサポートされている。

ZGC | What’s new in JDK 16
https://logico-jp.io/2021/03/31/zgc-whats-new-in-jdk-16/

>ZGCプロジェクトを開始したときの目標は、GCポーズ(Stop-the-World)に10msec以上の時間をかけないことでした。当時、10msecは野心的な目標に思えました。

>最初の目標である10msecを達成した後、私たちは再度目標を定め、より野心的な目標、GCのポーズ(Stop-the-World)時間は1msecを超えてはならないという目標を設定しました。JDK 16で、この目標も達成できたことをご報告します。


「従来のEJBは存在自体が間違いだった」,軽量コンテナ「Spring Framework」開発者のRod Johnson氏吠える
https://xtech.nikkei.com/it/free/NSW/NEWS/20050621/163065/

>エンティティBean(EJB:Enterprise JavaBeansに含まれるデータベース・アクセスのカプセル化機能)なんてないほうがよかった。

Block( Address 000002B6 Identity 00000098 )


<Number>: [00000041]  <Date>: 2022/01/16 04:11:33
<Title>: Windows 10 PCの推奨スペック
<Name>: amanojaku@管理人



Windows 10ならProを強く推奨

メモリーは16GByteを強く推奨
※学習用なら それで良いですが、メモリーをガバガバ喰うアプリはキツイと思われます。

ストレージ(又はHDD)は(最低でも)256GByteを推奨
※学習用なら それで良いですが、「動画のダウンロード、バックアップ」は考慮していません。
「動画のダウンロード、バックアップ」をしたいなら、「1TByte~2TByte」のHDDを別途購入も検討してみると良いでしょう(外部HDDなら増設は簡単です)。
なお、SSD(USBメモリーなど)にも寿命(書き込みによる劣化)が有るので注意して下さい(安物は当然 書き込み可能回数が少ないです)。


中華製PCはバックドアが仕込まれている可能性があるので注意して下さい、「Lenovo、ThinkPad」などが有名どころです。
蛇足ですが、中華製スマホもバックドアが仕込まれている可能性があるので注意して下さい。

Windows 10は強制アップデートで調子が悪くなる場合があるので、アップデートの延期が強く推奨されます。
Windows 10 Homeではアップデートの延期は出来ないので、Windows 10 Proを強く推奨、設定が必要です(下記参照)。

[Windows10] 大型のシステム更新を遅らせる方法
https://faq.mypage.otsuka-shokai.co.jp/app/answers/detail/a_id/288242/~/%5BWindows10%5D-%E5%A4%A7%E5%9E%8B%E3%81%AE%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E6%9B%B4%E6%96%B0%E3%82%92%E9%81%85%E3%82%89%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95


<Number>: [00000258]  <Date>: 2021/11/26 17:12:47
<Title>: 4kモニターを購入する場合の注意点
<Name>: amanojaku@管理人



4kモニターを購入する場合は、当然 PC側も4kモニターに対応している必要があります。
画面はノングレア(非光沢)処理を推奨、また格安モニターだと高さ調整が出来ない場合があるようで、画面の高さが高いと非常に見づらく首が痛くなったりするそうです(格安モニターでも高さが低いなら問題ないかもしれませんが)。
TSUKUMOでは「ドット抜け交換保証(オプション)」を有償で付与可能なようです(料金は下記参照)。

とっても便利なツクモ パーツ交換保証~モニター編~
https://blog.tsukumo.co.jp/honten/2018/09/post_2155.html

ディスクトップPCならグラフィックボードで対応すると良いでしょう。
※空いてる「PCI Express」スロットが1つ必要になります、モニター用の接続ケーブルが必用です。
ロープロファイル対応で無い場合は、空いてる「PCI Express」スロットが2つ以上 必要になります。
補助電源ありの場合は、グラフィックボード用・電源ケーブル(2本以上 必要な場合もある)や、電源ケーブルに空きが無い場合は電源用・分岐ケーブルが必要になります。

最大解像度:DCI 4K (4096x2160)、ロープロファイル対応、補助電源:なし
https://kakaku.com/pc/videocard/itemlist.aspx?pdf_Spec003=1&pdf_Spec113=5&pdf_Spec115=2

将来性を見据えて、8k解像度まで対応したい場合。

最大解像度:8K (7680x4320)、ロープロファイル対応、補助電源:なし
https://kakaku.com/pc/videocard/itemlist.aspx?pdf_Spec003=1&pdf_Spec113=7&pdf_Spec115=2

Block( Address 000002B5 Identity 00000041 )


<Number>: [000002AD]  <Date>: 2022/01/15 16:44:52
<Title>: CSSデモ/Commentary001
<Name>: amanojaku@管理人



表示されているワードをクリックすると、その解説が表示されます。

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

改造する場合に注目する所は「Tab-ggg」、「Tab-ggg-sss」です。
「ggg」はグループ番号、「sss」はシリアル番号。


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
  <title></title>
  <style>
    .Accordion_Container {}

    .Accordion_Label_Opener {
      font-weight: bold;
      color: #fef;
      background: #0bb;
    }

    .Accordion_Content {
      display: none;
      border: solid thin #000;
      border-radius: 0.5rem;
      padding: 0.25rem;
      margin: 0.25rem;
    }

    .Accordion_Radio:checked+.Accordion_Content {
      display: block;
    }

    .Accordion_Label_Opener:hover {
      font-weight: bold;
      color: #767;
      background: #5ef;
      cursor: pointer;
    }

    .Accordion_Radio {
      display: none;
    }

  </style>
</head>
<body>
  <div class="Accordion_Container">
    <label class="Accordion_Label_Opener" for="Tab-001-001">いろはにほへと ちりぬるを</label>
    <label class="Accordion_Label_Opener" for="Tab-001-002">わかよたれそ つねならむ</label>
    <label class="Accordion_Label_Opener" for="Tab-001-003">うゐのおくやま けふこえて</label>
    <label class="Accordion_Label_Opener" for="Tab-001-004">あさきゆめみし ゑひもせす</label>
    <br>

    <input id="Tab-001" type="radio" name="Tab-001" class="Accordion_Radio" checked>

    <input id="Tab-001-001" type="radio" name="Tab-001" class="Accordion_Radio">
    <div class="Accordion_Content">
      【色は匂えど 散りぬるを】<br>
      『花は咲いても散ってしまうのに』<br>
    </div>

    <input id="Tab-001-002" type="radio" name="Tab-001" class="Accordion_Radio">
    <div class="Accordion_Content">
      【我が世誰ぞ 常ならん】<br>
      『永遠に同じ姿でこの世に居続ける人も物もない』<br>
    </div>

    <input id="Tab-001-003" type="radio" name="Tab-001" class="Accordion_Radio">
    <div class="Accordion_Content">
      【有為の奥山 今日超えて】<br>
      『つらく・きびしく・険しい人生という山を今日も一つ乗り越えて』<br>
    </div>

    <input id="Tab-001-004" type="radio" name="Tab-001" class="Accordion_Radio">
    <div class="Accordion_Content">
      【浅き夢見し 酔ひもぜず】<br>
      『酔っ払っているかのように、真理から目を背け、はかない夢を見ないように』<br>
    </div>
  </div>
</body>
</html>

Block( Address 000002AD Identity 000002AD )






ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:

   
   

管理者用 Password:

  




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