こんにちは、かずです。
以前はIEサポート外になったことから使えるCSSを紹介しました。
今回はhtml要素でもありますので、ご紹介&忘れないためのアウトプット！
picture
PCとスマホ用の画像を以前はbackgroundにしてcssのメディアクエリで切り替えるなり、imgタグのクラス名で出し分けをしたり等で対応していましたが、今ではHTMLにメディアクエリを書いて実装できるので簡単になりました。
details
<summary>よくある質問の質問部分</summary>
<p>よくある質問の回答部分</p>
</details>
実装例↓
よくある質問の質問部分
よくある質問の回答部分
これ便利すぎてやばいです。よくある質問はこんな感じで開いたり閉じたりしてますがJS使わずにいけるのがもうやばいです。
すごい。
<details open>としておけば最初から開いた状態にもできるので優秀。
CSSもまだあったと思うので、そのうちちゃんと使い始めたらどんどん紹介していこうと思います！
それでは。
この記事をシェアする
-
人気の記事
-
新着記事
-
濃厚生クリームソース×スパイス香る粗挽き肉。長野市青木島町の『tone cafe』に新ランチ「フレンチトースト」が登場！
POSTED | 2025.11.17
-
上田市・別所温泉の北向観音で御開帳へ！参拝後に立ち寄りたいおすすめカフェもご紹介
POSTED | 2025.10.28
-
一般社団法人あいのて様が会社見学に来てくださいました。
POSTED | 2025.10.24
-
長野市の複合施設 tone village 内の『tone cafe』で生まれる、おいしい出会いの空気
POSTED | 2025.10.22
-
在宅ワークで見守れた3年間。るなぱあくで感じた“働く時間と、家族の時間”
POSTED | 2025.10.20
-
-
カテゴリー
<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>