Jsみたいな動きを出すHTMLタグ
<details> タグと<summary> タグ
HTML5.1から追加されたdetails要素やsummary要素では、要素をクリックすることで詳細説明を見せたり隠したりする機能が実装されました。
こうした機能はこれまで JavaScriptを使って実装されていましたが、 HTMLタグとして使えば意味構造を保持したコーディングすることが可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<details> <summary> シャア専用ザク </summary> <p> 型式番号MS-06S。末尾のSは指揮官用を意味する。</p> <p>F型を元に指揮官やベテランパイロット用に推力を30%増すなど細部が改修された機体である。</p> <p>ただし、燃料タンクの増設は行われていないため、稼働時間は短くなっている。また、指揮官用に通信能力を強化するため、ブレードアンテナが標準で装備されている。</p> <p>指揮官はパーソナルカラーに塗装することを許されており、その中で特に有名なのが、シャア・アズナブル少佐が搭乗した機体である。</p> <p>シャア専用機は「赤い彗星」の名の通り全身を赤系統（強めのピンクとワインレッド）で塗装している。</p> <p> シャアの搭乗した機体の中で、続編も含めて全く損傷しなかったのはこのシャア専用ザクだけである </p> </details> |
detailsタグで全体を囲んであげます。
summaryタグでくくった要素は見出しのように表示され、表示・非表示のトリガーになります
「シャア専用ザク」というトリガーをクリックすることで、詳細を表示・非表示
詳細はsummaryタグの後でdetailsタグの中に収めておきましょう
この機能を使えば、商品の詳細情報を掲載して、閲覧したい方が見られるようにすることが可能です。
サンプルページ
作りましたのでどうぞ
HTMLとCSSだけでつくっていますYO
