こんにちは、かずです。
以前はIEサポート外になったことから使えるCSSを紹介しました。
今回はhtml要素でもありますので、ご紹介&忘れないためのアウトプット！
picture
PCとスマホ用の画像を以前はbackgroundにしてcssのメディアクエリで切り替えるなり、imgタグのクラス名で出し分けをしたり等で対応していましたが、今ではHTMLにメディアクエリを書いて実装できるので簡単になりました。
details
<details>
<summary>よくある質問の質問部分</summary>
<p>よくある質問の回答部分</p>
</details>
<summary>よくある質問の質問部分</summary>
<p>よくある質問の回答部分</p>
</details>
実装例↓
よくある質問の質問部分
よくある質問の回答部分
これ便利すぎてやばいです。よくある質問はこんな感じで開いたり閉じたりしてますがJS使わずにいけるのがもうやばいです。
すごい。
<details open>としておけば最初から開いた状態にもできるので優秀。
CSSもまだあったと思うので、そのうちちゃんと使い始めたらどんどん紹介していこうと思います！
それでは。
JOURNALが気に入ったら「いいね」してね！
<source srcset=”images/main_visual.jpg” media=”(min-width: 768px)”/>
<source srcset=”images/main_visual_sp.jpg” media=”(max-width: 767px)”/>
<img src=”images/main_visual.jpg” alt=”メインビジュアル”>
</picture>