← 2026-05-24 の一覧へ戻るホーム
『オン・ザ・DL』（2021 年）

2026/05/23 22:03

『オン・ザ・DL』（2021 年）

RSS: https://news.ycombinator.com/rss

元のHacker News記事へ ↗
要約▶

Japanese Translation:

HTML の 

<dl>
要素は、名詞と値の組からなる構造化されたリストを作成するためのセマンティックなツールであり、語彙辞典やゲームキャラクターのステータスブロックのようなデータ量の多いインターフェースに極めて効果的です。この要素は 3 つのコアコンポーネントに依存しています：リストを定義する 
<dl>
、用語を表す 
<dt>
、そしてそれらの用語を詳細説明する 1 つまたは複数の 
<dd>
要素（各用語に対して複数の詳細を許容）。開発者はこの要素を 
<div>
など他の適切なセクション要素で包んでスタイル化することが一般的ですが、この構造のもっとも主な利点はアクセシビリティです。これにより、スクリーンリーダーが複雑なデータを論理的にナビゲートでき、項目数を数え、関連性の低いブロックをスキップできるようになります。

は以前の HTML バージョンでは「定義リスト」として登場しましたが、HTML5 の仕様では、堅固な構造的前提を持たずに多様な UI パターンをサポートするようにこれらの要素が改良されました。能力値や攻撃詳細のような複雑なデータ構造を表現する versatility がある一方で、ブラウザとスクリーンリーダーのサポート状況が異なるため、採用には注意が必要です。正確な実装規則については、公式仕様または MDN を参照することをお勧めします。結局のところ、セマンティックな 
<dl>
タグを使用することで生テキストをアクセシブルな体験へと変換し、単純なデータと異なるデバイス間で意味のある相互作用の間に架け橋を作るのです。

本文

HTML の「説明文書リスト（
）」を活用する理由と使い方

HTML の 

<dl>
要素は、過小評価されています。名と値の対（Key-Value Pairs）を表すために使用され、非常に汎用性の高い UI パターンです。宿泊施設の設備一覧や家賃明細、技術用語集など、実世界でよく目にするレイアウトはこのパターンに該当します。

説明文書リストの構造

<dl>
（説明文書リスト）、
<dt>
（定義用語）、
<dd>
（定義詳細）という 3 つの要素が役割を持ちます。

ベースとなる構造

まずは 

<dl>
要素でラップします。これがリスト全体を意味付けるコンテナとなります。

<dl></dl>

「名」と「値」の追加

  • 名を表すには 
    <dt>
    （Description Term）を使用します。
  • 値を表すには 
    <dd>
    （Description Detail）を使用します。

基本的な例：

<dl>
  <dt>Title</dt>
  <dd>Designing with Web Standards</dd>
</dl>

複数の名と値の追加

リストに項目を追加するには、単に 

<dt>
と 
<dd>
を挿入するだけです。

<dl>
  <dt>Title</dt>
  <dd>Designing with Web Standards</dd>
  
  <dt>Publisher</dt>
  <dd>New Riders Pub; 3rd edition (October 19, 2009)</dd>
</dl>

一つの「名」に複数の「値」を設定する場合

ある項目（例：著者）に複数の人が関連する場合は、一つの 

<dt>
の下に複数の 
<dd>
を配置することで対応可能です。

<dl>
  <dt>Title</dt>
  <dd>Designing with Web Standards</dd>
  
  <dt>Author</dt>
  <dd>Jeffrey Zeldman</dd>
  <dd>Ethan Marcotte</dd> <!-- 複数の著者を表現 -->
  
  <dt>Publisher</dt>
  <dd>New Riders Pub; 3rd edition (October 19, 2009)</dd>
</dl>

グループ化（ラッピング）する場合

スタイル調整の目的で、

<dt>
と関連する 
<dd>
の群をグループ化したい場合は、仕様上 
<div>
でラップすることが許可されています。

  • 注意: 
    <dt>
    および 
    <dd>
    のグループをラップする要素として使用できるのは、この 
    <div>
    が唯一の選択肢     です。
<dl>
  <div>
    <dt>Title</dt>
    <dd>Designing with Web Standards</dd>
  </div>
  
  <div>
    <dt>Author</dt>
    <dd>Jeffrey Zeldman</dd>
    <dd>Ethan Marcotte</dd>
  </div>
  
  <div>
    <dt>Publisher</dt>
    <dd>New Riders Pub; 3rd edition (October 19, 2009)</dd>
  </div>
</dl>

なぜ semantic なアプローチが必要なのか？

以前はネストした 

<div>
を使用して実装するケースが多く見られました。しかし、単なる構造（クラス名での分類）ではなく、**意味（Semantics）**を持たせるべきでしょうか？

判断基準として自問すべきことは、**「このパターンを認識できる場合に得られる利点は何か」**です。特にウェブアクセシビリティの観点から、スクリーンリーダーユーザーがどのようなメリットを得られるか考える必要があります。

スクリーンリーダーによる具体的な利点

ブラウザがこのパターン（

<dl>
）を認識できれば、以下の利点が生まれます。

  • 構造の伝達: リスト内に名と値の対がいくつのグループあるかをユーザーに伝えることができます。
  • 位置の確認: ユーザーが進んでいる場所（現在どの項目にいるか）を示すことができます。
  • スキップ機能: ユーザーがそのリストに関心がない場合、一つ一つのブロックとして扱い、効率的に読み飛ばす（スキップする）ことを可能にします。

これにより、ネストした 

<div>
で単なるテキストノードとして扱うよりも、リストとしての利用性が大幅に向上します。ブラウザがこの意味構造を認識できるのであれば、语义付与のための強力な候補となるはずです。

補足: 現在の状況では 

<dl>
要素へのサポートがすべての環境で完全ではありません。そのため、スクリーンリーダーのフォールバック行動について考慮し、必要に応じて 
<ul>
などの代替案を検討するケースもあります。

実例：ダンジョンズ＆ドラゴンズの「ステイブロック」

最も代表的な活用事例としては、「ダンジョンズ＆ドラゴンズのキャラクターシミュレーション（ステイブロック）」が挙げられます。能力値や属性、武器の詳細など、まさに**「すべて名と値の対」**で構成されています。

以下に、このシートをマークアップした実際のコード例を示します。少なくとも 5 つの異なる説明文書リストパターンが存在します。

<div>
  <h1>Kobold</h1>
  <small>Small humanoid (kobold), lawful evil</small>

  <!-- ステータス情報の一覧 -->
  <dl>
    <div>
      <dt>Armor Class</dt>
      <dd>12</dd>
    </div>
    <div>
      <dt>Hit Points</dt>
      <dd>5 (2d6 - 2)</dd>
    </div>
    <div>
      <dt>Speed</dt>
      <dd>30 ft.</dd>
    </div>
  </dl>

  <!-- 能力値（STR, DEX など）のグループ -->
  <dl aria-label="Ability Scores">
    <div>
      <dt>STR</dt>
      <dd>7 (-2)</dd>
    </div>
    <div>
      <dt>DEX</dt>
      <dd>15 (+2)</dd>
    </div>
    <div>
      <dt>CON</dt>
      <dd>9 (-1)</dd>
    </div>
    <div>
      <dt>INT</dt>
      <dd>8 (-1)</dd>
    </div>
    <div>
      <dt>WIS</dt>
      <dd>7 (-2)</dd>
    </div>
    <div>
      <dt>CHA</dt>
      <dd>8 (–1)</dd>
    </div>
  </dl>

  <!-- 専門性のグループ -->
  <dl aria-label="Proficiencies">
    <div>
      <dt>Senses</dt>
      <dd>Darkvision 60 ft.</dd>
      <dd>Passive Perception 8</dd>
    </div>
    <div>
      <dt>Languages</dt>
      <dd>Common</dd>
      <dd>Draconic</dd>
    </div>
    <div>
      <dt>Challenge</dt>
      <dd>1/8 (25 XP)</dd>
    </div>
  </dl>

  <!-- 特性のグループ -->
  <dl aria-label="Traits">
    <div>
      <dt>Sunlight Sensitivity</dt>
      <dd>
        While in sunlight, the kobold has disadvantage
        on attack rolls, as well as on Wisdom (Perception)
        checks that rely on sight.
      </dd>
    </div>
    <div>
      <dt>Pack Tactics</dt>
      <dd>
        The kobold has advantage on an attack roll against
        a creature if at least one of the kobold's allies
        is within 5 ft. of the creature and the ally
        isn't incapacitated.
      </dd>
    </div>
  </dl>

  <h2 id="actions">Actions</h2>
  
  <!-- アクションのグループ -->
  <dl aria-labelledby="actions">
    <div>
      <dt>Dagger</dt>
      <dd>
        <i>Melee Weapon Attack:</i> +4 to hit, reach 5 ft.,
        one target. <i>Hit:</i> (1d4 + 2) piercing damage.
      </dd>
    </div>
    <div>
      <dt>Sling</dt>
      <dd>
        <i>Ranged Weapon Attack:</i> +4 to hit, reach 30/120 ft.,
        one target. <i>Hit</i>: (1d4 + 2) bludgeoning damage.
      </dd>
    </div>
  </dl>

</div>

この例が示すのは、説明文書リストパターンの驚くべき汎用性です。能力値のリストや攻撃項目の外見は異なっていますが、どちらも同じ 

<dl>
パターンで表現可能です。

まとめ

名と値の対（あるいは場合によってはグループ）の一覧は、ウェブにおける非常に一般的なパターンです。HTML を使用すると、以下の 3 つの要素を組み合わせてマークアップできます：

  • <dl>
    （説明文書リスト）：名と値の対全体のリストをラップするコンテナ。
  • <dt>
    （説明用語）：名（キー）を表す要素。
  • <dd>
    （説明詳細）：値（バリュー）を表す要素。

このようなパターンに语义を付与することは、開発者ですら予期しない方法で、ユーザーのデバイスにおいて有用で利用可能な体験を提供する上で不可欠です。

補足情報

  • 用語の変遷: HTML5 以前は「定義リスト」と呼ばれていましたが、現在は 
    <dl>
    （説明文書リスト）などの名前に変更されています。これは当初は用語と定義のみを意図した要素だったためですが、現在はより広範な名値ペアに対応しています。
  • 詳細参照: より深い仕様や禁止事項については、MDN の 
    <dl>
    ドキュメントをご確認ください。

同じ日のほかのニュース

一覧に戻る →

2026/05/24 3:45

私の Writerdeck を語る時が来ました。

## 日本語翻訳: 著者は、6年経った System76 Galago Pro ラップトップを「writerdeck」と名づけたオフライン書写ステーションに変換し、X11、Wayland、およびデスクトップ環境を排する tty ベースの構成で Debian Trixie を実行することでミニマリズムを優先しています。コンテンツが公開共有を目的としているためフルディスク暗号化は省略され、管理には `sudo` ユーザーモデルに切り替えて root ログインが無効化されました。本質的なツールとして、Neovim がテキスト編集に使用され（従来のエディタに代わり）、Debian バックポートからの `kmscon` でスケーラブルなターミナルウィンドウを可能にし、セッション多重化には `tmux` を使用し、インストール済みの Network Manager 経由の `nm-tui` が Wi-Fi/WAN の管理に用いられます。電力モニタリングおよび画面明るさ制御は `acpi` と `light` コマンドで行われ、自動ログインと `.bashrc`内の起動スクリプトにより Neovim が `tmux` セッション内で動作し、ブート時に Vimwiki が起動するようにしています。Syncthing は Vimwiki フォルダをリモートサーバーに同期させ、ブラウザ GUI を必要とせずオフラインファーストなワークスペースを維持するために全てのネットワークアドレスを活用しています。この構成はデジタルの雑多さを削減し、悪い書写習慣を打破助けるとともに、クリエイティブ専門家にとってセキュリティと生産性を向上させます。

2026/05/24 7:25

自分でロールを作るな

## 日本語訳: 要約: 開発者は、暗号化やユーザーインターフェースコンポーネントといった重要な機能に対して独自の実装を即時に停止する必要があります。なぜなら、「自分自身でつくる」というソリューションは過去の実績が証明する通り危険であるためです。最も重要な教訓は、安全性と使い勝手を確保するために、自作コードの代わりに既成でピアレビューされた標準を採用しなければならないことです。独自のカスタム暗号化パッケージには、初期化の不備や予測可能なパターンなどの深刻な欠陥を内包しており、規制産業では財務規制に違反し、高額の罰則を引き起こす可能性があります。セキュリティの問題だけでなく、ネイティブブラウザ要素を置換することは性能低下をもたらし、過剰な JavaScript ロジックによりキーボードスクロールの破損やリンクの読み込み遅延といった問題を引き起こします。さらに、独自のソリューションは自動入力機能など、安全なパスワード管理などの重要なネイティブ機能を排除してしまいます。この傾向は、組み込みブラウザ機能の安定性よりも創造的なツールの構築を優先しており、ユーザー（高齢者のご家族も含まれます）が慣れ親しんだツールを常に再学習することを強いられています。これらの使い勝手に関する落とし穴を防ぎ、規制当局による罰金を避けるためには、開発者はネイティブ要素を置換するのではなく補完する方向へ転換すべきです。これにより、すべてのウェブサイトで一貫した動作を確保できます。

2026/05/21 6:21

私の二画面デスクセットアップ（2025）

## 日本語訳: 著者は、壁を向いた単調なパソコンデスクを部屋の方を向くように回転させることで（ドアを見渡させ、奥行きを追加）、そしてテック専用だった単一の面を、二つの明確なゾーニングに分かれた大規模な USM ハラーデスクに置き換えることにより、ハイブリッドなワークスペースへと成功裡に変化させています。このデザインは、ソーシャルメディアでのフィードバックを受けてから以前の壁を向いた配置が持っていた「古い」外観に対応し、また、未使用のアイテム、おもちゃ、プロジェクトをアナログ側の面に置き続けることで、ストイックなミニマリズムの限界を解決し、アイデアを刺激することを可能にしています。単純にチェアを二つの半分の間で移動させることで強化された明確な精神的境界線により、このセットアップは一つの表面上で「作業」「思考」「子供たちと過ごす時間」という 3 つの異なる機能を発揮します。9 ヶ月の使用後、著者は単一コンピューターの配置に戻る予定はないことを確認しており、むしろミニマリスト的な規律とマキシマリスト的な柔軟性を融合させたこの柔軟なシステムを維持する意欲を持っています。これにより、別々の部屋を必要とせずに、ワークフローと創造的アウトプットを向上させることができます。