株式会社アプリコットデザイン株式会社アプリコットデザイン

tel.0120-622-835

営業時間/10:00〜18:00 定休日/土日祝日

tel.0120-622835

営業時間/10:00〜18:00 定休日/土日祝日

  • instagram
  • facebook

BLOGスタッフブログ

トップページ > ブログ > ようやく使えるようになったHTML

ようやく使えるようになったHTML

UPDATE : 2022.11.14

CATEGORY :
Hirabayashi
Hirabayashi

Hirabayashi

こんにちは、かずです。

以前はIEサポート外になったことから使えるCSSを紹介しました。

IEのサポート終了してからのCSS事情


今回はhtml要素でもありますので、ご紹介&忘れないためのアウトプット!


picture

<picture>
<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>
PCとスマホ用の画像を以前はbackgroundにしてcssのメディアクエリで切り替えるなり、imgタグのクラス名で出し分けをしたり等で対応していましたが、今ではHTMLにメディアクエリを書いて実装できるので簡単になりました。

details

<details>
<summary>よくある質問の質問部分</summary>
<p>よくある質問の回答部分</p>
</details>
実装例↓
よくある質問の質問部分

よくある質問の回答部分


これ便利すぎてやばいです。よくある質問はこんな感じで開いたり閉じたりしてますがJS使わずにいけるのがもうやばいです。
すごい。
<details open>としておけば最初から開いた状態にもできるので優秀。

CSSもまだあったと思うので、そのうちちゃんと使い始めたらどんどん紹介していこうと思います!

それでは。

この記事を書いた人Who wrote this blog

Hirabayashi Kazuaki

猫をこよなく愛するコーダー

RELATED POST関連する記事

CONTACTお問い合わせ

tel.0120-622835

営業時間/10:00〜18:00 
定休日/土日祝日

  • 信州ファームデザイン
  • 信州ファームマーケット
  • 株式会社POCKET
  • 株式会社Think for Design