[HTML+CSS]タイトルをクリックすると詳細が表示される実装

タイトルをクリックするとその詳細が表示されるものをCSSだけで実装するものを仕事のなかで作った。
インターネットで参考にしたものをちょろっと変えたものだけれど。
CSSで実装できるのは、作るのも簡単だし見栄えもいいのでとてもいい。
参考元：https://saruwakakun.com/html-css/reference/accordion

表示されるブラウザの様子

Image from Gyazo

HTML+CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ラベルをクリックすると詳細が表示される</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
/* スタイルシート 外出したほうがいい */
/* ラベルをあわせるとマウスポインタを変更 */
.content label {
    background-color: #cccccc;
    cursor :pointer;
    display: block;
}
/* チェックボックスは不可視にする */
.content .chklbl {
    display: none;
}
/* 詳細は通常不可視にする */
.content .detail {
    background-color: #666666;
    padding-left: 1em;
    display: none;
}
/* ラベルをクリックする（内部的にチェックする）と、
   詳細を可視化する */
.chklbl:checked + label + .detail {
    display: block;
}
/* ラベルの冒頭に＋を表示 */
.content label:before {
    content: '＋';
}
/* ラベルをクリックする（内部的にチェックする）と、
   ラベルの冒頭を－する */
.chklbl:checked + label:before {
    content: '－';
}

-->
</style>
</head>
<body>
<!--
    contentクラス配下に構成する

    div.content
    ├ input      チェックボックス（不可視）
    ├ label      ラベル名
    └ div.detail 詳細を記述
    
    input-label-div.detailの組み合わせを繰り替えす。
-->

<div class="content">
<!-- ラベルＸ -->
<input type="checkbox" id="labelX" class="chklbl"/>
<label for="labelX">ラベルＸ</label>
<div class="detail">
ラベルＸの詳細です<br />
</div>
<!-- ラベルＹ -->
<input type="checkbox" id="labelY" class="chklbl"/>
<label for="labelY">ラベルＹ</label>
<div class="detail">
ラベルＹの詳細です<br />
</div>
<!-- ラベルＺ -->
<input type="checkbox" id="labelZ" class="chklbl"/>
<label for="labelZ">ラベルＺ</label>
<div class="detail">
ラベルＺの詳細です<br />
</div>
</div>
</body>
</html>

コメント

コメントを投稿

このブログの人気の投稿

リモートワークをLogicoolのマウスとキーボードで複数ＰＣ切り替えて優勝した

イメージ
デバイス多すぎるんやが問題 仕事上シンクライアントPCを支給されているのだけれども、当然キーボードとマウスが増えるのでとても面倒くさい。 シンクライアントPCはノートPCなのでノートのキーボード使えやって話でもあるけど、使いにくいでしょ？ ということで、自前のをつないでいるんだけれど、メインPCでも調べごとしながらしているとなかなか作業場が厄介になる。 メインで使っているのはMXREGOじゃない 上図のマウス１に当たる部分はLogicoolのMX REGOというトラックボールマウスである 「そういえばこれPC2台接続できるじゃない？ ということで、ついでにキーボードも切り替えできるものとしてK375sを購入した Logicool K375s Multi-Device Wireless Keyboard & Stand Combo 構成 問題点 シンクライアントPCにLogicoolのソフト入れられない シンクライアントPCなのでLogicoolのPCにUnifyingソフトウェアを入れることができない。 つまり設定することができない つまり詰んだ？ ぴえん🥺 解決法 「聞こえますか…UnifyingはBIOSで認識できるのです...」 アラサーおじさんが泣いていると直接脳内に声が聞こえました。 アメージング！ Unifyingレシーバーは直接デバイスとペアリングしているのです！ ここらへんの仕様を調べたのですが、Logicoolのホワイトペーパーとかも見当たらないし、今ひとつつかめないんですよね。 同じような無線仕様のBluetoothはアプリケーションレベルで解決してるっぽい？のですが、Unifyingはハードウェアレベルで解決してるようですね。 話はそれましたが、解決法はこうです。 メインPCに2つ目のレシーバーを挿す 通常どおりペアリングする そのレシーバーを外しメインPCには元のレシーバーを挿す シンクラPCに2つ目のレシーバーを挿す これで解決できました。レシーバー上にペアリング情報が残るのですね。なので、こういった他PCでペアリングして指し直して使うという取り回しができるようですね。 リモートワークも一組のキーボードとマウスですむようになった...
続きを読む

VBAでのInterfaceやキャスト

前段 個人的に、Excel VBAを仕事で組む機会がある。 自由に組んでいるので、いろいろと設計方法、実装方法を考える。 VBAのインターフェース VBAにはJavaでいうextendsのような継承はない。 Interfaceがあるので、ポリモーフィズムを実現するときは、これを使うのが一つの方法論だ。 ただ、インターフェースは、というか、VBAはクラスのキャストができない。 インターフェイス自体が、そうする性質のものではないのだが、つい欲しくなるときがある。 Object型 さて、話は変わるが、VBAには、Object型というものがある。 平たく言うと、あらゆるクラスに適する型である。あらゆるクラスのスーパークラスと思うと話が早い。 そして、Objcet型からは元のクラスで実装したプロシージャを呼ぶことができる。ObjectによるポリモーフィズムもVBAでは可能、といえる。 なので、ダウンキャストを実現するために、インターフェイスでインスタンスが自己をObjectで出力するためのメソッドを定義してあげることで、スーパークラスからサブクラスへのキャストを実現する。 実装例 Class InterfaceClass '' プロパティ Public porp as String　 '' イミディエイトウィンドウに出力する Public Sub printOut() As String End Sub '' 自己をObject型で出力する Public Function Object() As Object End Function Class ImplementClass '' InterfaceClassを実装する Implements InterfaceClass '' スーパークラスのGet,Letのため、 '' 値を保持しておくためのプロパティ Private prop As String '' Getter Public Property Get InterfaceClass_prop() As String InterfaceClass_prop = prop End Property ...
続きを読む

SUPERHOTがいかにSUPERHOTか語りたい

イメージ
注意 ただの感想の垂れ流しです 全世界が驚愕した待望したゲーム性 SUPER HOT は、今までで3作でている。 SUPER HOT （以下SUPERHOT） SUPER HOT VR（以下VR） SUPER HOT : MIND CONTROL DELETE（以下DELETE） SUPERHOTは2013年にKickStarterでクラウンドファンディングされて、見事成立させできたゲームだ。 このゲーム性は、シンプルかつ非常に魅力的なものだった。 「自分が動いている間だけ時間が進む。自分が動かなければ（ほとんど）すべてが止まる」 映画MATRIXの有名な場面のように 弾丸が止まって見える を体現したゲームだったのだ。 死角から弾丸が発射されても、軌道を見てから紙一重で避けて、反撃する。そんな映画みたいな演出を実体験できる。 ブラウザでできるプロトタイプからそれが実現できていた。 プロトタイプを再生する-SUPERHOT クラウンドファンディングが成功して当然のゲームなのだ。 質実剛健なグラフィック SUPERHOTが発売されたものは、グラフィック自体は特に凝っているわけではなかった。すべて３Ｄグラフィックだが、ポリゴンチックで２０１３年当時でもきめ細かいグラフィックとは言えない。 ただ、その表現が非常にゲームとしてシンプルかつ機能美を追求したものだった。 敵は赤色 武器は黒色 ステージなどその他は白色 直感的でゲームを理解できる。そして、敵キャラクターはほとんど同じ造形のポリゴン。ただの記号だ。 ゲームはゲーム。下手な感情移入など不要。そう言わんばかりの作りだ。 先の「映画的な楽しみ方」を１００％没頭させるゲームなのだ。 シンプルなゲーム性に高い戦略性 しかし、一言でいうとこのゲーム「死にゲー」である。 ルールハシンプルだが、かなりの高い戦略性を求められる。 1対1で射撃戦を講じるなら余裕だろう。しかし、このゲーム敵がわんさか出て、１対多を必然的に求められる。 ３６０度どこから弾丸が飛んでくるか分からない。故に、全体を見渡しての状況把握が必要となる。 そうやって視点を動かしている間に背後を取られる、などというのもしばしば起こる。 そして、「ゲームオーバー」 さながら、ワンマンアーミーの過酷さ...
続きを読む