---
# System prepended metadata

title: たまにはHTML/CSSの知識もアップデートしよう
tags: [技術共有会]

---

# たまには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\>
![details,summaryイメージ画像](https://www.webcreatorbox.com/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F2d1b8c905c1d447eb649028ca07253a8%2F8d220017de3a474a9bb50dac125a2d07%2Fthumb_summary-details.jpg&w=2048&q=90&dpl=dpl_C5YwVcCw7MhXUX9TYR3P5sLnBm4Z)

* 折りたたみウィジェットを(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\>

![dialog要素イメージ画像](https://reffect.co.jp/wp-content/uploads/2023/11/html-dialog-5.png)

* ダイアログボックスを(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
![grid-template-areasイメージ画像](https://i0.wp.com/css-tricks.com/wp-content/uploads/2022/05/s_A8CA686DA97A9B54A10BB8506B0F905A3FEF553C480B7AEBFFA08B417AE4ABF7_1642360923904_grid-template-areas.png?w=2048&ssl=1)

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

---

#### subgrid
![subgridイメージ画像](https://webdesignshake.com/wp-content/uploads/2023/11/0017-3.webp)

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

---

### コンテナクエリ
![コンテナクエリイメージ画像](https://dezalog.com/data/wp-content/themes/yellow/img/thumbs/img141.jpg)

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

---

### :has疑似クラス
![:has疑似クラスイメージ画像](https://webdesignshake.com/wp-content/uploads/2024/02/0044_01.webp)

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

---

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

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