# たまにはHTML/CSSの知識もアップデートしよう
2025.8.5.(Tue.) 技術情報共有会
T.Morinaga

---

## HTML/CSSのアップデート
* 毎日いろいろな記事が共有されている中、こんな記事が。
* [最近のHTMLを改めてちゃんと学んでみた](https://zenn.dev/dinii/articles/16b3e71b580b6c) (7/25に共有)
* [新卒エンジニア向けHTML/CSS研修を開催しました](https://creators.bengo4.com/entry/2025/08/01/080000) (8/1に共有)
* HTMLは2019年にHTML Living Standardが標準となって以降、連日のようにアップデートされている
* CSSについても各ブラウザベンダーなどが中心となり次々と新機能が開発され、W3Cでの仕様もアップデートされている
* そこで今回は最近の HTML/CSS で実務ではあまり見かけないが有用なものを紹介します。

---

## HTML
### \<details\>\<summary\>

* 折りたたみウィジェットを(HTMLのみで)作成/表示できる
* https://developer.mozilla.org/ja/docs/Web/HTML/Element/details
* [サンプル](https://codepen.io/t_morinaga/pen/KgbJNP)
* 最近「name」属性が追加された → 同じnameを持つものは1つだけ開くことができる
* [サンプル](http://codepen.io/t_morinaga/pen/ZYbeMov)
* CSSでいろいろstyleをいじることも可能です
* [サンプル](https://codepen.io/t_morinaga/pen/xbwqaJy)
* アニメーションは特殊なCSS設定またはJavaScriptが必要<br>(参考：[detailsとsummaryタグで作るアコーディオンUI - アニメーションのより良い実装方法](https://ics.media/entry/220901/))

---

### \<dialog\>


* ダイアログボックスを(HTMLのみで)作成/表示できる
* https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/dialog
* [HTMLのみサンプル](https://codepen.io/t_morinaga/pen/zYgrWjv)
* [HTMLとJavaScriptでモーダルダイアログのサンプル](https://codepen.io/t_morinaga/pen/KwdWxjy)
* ダイアログからの返り値(returnValue)も得ることができる
* https://developer.mozilla.org/ja/docs/Web/API/HTMLDialogElement/returnValue
* [returnValueサンプル](https://codepen.io/t_morinaga/pen/wBKdaag)

---

## CSS
### CSS Grid Layout
* CSS Grid Layout自体は[以前からあった](https://hackmd.io/W9F8NxuQSw-yG_iz3YaLpA?view#CSS-Grid-Layout)が、新機能が増えている

---

#### grid-template-areas

* グリッド内の各セルに名前を割り当てる
* https://developer.mozilla.org/ja/docs/Web/CSS/grid-template-areas
* [サンプル](https://codepen.io/t_morinaga/pen/empWNjX)

---

#### subgrid

* グリッドの中にグリッドを作る
* https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout/Subgrid
* [サンプル](https://codepen.io/t_morinaga/pen/PwPmPpa)

---

### コンテナクエリ

* メディアクエリ `@screen media and (...)` をコンテナにも適用
* https://developer.mozilla.org/ja/docs/Web/CSS/CSS_containment/Container_queries
* [サンプル](https://codepen.io/t_morinaga/pen/ByoRoxv)
* ウィンドウのサイズではなくコンテナのサイズでstyleを切り替えることが可能なのでウィジェットに最適

---

### :has疑似クラス

* 引数内に指定したセレクタがあれば適用される
* https://developer.mozilla.org/ja/docs/Web/CSS/:has
* [サンプル](https://codepen.io/t_morinaga/pen/XJmRmON)

---

## まとめ
(以前と同じまとめとなりますが……)

* HTMLやCSSの技術は日々進化しています
* 業務にも取り入れられそうなものはどんどん取り入れて、わかりやすいコード、コーディングの効率化を目指しましょう