2025新卒研修・HTML/CSS #弁護士ドットコム

Bengo4.com, Inc. 弁護士ドットコム新卒研修2025 HTML/CSS 2025.04.07 弁護士ドットコム開発本部技術戦略室太田
良典

前置き 2

Bengo4.com, Inc. これは何? 新卒エンジニア向けのHTML/CSSの研修です (そうでない人の受講を禁止するものではありません) 2時間の講座ですエンジニアとして現場に配属された際にスムーズに実践できるようHTML の基礎的な知識・スキルを習得することが目的です 3

参考書 4

Bengo4.com, Inc. HTML解体新書仕様から紐解く本格入門 HTMLを学ぶ人の定番書籍(?) HTMLについて教えたいことはほぼすべてこの本に書きましたこれを読めばOK という話ではありますが…… 5

今日のお話 6

Bengo4.com, Inc. 今日のお話 • 1. HTMLとは何か • 2. HTMLマークアップの基礎 •
3. DOMツリーと字句解析 • 4. CSS • 5. 良いHTMLを書くまずHTMLについての基本的な考え方をお伝えしますその後、マークアップとCSSの本当に基礎の部分をお話しします最後に、より良いHTMLを書くための成長の方法をお話しします 7

1. HTML とは何か 8

Bengo4.com, Inc. HTMLとは何か説明できますか ? 9

Bengo4.com, Inc. HTMLとは何かを説明する 10 説明の仕方はいろいろ • Webページで「ソースを見る」と出てくるやつ • HyperText Markup
Language の略 • Webを支える主要3技術のうちの1つ • 「HTML」という名前の技術文書がある

HTMLとは何かを説明する 11 1. HTMLとは何か

Webページで「ソースを見る」と出てくるやつ 12

Bengo4.com, Inc. 17 これがHTML

Bengo4.com, Inc. 余談 http://abehiroshi.la.coocan.jp/ 18

Bengo4.com, Inc. 開発者ツールで見られるこれは ? 19

HyperText Markup Language 20

Bengo4.com, Inc. HyperText Markup Language 21 ハイパーテキストを扱うマークアップ言語 • ハイパーテキスト •
マークアップ言語

Bengo4.com, Inc. ハイパーテキスト通常のテキストは、あらかじめ用意された一定の順番どおりに読むハイパーテキストは、読者の好きな道筋で自由に読める読者が見たいと思ったハイパーリンクを選択すると、すぐにリンク先を読むことができる 22

Bengo4.com, Inc. ハイパーリンクの例 23

Bengo4.com, Inc. マークアップテキストをマーク付けすることテキストに印を付けて、その意味を明確にすること 24

Bengo4.com, Inc. テキストの例これは見出しのテキストです。ここからは本文です。詳しくは https://example.com/ をご覧ください。 25

Bengo4.com, Inc. マークアップの例 <見出し>これは見出しのテキストです。</見出し> <本文>ここからは本文です。詳しくは <リンク>https://example.com/</リンク> をご覧ください。</本文 > 26

Bengo4.com, Inc. HTMLによるマークアップ <h1>これは見出しのテキストです。</h1> <p>ここからは本文です。詳しくは <a href="https://example.com/">https://example.com/</a> をご覧ください。</p> 27

Webを支える主要3技術のうちの 1つ 28

Bengo4.com, Inc. Webを支える 3つの技術とは ? 29

Bengo4.com, Inc. Webを支える3つの技術 30 以下の3つの技術がWebを支える根幹とされる • HTTP ◦ ブラウザとWebサーバーとの通信に使うプロトコル •
URL ◦ Webページのアドレス、ブラウザがWebページを認識するための識別子 • HTML ◦ ブラウザがテキストの情報構造を理解するためのマークアップ言語

「HTML」という名前の技術文書 31

Web以外でのHTML 33 1. HTMLとは何か

Bengo4.com, Inc. Webページ以外で HTMLが使われる局面は? 34

電子メール 35

Bengo4.com, Inc. 37 なんだかんだあっていろいろすると …… <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra nsitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title></title> <style type="text/css"> @import

電子書籍 38

アプリケーションソフト 41

44 HTML以外のWeb 1. HTMLとは何か

Bengo4.com, Inc. Webページで HTML以外が使われる局面は ? 45

PDF 46

プレーンテキスト 48

Bengo4.com, Inc. RFC 49

Bengo4.com, Inc. 50 LLMs.txt

HTMLの利点 51 1. HTMLとは何か

Bengo4.com, Inc. HTMLの利点、強みは何ですか ? 52

Bengo4.com, Inc. プレーンテキストと比べると …… 53 プレーンテキストは単純なテキストで、構造や視覚的にしか示せず、装飾もできないリンクもできず、URLを書くことができるだけ HTMLは、 •
ハイパーリンクが使える • 構造化できる • 装飾したり、見た目に変化をつけて見やすくできる

Bengo4.com, Inc. PDFと比べると …… 電子書籍の固定レイアウト vs リフローを考えるとわかりやすい PDFの大きな特徴はレイアウトが維持されること環境によらず、レイアウトが再現される一方、HTMLは環境に応じて表示が変化する
これをデメリットと考える人もいるが、実は大きな強みでもある 54

環境に応じて表示が変化する 55 1. HTMLとは何か

PDFの例 56

Bengo4.com, Inc. 57 PDF: 通常の表示 HTML解体新書電子書籍PDF版しっかり整えられたレイアウト

Bengo4.com, Inc. 58 PDF: 拡大表示拡大することが可能レイアウトは固定のため崩れないテキストは画面からはみ出し、
読むためにはスクロールが必要

EPUBの例 59

Bengo4.com, Inc. 60 EPUB: 通常の表示 HTML解体新書電子書籍EPUB版手作り感がすごいが実際手作り

Bengo4.com, Inc. 61 EPUB: 拡大表示文字サイズを大きくできるレイアウトは変化テキストは折り返し、
スクロールせずに読むことができる

Bengo4.com, Inc. HTMLの強みは柔軟性 PDFでは、制作側がテキストにスタイルを与えているユーザー側 (ブラウザ側) は基本的にスタイルを変更できない単純なズーム、拡大縮小には対応するが、折り返し位置の変更などは難しい HTMLでは、コンテンツ制作側はテキストに意味を与えている
コンテンツ制作側でスタイルをつけていることが多いが、ユーザー側 (ブラウザ側) でスタイルを変更することも可能折り返し位置の変更などもできる 62

Bengo4.com, Inc. HTMLの最大の強みはアクセシビリティ 63

ここまでのまとめ 64 1. HTMLとは何か

Bengo4.com, Inc. HTMLとは何か • HyperText Markup Language の略で、Webを支える技術の1つ Webページで「ソースを見る」と出てくる •
ハイパーテキスト、ハイパーリンクを扱うことができる • Web以外にも、HTMLメールやEPUBなどに利用される • WebではPDFなども利用される ◦ PDFは制作側でレイアウトを固定できることが利点 ◦ HTMLはユーザー側で自由に表示を変えられることが利点 • HTMLの強みはアクセシビリティ 65

2. HTML マークアップの基礎 66

データとマーク 67 2. HTMLマークアップの基礎

Bengo4.com, Inc. マークによって要素を明らかにする • 要素の種類：それがどのような要素なのか • 要素の範囲：どこからどこまでがその要素になるのかこれらを明示するために「タグ」と呼ばれるマークを使う <（U+003C、不等号小なり）と >（U+003E、不等号大なり）で囲まれた部分がHTMLのタグ
マークアップ言語は、データをマーク付けしたものであり、データとマークで構成される 68

タグと属性 69 2. HTMLマークアップの基礎

開始タグと終了タグ 70

Bengo4.com, Inc. 開始タグと終了タグの対応、要素の入れ子 <h1>これは見出しのテキストのかたまりです</h1> <p>これは本文です。</p> <p>この<mark>キーワード</mark>はこの文章で重要なものを表します。</p> 同じ名前の開始タグ・終了タグがセットになって要素を表現する要素は入れ子にでき、この例では p要素の中に
mark要素があるこの場合、mark要素がp要素の子要素である、という 71

Bengo4.com, Inc. 要素の入れ子にはルールがある要素の入れ子ができると言ってもなんでもできるわけではない mark要素はp要素の子要素になれるが、その逆はできない以下は誤ったマークアップとなる <mark><p>文章...</p></mark> 実務では label 要素などが破壊されやすい
label要素の中にp要素やdiv要素を入れることはできないこれらのルールは仕様で決められている 72

Bengo4.com, Inc. 内容モデル (content model) 73 要素の中に入るもののルールを内容モデル (content model)
と呼ぶ内容モデルは仕様に書かれている label要素の場合、 ”Phrasing” という要素グループに属する要素だけが入り、さらに追加の条件がいくつかある

タグの省略 74

Bengo4.com, Inc. 終了タグの省略 <h1>これは見出しのテキストのかたまりです</h1> <p>これは本文です。 <p>この<mark>キーワード</mark>はこの文章で重要なものを表します。 p要素の終了タグ </p> は、自明な場合は省略可能
他にも </td> など省略可能なものもあるだがすべきではない。省略はしないこと 75

Bengo4.com, Inc. <!DOCTYPE html> <title>title</title> <p>contents これはHTMLとして正しい? 76

Bengo4.com, Inc. タグの省略を補った結果 <!DOCTYPE html> <html> <head> <title>title</title> </head> <body>
<p>contents</p> </body> </html> 77 html要素、head要素、 body要素は開始タグも省略可能文脈に応じて補われてこのようになるが、省略はすべきでない特に、html要素の開始タグは必ず書いてlang属性をつける

属性 78

Bengo4.com, Inc. とあるテキストの例 79 詳しくは HTML Living Standard をご覧ください。

Bengo4.com, Inc. ハイパーリンクとしてマークアップ 80 <p>詳しくは<a>HTML Living Standard</a>をご覧ください。</p> a要素でハイパーリンクを表現するどこからどこまでがa要素かはわかるが、肝心のリンク先の情報がない

Bengo4.com, Inc. 属性でリンク先を表現 <p>詳しくは<a href="https://html.spec.whatwg.org/">HTML Living Standard</a>をご覧ください。</p> hrefが「属性名」 https://html.spec.whatwg.org/ が「属性値」
属性名 = 属性値の形で書き、属性値は引用符で括る括らなくて良い場合もあるのだが、必ず引用符で括るべきこれはセキュリティの観点からも非常に重要 81

Bengo4.com, Inc. セキュリティ事故の例 https://www.itmedia.co.jp/news/arti cles/0808/04/news021.html 82

その他のマーク 83 2. HTMLマークアップの基礎

HTML文書 84

Bengo4.com, Inc. HTML文書 85 ここまで紹介したHTMLは、一部分をマークアップしたものこのようなものをHTML断片 (HTML Fragment) と呼ぶそれに対し、1つの文書全体を
頭から最後まで HTML としてマークアップしたものを HTML文書と呼ぶ

Bengo4.com, Inc. HTML文書の例 86 <!DOCTYPE html> <html> <head> <title>最低限のHTML</title> </head>
<body> <h1>最低限のHTML</h1> <p>これはHTML 文書です！</p> </body> </html>

Bengo4.com, Inc. HTML文書の先頭には専用のマークが必要 87 <!DOCTYPE html> <html> <head> <title>最低限のHTML</title> </head>
<body> <h1>最低限のHTML</h1> <p>これはHTML 文書です！</p> </body> </html>

Bengo4.com, Inc. <!DOCTYPE html> これの名前は ? 88

Bengo4.com, Inc. DOCTYPE 89

Bengo4.com, Inc. DOCTYPEとは何か? HTML文書の先頭に書くおまじない昔のHTMLはSGMLアプリケーションだったため、「文書型宣言」(document type declaration) が必要だった歴史的経緯から、ブラウザはこれがないと
Quirks Mode (奇癖モード ) で動作してしまうため、それを防ぐために書いているもの特に意味は持たない、本当の意味でのおまじないと言える 90

余談: 文書型宣言 91

Bengo4.com, Inc. HTMLの文書型宣言の例 HTML 2.0 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML
2.0//EN"> HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 92

Bengo4.com, Inc. XMLの例 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE root-element [ <!ELEMENT
root-element (child)> <!ELEMENT child (#PCDATA)> ]> このように直接DTDを書くこともできる 93

Bengo4.com, Inc. DOCTYPE legacy string 現在の DOCTYPE <!DOCTYPE html> は、
SGMLの文書型宣言としては不正な形式 (システム識別子か公開識別子のどちらかは必須のため) システム都合でXML/SGMLの文書型宣言の形式が必要な場合 (たとえばXSLTや、XMLを生成するシステムから吐きたい場合など) 以下のような “DOCTYPE legacy string” を使うこともできる <!DOCTYPE html SYSTEM "about:legacy-compat"> 94

Bengo4.com, Inc. コメントの書式 96   がコメントの終了を表す
コメントは入れ子にできないコメントは無視されるのではなく、コメントとして解釈されコメントノードを形成する

Bengo4.com, Inc. 余談: Bogus Comment 偽コメント、コメントもどき、なんちゃってコメント歴史的経緯で現在は使われていない <! や <?
で始まるマークはコメントとみなされることがある CDATA区間などは、出現状況によって Bogus Commentと扱われたり、そうでなかったりする 97

文字参照 98 2. HTMLマークアップの基礎

データの表現に困るケース 99

Bengo4.com, Inc. このようなテキスト 100 見出しの先頭に<h1>を、末尾に</h1>を入れてください

Bengo4.com, Inc. 何も考えずに p要素としてマークアップする <p>見出しの先頭に<h1>を、末尾に</h1>を入れてください</p> 101

Bengo4.com, Inc. ブラウザで表示すると <p>見出しの先頭に <h1>を、末尾に</h1> を入れてください</p> < はタグの開始を意味する <h1> がデータではなく
マークとして解釈された 102

名前付き文字参照 103

Bengo4.com, Inc. 名前付き文字参照 <p>見出しの先頭に<h1>を、末尾に</h1>を入れてください</p> < → < と置き換えられる。マークとはみなされない lt の部分はそれぞれの文字につけられた名前
よく使われるのは lt, gt, amp, quot それぞれ < > & " に対応 104

Bengo4.com, Inc. 名前付き文字参照は大文字小文字を区別する名前付き文字参照の名前は大文字小文字を区別する Ä → Ä ä → ä
よく使われる & < > " は、互換性のために大文字の参照も定義されているよって &AMP; は展開される、が、常に小文字で書くべき &Amp; のようなものは定義されていないので展開されない 105

数値文字参照 106

Bengo4.com, Inc. 10進数値文字参照 <p>見出しの先頭に<h1>を、末尾に</h1>を入れてください </p> < → < と置き換えられる。マークとはみなされない指定する数値は文字のUnicodeスカラー値を10進数にしたもの
ASCII文字ならばASCIIコード = Unicodeスカラー値たとえば 🍣 という文字は 🍣 107

Bengo4.com, Inc. 16進数値文字参照 <p>見出しの先頭に<h1>を、末尾に</h1>を入れてください </p> < → < と置き換えられる。マークとはみなされない指定する数値は文字のUnicodeスカラー値
たとえば 🍣 という文字は 🍣 大文字小文字は区別しない。x は X と書いても良いし、 16進数表記のA-Fは大文字小文字どちらでも良く、混ぜても良い 108

エンティティ ? 109

Bengo4.com, Inc. エンティティ ? そんなものはない ! 歴史あるプログラム言語などでは、文字参照を「エンティティ」と呼んでいることがある過去のHTMLでは、文字参照は SGMLの実体参照
(Entity Reference) の機能で実現されていた Entity は参照される側のデータ、参照する側は Entity Reference 今のHTMLはSGMLではないため関係ない何重にも間違っているが、歴史的経緯として暖かく見守ろう 110

ここまでのまとめ 111 2. HTMLマークアップの基礎

Bengo4.com, Inc. HTMLマークアップの基礎 • マークアップはデータとマークからなる • マークにはいくつかの種類があり、代表的なものはタグ • タグには開始タグと終了タグがあり、いくつかのルールがある •
タグには属性を指定することができる • その他にDOCTYPE、コメントなどのマークがある • データの表現には文字参照を使うこともできる 112

3. DOM ツリーと字句解析 113

DOM 114 3. DOMツリーと字句解析

Bengo4.com, Inc. DOM (Document Object Model) 115 HTMLをオブジェクトとして表現するモデルプログラム (主にJavaScript)
からHTMLの要素や属性などをオブジェクトとして操作する際の共通インターフェイスを定義 DOMの個々のオブジェクトは「ノード」と呼ばれる要素、属性、コメント、テキストなどはそれぞれがノードとなる要素以外にも、属性やテキストがノードとなることに注意

Bengo4.com, Inc. DOMインターフェイス要素や属性などにアクセスするインターフェイス • DOMインターフェイス ◦ getAttribute() や setAttribute()
メソッドを利用する • IDL属性（IDL attribute）を利用する ◦ 要素オブジェクトのプロパティに直接アクセスする 116

Bengo4.com, Inc. DOMツリー HTMLを構成するDOMノードをツリー構造として表現したものまずルートノードが存在し、その下にhtml要素がぶら下がり、さらにその下に属性ノード、子要素、テキストなどがぶら下がる現在のページのDOMツリーは開発者ツールで確認できる 117

Bengo4.com, Inc. 開発者ツールで見られるこれ 118

Bengo4.com, Inc. HTMLパーサーテキストデータを構文解析して読み取ることを「パース」(parse) それを行うプログラムを「パーサー」(parser) と呼ぶ HTMLの構文解析をするものはHTMLパーサー HTMLパーサーの仕事は、 HTMLを構文解析してDOMツリーを作ること 119

2種類の構文ルール 120 3. 字句解析と DOMツリー

Bengo4.com, Inc. HTMLの2種類の構文ルール 121 • HTML構文 ◦ いわゆる普通のHTML、先頭はDOCTYPE ◦ 構文解析ルールはとても複雑
(HTML仕様に書かれている) ◦ 構文エラーがあっても補正され、最後までパースされる • XML構文 ◦ XMLとして書かれたHTML、先頭はXML宣言や文書型宣言も ◦ 構文解析ルールはシンプル (XML仕様に書かれている) ◦ 構文エラーがあると容赦なくエラーで止まる

Bengo4.com, Inc. 構文エラーとなるマークアップの例 <html> <head> <title>最低限のHTML</title> </head> <body> <h1>最低限のHTML <p>これはHTML
文書です！</p> </body> </html> 122

Bengo4.com, Inc. XML構文として解析するとエラー 123

Bengo4.com, Inc. HTML構文ではエラーにならず、ただし壊れる 124

Bengo4.com, Inc. 2種類の構文の使い分け • HTML構文 ◦ 基本はこれ ◦ エラーがある程度許容されるため、制作者の負担が小さい ◦
構文ルールが複雑なためパーサーの負担は大きい • XML構文 ◦ あまり使われない ◦ エラーがあると止まるので、制作者はしっかりしないといけない ◦ 構文ルールがシンプルでパーサーの負担は小さい ◦ そのためEPUBなどはこれが要求されている 125

Bengo4.com, Inc. HTML構文の解析ルールの仕様 126

Bengo4.com, Inc. パーサーの挙動が決められている意義仕様で細かい挙動が定義されているため、実装依存の処理が少ない昔のHTML仕様ではエラー処理の結果などは実装依存だったが、現在の仕様では細かく決められているそのため、ブラウザの種類による挙動の差異が少ないというよりも、昔のブラウザに共通する挙動を研究してそれを仕様としてまとめたものが今のルールそのため、奇妙な挙動がいくつかある
127

余談: 奇妙な挙動の例 128

Bengo4.com, Inc. 「ノアの方舟」ルール 129 <p><b><b><b><b>4つのb 開始タグ</p> <p>bのないp</p> これはエラー補正で以下のようになる <p><b><b><b><b>4つのb 開始タグ</b></b></b></b></p>
<b><b><b><p>bのないp</p></b></b></b>

Bengo4.com, Inc. foster parenting <table> <tr> <th>見出しセル</th> <td>データセル</td> </tr> <p>何かテキスト</p>
</table> 「何かテキスト」はtableの前に出現する (後ではない) 130

HTMLパーサーの動作 131 3. 字句解析と DOMツリー

Bengo4.com, Inc. HTMLパーサーの仕事 HTMLを読んで、DOMツリーを作るまでがパーサーの仕事 1. 入力ストリームの読み込み 2. 字句解析 (Tokenization) 3.
木構築 (Tree Construction) これらを経てDOMツリーが完成 132

入力ストリームの処理 133

Bengo4.com, Inc. 入力ストリームの処理 - 文字符号化方式の判別与えられたデータを先頭から 1byte ずつ読んでいく HTMLは基本的にUTF-8で書くことになっているが、歴史的経緯から他の文字符号化方式が使われることもあるため
文字コードの判別を行う与えられた Content-Type があればそれを使うが、なかったり、不明な場合は先頭 1024bytes を実際に読んで判別 (Snifﬁng) 判別のアルゴリズムも仕様で決められている 134

Bengo4.com, Inc. 入力ストリームの処理 - 文字の正規化読み取った文字は Unicode に変換して1文字ずつ処理する改行文字 CR
/ CR+LF / LF はすべて LF に正規化するそのうえで後続の字句解析器に渡す　 135

字句解析 136

Bengo4.com, Inc. 字句解析 (Tokenization) 137 字句解析器 (Tokenizer) がテキストを1文字ずつ読み、処理字句解析器はステートマシンであり、自身の状態と読み取った文字に応じてトークンを生成、
また必要に応じて状態の遷移をする (状態は80種類ほどある) トークンの種類は、開始タグ、属性、終了タグ、文字、コメントなどトークンは後続の木構築器に渡される

木構築 138

Bengo4.com, Inc. 木構築 (Tree Construction) 139 木構築器 (Tree Constructor) がトークンを受け取り、
トークンに応じてDOMノードを作成し、DOMツリーに挿入たとえば、開始タグトークンを受け取ったら要素ノードを作り、その後で属性トークンを受け取ったら属性ノードを追加し、対応する終了タグトークンを受け取ったらDOMツリーに挿入する木構築器も「挿入モード」(Insertion Mode) という状態を持つ 23種類ほどの状態があり、同じトークンを受け取っても状態に応じて挙動が変わる

ここまでのまとめ 140 3. 字句解析と DOMツリー

Bengo4.com, Inc. 字句解析と DOMツリー • DOMというモデルがありインターフェイスが定義されている • DOMの個々の構成要素を「ノード」という • ノードの入れ子構造を木構造として表現したものがDOMツリー
• HTMLはパーサーによって解析され、DOMツリーになる • HTMLにはXML構文/HTML構文の2種類がある • HTML構文の解析ルールは仕様で決められている 141

4. CSS 142

DOMツリーができたあと 143 4. CSS

Bengo4.com, Inc. DOMツリーができあと DOMツリーができてもそのまま表示されるわけではない CSSを解釈してCSSOMを適用 WAI-ARIAなどを解釈しつつAccessible Nameを計算して適用し、 AOMを適用してアクセシビリティツリーを作るそしてレンダリングする 144

Bengo4.com, Inc. アクセシビリティツリー 145

マークアップとスタイル言語 146 4. CSS

Bengo4.com, Inc. マークアップ言語は見た目を定義しない 147 マークアップ言語はテキストに意味を与えるもの見た目を与えるものではない (過去のHTMLの暗黒時代のことは忘れて今を見よう) しかし当然、見た目を整えたいというニーズもある見た目を整えたければ、それは別の方法で与える
必要がある

Bengo4.com, Inc. スタイル言語見た目などのスタイルを定義し与えるための言語を「スタイル言語」と呼ぶ現在のHTMLでは、CSS (Cascading Style Sheets) というスタイル言語を使うことが決まっている
XMLに対しては、XSL (XSL-FO / XSLT) が使われることもある SGMLに対しては、DSSSLという言語が使われたこともある過去、特定のブラウザはJSSSというスタイル言語に対応したことも 148

CSSの基礎知識 149 4. CSS

Cascading とは 150

Bengo4.com, Inc. Cascading カスケード: 小さな滝が連なり、水が次々と下に落ちていくもの CSSは、ひとつの文書に対して複数のスタイルシートを適用できるそれらで定義されたスタイルは全て有効となるが、一部のスタイルは後続のスタイル定義で上書きされることがあるこのように、複数のスタイルシートを重ね合わせて適用できるこの重ね合わせの処理ルールが仕様で決められている
151

Bengo4.com, Inc. CSS Cascading and Inheritance Level 4 https://www.w3.org/TR/css-cascade-4/ 152

153 スタイルのオリジン

Bengo4.com, Inc. Webページのスタイルを決めている人は3人いる 1. コンテンツ制作者 2. ユーザー 3. ブラウザそれぞれがスタイルシートを用意し、適用できる
基本的には上の方が強いが、ユーザー定義のスタイルに !important が指定されると全てに勝つ 154 スタイルのオリジン

Bengo4.com, Inc. ブラウザのデフォルトスタイルブラウザのデフォルトスタイルはHTML仕様に書かれている https://html.spec.whatwg.org/multipage/rendering.html #the-css-user-agent-style-sheet-and-presentational-hints HTMLのhidden属性の挙動などはここで決まっているその他、各要素の display のデフォルト値などがある
155

Bengo4.com, Inc. ユーザー定義のスタイルユーザーがスタイルを定義することもできるコンテンツが読みにくい場合など、ユーザーは自身で定義したスタイルを適用して見た目を変えられる昔のブラウザはこの機能を持っていることが多かったが、最近のブラウザではこの機能がわかりにくかったり、拡張機能として提供されていることが多い 156

Bengo4.com, Inc. コンテンツ制作者のスタイルコンテンツ制作者の側でスタイルを用意できるいわゆるサイトのビジュアルデザインはこれスタイルを書くというのはこれコンテンツ制作者は複数のスタイルシートを用意することもできる読み込んだ順に従ってカスケードルールによって処理される 157

スタイルの使い分け 158

Bengo4.com, Inc. 代替スタイルシート特定の条件でのみ適用されるスタイルシートを用意することも可能コンテンツ制作者が複数のスタイルを用意しておき、ユーザーの操作で好きなものに切り替える、ということもできる (最近のChromeだとこれも拡張機能が必要) スタイルシートを読み込むlink要素に rel="alternate stylesheet"
を指定し、title属性で名前を指定する 159

Bengo4.com, Inc. 特定メディア向けのスタイルメディアが特定の条件を満たす場合に適用するスタイルシート、というものを用意することもできるスタイルシートを読み込むlink要素にmedia属性を指定するメディアクエリーでメディアを細かく指定することも可能 <link rel="stylesheet" href="mobile.css"
media="screen and (max-width: 600px)"> <link rel="stylesheet" href="print.css" media="print"> 160

Bengo4.com, Inc. Media Queries Level 3 https://www.w3.org/TR/mediaqueries-3/ 161

162 スタイル定義の基本

Bengo4.com, Inc. CSSのスタイル定義の基本 163 div.heading01 h1 { font-size: 175%; margin:
1em 0 0 0.25em; line-height: 1.5; } こんな感じに書いていく

Bengo4.com, Inc. ルールセット 164 div.heading01 h1 { font-size: 175%; margin:
1em 0 0 0.25em; line-height: 1.5; } この全体を「ルールセット」という

Bengo4.com, Inc. セレクタ 165 div.heading01 h1 { font-size: 175%; margin:
1em 0 0 0.25em; line-height: 1.5; } 冒頭部分がセレクタこのルールセットを適用する対象の要素を指定する

Bengo4.com, Inc. Selectors Level 3 https://www.w3.org/TR/selectors-3/ 166

Bengo4.com, Inc. Selectors Level 4 https://www.w3.org/TR/selectors-4/ 167

Bengo4.com, Inc. Selectors Level 4 におけるセレクタの分類 • 単純セレクタ（Simple Selector） ◦
h1 ◦ .foo ◦ #bar • 複合セレクタ（Compound Selector） ◦ h1.foo • 複雑セレクタ（Complex Selector） ◦ p em ◦ div.heading01 h1 168

Bengo4.com, Inc. 宣言ブロック 169 div.heading01 h1 { font-size: 175%; margin:
1em 0 0 0.25em; line-height: 1.5; } {} で括られた部分全体を「宣言ブロック」という

Bengo4.com, Inc. 宣言 170 div.heading01 h1 { font-size: 175%; margin:
1em 0 0 0.25em; line-height: 1.5; } 宣言ブロック内の個々の宣言

Bengo4.com, Inc. プロパティ 171 div.heading01 h1 { font-size: 175%; margin:
1em 0 0 0.25em; line-height: 1.5; } 宣言の左側「CSSプロパティ」のような言い方をすることも

Bengo4.com, Inc. 値 172 div.heading01 h1 { font-size: 175%; margin:
1em 0 0 0.25em; line-height: 1.5; } 個々の宣言内のプロパティに対応する値の定義プロパティの種類によって指定できる値の種類はいろいろ

Bengo4.com, Inc. ショートハンドプロパティ 173 div.heading01 h1 { font-size: 175%; margin:
1em 0 0 0.25em; line-height: 1.5; } プロパティの中には、複数のプロパティをまとめて記述できるものがありショートハンドプロパティと呼ばれる margin プロパティは margin-top, margin-right, margin-bottom, margin-left の4つを一括指定するもの

CSSの仕様 174 4. CSS

Bengo4.com, Inc. CSSの仕様は分散しているここまで何度かCSSまわりの仕様を紹介してきたが、現在のCSS仕様はモジュール化されている (いわゆるCSS3) いくつものモジュール文書に別れて分散しており、個々のモジュールごとにアップデートされているそのため、モジュールによってレベル3だったり4だったりする何を見ればいいかわかりにくいので、
「CSS Snapshot」という文書が用意されている 175

Bengo4.com, Inc. CSS Snapshot 2024 https://www.w3.org/TR/css-2024/ 176

177 余談: CSS3

Bengo4.com, Inc. CSS3という単独の仕様があるわけではない 178 CSS 2.1 のあとに、CSSはモジュール化されレベル3のモジュール群が登場レベル3のモジュール群は、CSS 2.1の仕様の一部を上書きする
これらが渾然一体となってCSS仕様を構成するようになり、「CSS3」と呼ばれるようになった CSS3というのは単独の仕様の名前ではなく、 CSS2の次世代のCSS仕様、というくらいの意味レベル4のモジュールもあるが、CSS4と呼ばれることはない (はず)

ここまでのまとめ 179 4. CSS

Bengo4.com, Inc. CSS • DOMツリーができただけではWebページは表示されず、 CSSを解釈してCSSOMを適用した後にレンダリングされる • マークアップ言語はテキストに意味を与えるもの見た目を定義するのはスタイル言語の役割 •
HTMLではスタイル言語としてCSSを使うことになっている • Cascadingは、複数のスタイルシートを重ねて適用できる仕組み • CSS仕様はモジュール化されており、「CSS Snapshot」という文書で全体像を把握できる 180

5. 良いHTMLを書く 181

Bengo4.com, Inc. HTMLにも「良し悪し」がある 182 HTMLにも品質というものがあるマークアップに唯一の正解というものはないのだが、品質の良し悪しは確実にある

Bengo4.com, Inc. 良いHTMLとは何でしょうか ? 183

Bengo4.com, Inc. 良いHTMLと言える条件の一例 • セマンティックである ◦ きちんと意味が伝わる • アクセシブルである ◦
障害の有無に関わらず誰でもアクセス可能 • 誤りがない ◦ 文法エラーやミスがない • 保守しやすい ◦ 読んで構造や意図が理解でき、レビューや修正がしやすい 184

Bengo4.com, Inc. 最も簡単なのは誤りをなくすこと 185

マークアップの誤り 186 5. 良いHTMLを書く

Bengo4.com, Inc. マークアップに正解はないが誤りはある 187 日本語の文章表現には唯一の正解というものはないしかし明確な誤りはあるし、優れた表現というものもあるマークアップもそれに似ている唯一の正解はないが、明確な誤りはあるし、
優れたマークアップというものもあるマークアップはルールが明確に決まっているため、誤りについては極めて明確に判断できる

3種のルール 188

Bengo4.com, Inc. マークアップの誤りは 3種に分類できるマークアップの誤りは3種に分類できる以下の3つのルールのいずれかが破られれば、それは誤り • 字句的ルール • 語彙的ルール
• 意味論的ルール 189

Bengo4.com, Inc. 字句的ルール 190 字句に関するルールで、もっとも基本的なもの違反するとパーサーがエラーを吐き、DOMツリーが正しくできない HTML構文では補正されるが、XML構文だとエラーで終了する字句的ルールに違反している例: • HTML文書の「先頭」がDOCTYPEでない
• タグ名の先頭に数字が使われている • 開始タグと終了タグが対応していない、入れ子構造がおかしい • コメントが入れ子になっている

Bengo4.com, Inc. 語彙的ルール 191 語彙に関するルール使える要素名や属性名、内容モデルによる入れ子ルールなど違反してもパーサーはエラーを吐くでもなく、そのまま動いて望ましくないDOMツリーを作ってしまう以下は語彙的ルールに反する例: •
タグの対応は正しいが、要素名や属性名をタイプミスしている • label要素の中にdiv要素を入れている • a要素にdisabled属性を指定している

Bengo4.com, Inc. 意味論的ルールマークアップで伝えようとする「意味」に関するルール要素の選択が誤っていると、HTMLの文法としては正しくても、ユーザーには本来と異なる意味で伝わってしまうことになる意味論的ルールに違反している例: • 見出しではないのに、文字を大きくするためにh1要素を使う •
ラベルなのに、label要素でマークアップされていない • 意味のある画像なのに、alt属性がない • h1要素の次にh2がなくh3要素が出現する 192

Bengo4.com, Inc. 193 ボタンをaタグで作るな高校校歌 https://creators.bengo4.com/entry/2024/10/02/100000

エラーへの対応 194

Bengo4.com, Inc. 字句的ルールへの違反 195 パーサーがエラーを出すので、XML構文なら即座にわかる HTML構文の場合、補正されてしまうためわかりにくいチェッカーでチェックすることが望ましいツールはいろいろある公開済みのものを丸ごとチェックするなら Nu
HTML Checker CIにチェックプロセスを入れたければ MarkupLint その他、エディタの機能などお好みで

Bengo4.com, Inc. Nu HTML Checker https://validator.w3.org/nu/ 196

Bengo4.com, Inc. MarkupLint https://markuplint.dev/ja/ 197

Bengo4.com, Inc. XML構文でもエラーにならないが、HTMLチェッカーの多くはこの側面にも対応しているため、チェッカーでカバーできる 198 語彙的ルールへの違反

Bengo4.com, Inc. 意味論的ルールへの違反一部のチェッカーは意味論を推論して警告を出すことがあるとはいえ完璧にチェックすることは難しいどういうマークアップが正しいか、という正解もない最終的には人間の経験と勘所の問題になってくることもあるこのマークアップでユーザーにきちんと伝わるだろうか?
アクセシビリティが担保されるだろうか? 常に考えて、コードレビューで目を光らせろ !! 199

誤りをなくしたあとは ? 200 5. 良いHTMLを書く

Bengo4.com, Inc. 誤りのない HTMLを書けたら、次は ? 誤りのないHTMLを書くのは当然の前提でありスタート地点ここに達していない人も多いというのが現実だが、単にやればできるはずのことであり、難しくないはずそこから、さらに高い品質を目指していく必要がある
そのためには、はっきり言えば成長が必要すぐにできることではない 201

Bengo4.com, Inc. より「良い」 HTMLを書くために必要なのは、知ること、調べること授業で教わるもよし、聞くもよし、自分で調べるもよし自分で調べることができれば、それに越したことはない 202

調べること、知ること 203 5. 良いHTMLを書く

Webから知識を得る 204

Bengo4.com, Inc. Webから知識を得る HTMLについての情報は基本的にWebで無料で得ることができる公式なコンテンツや、正確で有益なコンテンツがたくさんある 205

Bengo4.com, Inc. HTML Living Standard https://html.spec.whatwg.org/multipage/ 206

Bengo4.com, Inc. MDN https://developer.mozilla.org/ja/docs/Web 207

Bengo4.com, Inc. Can I use… https://caniuse.com/ 208

Bengo4.com, Inc. Nu HTML Checker https://validator.w3.org/nu/ 209

210 本から知識を得る

Bengo4.com, Inc. HTML解体新書前書きより 211 HTMLの仕様はWebで公開されており、誰でも無料で読むことができます。しかし実際のところ、 HTML仕様を読むのはそこまで
簡単なことではありません。本書は、その橋渡しをする目的で書かれました。

AIから知識を得る 212

Bengo4.com, Inc. AIに聞くときのコツ HTMLの仕様はWebで公開されているそのため、AIに聞くとかなり正確な答えが得られる (ことが多い) ただし、世間には不正確な情報や古い情報が溢れており、そういったものを拾ってしまうこともある「最新のHTML Standardの仕様ではどうなっているか」
というニュアンスで聞くと正確な答えが得られやすい (※効果を保証するものではありません) 213

実際のWebサイトを見る 214

Bengo4.com, Inc. WebサイトのHTMLから学ぶ 215 実際に公開されているWebサイトのHTMLは、簡単に見ることができる Webを見ていて「これはどうなっているのだろう?」と思ったらソースを見たり、開発者ツールで調べることで学びにつながることがある
(脆弱性の発見につながることもある………)

ここまでのまとめ 216 5. 良いHTMLを書く

Bengo4.com, Inc. 良いHTMLを書く • HTMLにも品質がある • 「良い」HTMLと言える条件はいくつか考えられる ◦ セマンティック、アクセシブル、誤りがない、保守しやすい、etc. •
マークアップの誤りは検出、修正できる ◦ 字句的ルール、語彙的ルールの違反はツールでチェック可能 ◦ 意味論的ルールの違反を見つけるのは経験が必要 • より「良い」HTMLを書くためには成長が必要 ◦ Webから学ぶ、本で学ぶ、AIから学ぶ ◦ 実際のWebサイトで何か気になったらどんどん調べてみよう 217

218 おつかれさまでした

会社紹介 219

Bengo4.com,Inc. VISION まだないやり方で、世界を前へ。 Drive a paradigm shift for the better
world. MISSION ｢プロフェッショナル・テック｣で、次の常識をつくる。 Be the Professional-Tech Company. プロフェッショナルだからできること。専門知とテクノロジーで、社会に貢献する。

Bengo4.com, Inc. OUR SERVICE 税理士に無料で相談・検索できる日本最大級の税務相談ポータルサイト最新の法改正や実務について分かりやすく解説する日本最大級の企業法務ポータルサイト日本最大級の無料法律相談ポータルサイト時事問題の弁護士解説を中心としたメディア
弁護士事務所、企業法務職向け人材紹介事業 AI基盤技術「 LegalBrain 1.0」を組み込んだリーガル特化型 AIエージェント契約の締結から管理までデジタルで完結させる契約マネジメントプラットフォーム

Bengo4.com, Inc. We are Hiring

2025新卒研修・HTML/CSS #弁護士ドットコム

2025新卒研修・HTML/CSS #弁護士ドットコム

More Decks by 弁護士ドットコム

Other Decks in Technology

Featured

Transcript