o2project · kubosho · Oct 30, 2024 · Oct 30, 2024 · Oct 30, 2024 · Oct 28, 2024
diff --git a/.gitignore b/.gitignore
@@ -67,6 +67,8 @@ $RECYCLE.BIN/
 # Windows shortcuts
 *.lnk
 
+*:Zone.Identifier
+
 # ------------------------------
 # Node.js
 # ------------------------------

diff --git a/.textlintrc.js b/.textlintrc.js
@@ -6,6 +6,10 @@ module.exports = {
     ...config.rules,
     'no-dead-link': {
       ignoreRedirects: true,
+      retry: 0,
+    },
+    'preset-jtf-style': {
+      '4.2.9.ダッシュ(-)': false,
     },
   },
 };
diff --git a/entries/colophon.md b/entries/colophon.md
@@ -1,13 +1,20 @@
-<section id="colophon" role="doc-colophon">
+# trapezium.css
 
-## trapezium.css
+2024年11月2日　v1.0.0
 
-2024年11月2日：初版発行
+<dl>
+  <div>
+    <dt>発行</dt>
+    <dd>O2 Project</dd>
+  </div>
+  <div>
+    <dt>著者</dt>
+    <dd>kubosho</dd>
+  </div>
+  <div>
+    <dt>印刷</dt>
+    <dd>日光企画</dd>
+  </div>
+</dl>
 
-- 発行：O2 Project
-- 編集：kubosho
-- 印刷：日光企画
-
-© O2 Project, 2024
-
-</section>
+© 2024 O2 Project
diff --git a/entries/east.md b/entries/east.md
@@ -1 +1,132 @@
 # 東の星 ～Water.css～
+
+リポジトリ：[github.com/kognise/water.css](https://github.com/kognise/water.css)
+
+東ゆうが「ワラーシーエスエス」と読みそうなWater.cssは、簡単なデモページやシンプルな内容のWebサイトを作るときに、良い見た目にするためのライブラリと説明されています。
+
+## 特徴
+
+Water.cssのREADMEには下記の特徴があると書かれています。
+
+- レスポンシブである
+- テーマを変えられる
+- 古いKindleブラウザーでも動作するほどのブラウザーサポート
+- 小さなサイズ
+- 美しい
+- クラスレス
+
+今回紹介するライブラリとの比較では、下記の特徴があります。
+
+- `:root` 擬似クラスに定義されている変数を使ってスタイルのカスタマイズができる
+- `blockquote` 要素の `font-style` 値に `italic` を定義している
+- `input` 要素の `display` 値に `block` を定義することで、フォーム要素の縦並び表示を実現している
+- 印刷向けのスタイル定義がある
+- もっとも多くのルールセット・セレクター・スタイル宣言がされている
+
+それぞれの特徴について詳しく見ていきます。
+
+### `:root` 擬似クラスに定義されている変数を使ってスタイルのカスタマイズができる
+
+Almond.cssやnew.cssと同じく `:root` 擬似クラスに変数が定義されています。変数の値を自分の書いたCSS内で上書きすることで、見た目を変えられます。
+
+[v2.1.1時点のWater.cssのソースコード](https://github.com/kognise/water.css/blob/2.1.1/src/variables-light.css)から引用してきたコードで示すと、下記の変数が定義されています。
+
+```css
+:root {
+  --background-body: #fff;
+  --background: #efefef;
+  --background-alt: #f7f7f7;
+  --selection: #9e9e9e;
+  --text-main: #363636;
+  --text-bright: #000;
+  --text-muted: #70777f;
+  --links: #0076d1;
+  --focus: #0096bfab;
+  --border: #dbdbdb;
+  --code: #000;
+  --animation-duration: 0.1s;
+  --button-base: #d0cfcf;
+  --button-hover: #9b9b9b;
+  --scrollbar-thumb: color-mod(var(--button-hover) lightness(+6%));
+  --scrollbar-thumb-hover: var(--button-hover);
+  --form-placeholder: #949494;
+  --form-text: #1d1d1d;
+  --variable: #39a33c;
+  --highlight: #ff0;
+  --select-arrow: svg-load('./assets/select-arrow.svg', fill: #161f27);
+}
+```
+
+変数の詳細は、[リポジトリのREADME](https://github.com/kognise/water.css?tab=readme-ov-file#theming)の「Theming」内にまとまっています。
+
+### `blockquote` 要素の `font-style` 値に `italic` を定義している
+
+`blockquote` 要素内の文字を斜体で表示するようにした上で、`border` も左側に表示されていて、一目で引用と分かる見た目になっています。
+
+![blockquote要素内が斜体で表示されている](./images/east/blockquote_italic.png)
+
+### `input` 要素の `display` 値に `block` を定義することで、フォーム要素の縦並び表示を実現している
+
+sakuraでもフォームが縦並びになるよう `label` 要素に対して `display: block;` が適用されていました。ただ、この方法は `label` 要素内に各要素を入れ子にすることを強制するものでした。せっかく `label` 要素と `input` 要素は入れ子にしなくても良い仕様になっているので、それ、ちゃんと尊重してほしかったなという感じでした。
+
+Water.cssは仕様を尊重しているのか、`input` 要素に対して `display: block;` を適用することでフォーム要素を縦に並べた表示を実現しています。
+
+![フォームが整った見た目になっている](./images/east/form.png)
+
+一方で `type="checkbox"` と `type="radio"` が `input` 要素に対して定義されている場合は、`display: initial;` を適用しているため、横並びに表示したいフォーム関連の要素はちゃんと横並びに表示されます。
+
+### 印刷向けのスタイル定義がある
+
+唯一、印刷時に適用されるスタイル定義があります。適用されるスタイルを挙げると下記の通りになります。
+
+- 背景色を変更している要素に対して `background-color: #ffffff;` を適用
+- 前景色を変更している要素に対して `color: #000000;` を適用
+- `a` 要素に対して `color: #0000ff;` を適用し、下線を付けるように変更
+
+### もっとも多くのルールセット・セレクター・スタイル宣言がされている
+
+今回紹介しているクラスレスCSS（sakura、Almond.css、Water.css、new.css）の中ではWater.cssがもっともルールセット・セレクター・スタイル宣言の数が多いです。
+
+[CSS Stats](https://cssstats.com/)というWeb上でCSSの内容を解析できるツールを使って、Water.cssで定義されているルールセット・セレクター・スタイル宣言の数を出してみたのが下記の画像です。
+
+![Water.cssをCSS Statsで解析した結果](./images/east/water_cssstats.png)
+
+78個のプロパティ・195個のルール・262個のセレクター・578個のスタイル定義が存在していることが分かります。
+
+対象的にもっとも少ないsakuraをCSS Statsで解析した結果が下記の画像です。
+
+![sakuraをCSS Statsで解析した結果](./images/east/sakura_cssstats.png)
+
+39個のプロパティ・37個のルール・70個のセレクター・105個のスタイル定義しか存在していないことが分かります。
+
+## 気になる点
+
+### `input` 要素に特定の属性を定義したときに、`input` 要素と `label` 要素を横並びにした場合、チェックボックスの表示が上にずれる
+
+他のライブラリと比較した際に、`input` 要素の `type` 属性に `checkbox` または `radio` が定義されていると、`label` 要素を並べたときにチェックボックスの表示が上にずれることです。
+
+![チェックボックスの表示が上にずれている](./images/east/input_checkbox_label.png)
+
+これに関しては `input` 要素と `label` 要素の両方に `vertical-align: text-top;` を定義すれば、横並びで表示したときに表示位置が揃います。
+
+![調整後の見た目。チェックボックスとテキストがきちんと横並びになっている](./images/east/checkbox_and_text_align.png)
+
+### `body` 要素の `font-family` に `system-ui` が定義されている
+
+`font-family` の値にさまざまなフォントが定義されています。ただ一番先頭が `system-ui` のため `Yu Gothic UI` が適用される環境（主にWindows）もあります。
+
+この `Yu Gothic UI` が曲者で、Chrome系ブラウザーでかぎ括弧を連続して表示した場合（たとえば「あああ」「いいい」など）に、かぎ括弧同士が重なって表示されます。
+
+[「Yu Gothic UI」フォントの鍵括弧、繋げるとブラウザ表示で重なる問題を調べてみた - 俵のメモ帳](https://tawara-memo.hatenablog.com/entry/2024/10/12/174432)という記事によると、割と最近実装されたCSSのプロパティ `text-spacing-trim` のデフォルト値と、Yu Gothic UI内部の設定の組み合わせによって引き起こされている問題のようです。
+
+游ゴシック自体、Windowsでは `font-weight: normal;` の状態で使うと文字の線の太さが細くて見づらかったり、OSレベルで標準インストールされているWindows以外ではフィンガープリントの観点で使えなくなる可能性があったり、クセがあるフォントですが、上手くスタイルを適用すればメイリオと比較してスッキリした見た目になるので、嫌なやつかもしれないけど、そういうところも、そうじゃないところもあるよ、という感じです。
+
+### 更新されていない
+
+また重要な点として、2021年8月頃から更新が途絶えていることが挙げられます。
+
+[This repository is not currently being maintained](https://github.com/kognise/water.css/issues/351)というissueが挙がっているように、元々の作者がリポジトリをメンテナンスしておらず、IssueやPull Requestに対して何も行動しない状態が続いています。
+
+今回紹介するライブラリではnew.cssも更新が途絶えていますが、new.cssはアナウンスをしないまま更新が途絶えているのに比べて、Water.cssは作者ではないとはいえPull Requestのマージ権限を持ったメンテナーがアナウンスをしているため、ある程度の公式感を伴ったアナウンスがされていると言えます。
+
+とはいえ、更新が途絶えていることには変わりないため、将来的にForkして使う可能性も検討したほうが良いでしょう。
diff --git a/entries/images/east/blockquote_italic.png b/entries/images/east/blockquote_italic.png
diff --git a/entries/images/east/checkbox_and_text_align.png b/entries/images/east/checkbox_and_text_align.png
diff --git a/entries/images/east/form.png b/entries/images/east/form.png
diff --git a/entries/images/east/input_checkbox_label.png b/entries/images/east/input_checkbox_label.png
diff --git a/entries/images/east/sakura_cssstats.png b/entries/images/east/sakura_cssstats.png
diff --git a/entries/images/east/water_cssstats.png b/entries/images/east/water_cssstats.png
diff --git a/entries/images/north/dt_dd.png b/entries/images/north/dt_dd.png
diff --git a/entries/images/north/fieldset.png b/entries/images/north/fieldset.png
diff --git a/entries/images/north/header.png b/entries/images/north/header.png
diff --git a/entries/images/north/north_contrast.png b/entries/images/north/north_contrast.png
diff --git a/entries/images/north/sakura_contrast.png b/entries/images/north/sakura_contrast.png
diff --git a/entries/images/north/water_css_fieldset.png b/entries/images/north/water_css_fieldset.png
diff --git a/entries/images/south/checkbox_and_link.png b/entries/images/south/checkbox_and_link.png
diff --git a/entries/images/south/form_modified.png b/entries/images/south/form_modified.png
diff --git a/entries/images/west/almond_headings.png b/entries/images/west/almond_headings.png
diff --git a/entries/images/west/blockquote.png b/entries/images/west/blockquote.png
diff --git a/entries/images/west/dd_italic.png b/entries/images/west/dd_italic.png
diff --git a/entries/images/west/sakura_headings.png b/entries/images/west/sakura_headings.png
diff --git a/entries/images/west/valid_quote.png b/entries/images/west/valid_quote.png
diff --git a/entries/north.md b/entries/north.md
@@ -1 +1,117 @@
 # 北の星 ～new.css～
+
+リポジトリ：[github.com/xz/new.css](https://github.com/xz/new.css)
+
+new.cssは、4.8KBというCSSのサイズの小ささを売りにしているライブラリです。
+
+## 特徴
+
+new.cssのREADMEには、シンプルなブログや自己紹介ページなどで、もっともよく活用できると書かれています。このあたりは本書籍の「はじめに」内「クラスレスCSSの活用」で書いた通りの用途となりそうです。
+
+今回紹介するライブラリとの比較では、下記の特徴があります。
+
+- `:root` 擬似クラスに定義されている変数を使ってスタイルのカスタマイズができる
+- `header` 要素に対してスタイル定義がされている
+- sakuraと比較して、多くの要素にスタイルが適用されている
+- 背景色と前景色のコントラスト比がもっとも高い
+
+### `:root` 擬似クラスに定義されている変数を使ってスタイルのカスタマイズができる
+
+Water.cssやAlmond.cssと同じく `:root` 擬似クラスに変数が定義されています。変数の値を自分の書いたCSS内で上書きすることで、見た目を変えられます。
+
+[v1.1.3時点のnew.cssのソースコード](https://github.com/xz/new.css/blob/v1.1.3/new.css)から引用してきたコードで示すと、下記の変数が定義されています。
+
+```css
+:root {
+  --nc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --nc-font-mono: Consolas, monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace;
+
+  /* Light theme */
+  --nc-tx-1: #000000;
+  --nc-tx-2: #1A1A1A;
+  --nc-bg-1: #FFFFFF;
+  --nc-bg-2: #F6F8FA;
+  --nc-bg-3: #E5E7EB;
+  --nc-lk-1: #0070F3;
+  --nc-lk-2: #0366D6;
+  --nc-lk-tx: #FFFFFF;
+  --nc-ac-1: #79FFE1;
+  --nc-ac-tx: #0C4047;
+
+  /* Dark theme */
+  --nc-d-tx-1: #ffffff;
+  --nc-d-tx-2: #eeeeee;
+  --nc-d-bg-1: #000000;
+  --nc-d-bg-2: #111111;
+  --nc-d-bg-3: #222222;
+  --nc-d-lk-1: #3291FF;
+  --nc-d-lk-2: #0070F3;
+  --nc-d-lk-tx: #FFFFFF;
+  --nc-d-ac-1: #7928CA;
+  --nc-d-ac-tx: #FFFFFF;
+}
+```
+
+変数の詳細は、[new.cssのWiki](https://github.com/xz/new.css/wiki/Customizing-Themes)の「Customizing Themes」内にまとまっています。
+
+### `header` 要素に対してスタイル定義がされている
+
+今回紹介するライブラリでは唯一 `header` 要素に対してスタイルが適用されています。スタイル自体はページのヘッダーによく適用されていそうなスタイルとなっているため、癖はないと言えます。
+
+![ヘッダーの見た目](./images/north/header.png)
+
+### sakuraと比較して、多くの要素にスタイルが適用されている
+
+同じく軽量なライブラリであるsakuraと比較すると、new.cssのほうがスタイル適用されている要素は多いです。new.cssは56個の要素に対してスタイルが適用されているのに対して、sakuraは33個の要素に絞られています。
+
+「南の星 ～sakura～」の章で書きましたが、HTMLの要素は、過去に存在したが今は非推奨となった要素を除くと、2024年10月時点で114個の要素が存在します。
+
+なのでnew.cssは約半分の要素に対してスタイル適用がされていることになります。
+
+### 背景色と前景色のコントラスト比がもっとも高い
+
+new.cssは背景色に `#ffffff` と前景色に `#000000` が適用されている唯一のライブラリです。
+
+![new.cssのテキスト部分を表示したときの背景色と前景色](./images/north/north_contrast.png)
+
+コントラスト比をもっとも抑えているsakuraを適用したページの画像は下記の通りですが、比較するとかなりコントラスト比が異なります。
+
+![sakuraのテキスト部分を表示したときの背景色と前景色](./images/north/sakura_contrast.png)
+
+## 気になる点
+
+### `dt` 要素が太字になっている
+
+唯一 `dt` 要素に `font-weight: 700;` が指定されています。既定の状態だと `dd` 要素には `margin-inline-start` が適用されているので `dt` 要素と `dd` 要素で文字の太さを変更する必要はないですが、後述する `dd` 要素に対して `::before` 疑似要素を使って右矢印を表示するようにしている関係上、`dd` 要素と区別する意味で太字にしているかもしれません。
+
+![太字になっているdt要素](./images/north/dt_dd.png)
+
+ただ `dd` 要素のスタイル定義と合わせて、好みが分かれそうなスタイル定義です。
+
+### `dd` 要素の `::before` 疑似要素の `content` プロパティの値に右矢印が定義されている
+
+前述の `dt` 要素に続いて `dd` 要素も他にはない独自のスタイル定義として、`::before` 疑似要素の `content` プロパティの値に右矢印が定義されています。
+
+![dd要素の始めに右矢印が表示されている](./images/north/dt_dd.png)
+
+個人的にはこういう表現もありだとは思いますが、こちらもまた好みが分かれそうなスタイル定義です。
+
+### `fieldset` 要素の `padding` が広い
+
+他のライブラリと比較して、`fieldset` 要素に対して適用されている `padding` が広めとなっています。
+
+![new.cssのfieldset要素の見た目](./images/north/fieldset.png)
+
+下記の画像はWater.cssを使って `fieldset` 要素を表示したときの見た目ですが、new.cssと比較して明らかに `padding` が狭いです。
+
+![Water.cssのfieldset要素の見た目](./images/north/water_css_fieldset.png)
+
+### 更新されていない
+
+また重要な点として、2021年10月頃から更新が途絶えていることが挙げられます。
+
+Water.cssも同じく更新が途絶えていますが、こちらは作者以外でメンテナーとして関わっていた人が、リポジトリの状況についてIssueを作る形で回答していました。
+
+しかしnew.cssはアナウンスもなく更新が途絶えている状態です。
+
+もしnew.cssを使う場合は、将来的にForkして使う可能性も検討したほうが良いでしょう。