diff --git a/.gitignore b/.gitignore
index fbb15a8..2942da7 100644
--- 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
index 0fc1407..2130ca1 100644
--- 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
index 4c98856..a5a5925 100644
--- a/entries/colophon.md
+++ b/entries/colophon.md
@@ -1,13 +1,20 @@
-
+# trapezium.css
-## trapezium.css
+2024年11月2日 v1.0.0
-2024年11月2日：初版発行
+
+
+
- 発行
+ - O2 Project
+
+
+
- 著者
+ - kubosho
+
+
+
- 印刷
+ - 日光企画
+
+
-- 発行：O2 Project
-- 編集：kubosho
-- 印刷：日光企画
-
-© O2 Project, 2024
-
-
+© 2024 O2 Project
diff --git a/entries/east.md b/entries/east.md
index 96ca28c..9f5c707 100644
--- 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` も左側に表示されていて、一目で引用と分かる見た目になっています。
+
+
+
+### `input` 要素の `display` 値に `block` を定義することで、フォーム要素の縦並び表示を実現している
+
+sakuraでもフォームが縦並びになるよう `label` 要素に対して `display: block;` が適用されていました。ただ、この方法は `label` 要素内に各要素を入れ子にすることを強制するものでした。せっかく `label` 要素と `input` 要素は入れ子にしなくても良い仕様になっているので、それ、ちゃんと尊重してほしかったなという感じでした。
+
+Water.cssは仕様を尊重しているのか、`input` 要素に対して `display: block;` を適用することでフォーム要素を縦に並べた表示を実現しています。
+
+
+
+一方で `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で定義されているルールセット・セレクター・スタイル宣言の数を出してみたのが下記の画像です。
+
+
+
+78個のプロパティ・195個のルール・262個のセレクター・578個のスタイル定義が存在していることが分かります。
+
+対象的にもっとも少ないsakuraをCSS Statsで解析した結果が下記の画像です。
+
+
+
+39個のプロパティ・37個のルール・70個のセレクター・105個のスタイル定義しか存在していないことが分かります。
+
+## 気になる点
+
+### `input` 要素に特定の属性を定義したときに、`input` 要素と `label` 要素を横並びにした場合、チェックボックスの表示が上にずれる
+
+他のライブラリと比較した際に、`input` 要素の `type` 属性に `checkbox` または `radio` が定義されていると、`label` 要素を並べたときにチェックボックスの表示が上にずれることです。
+
+
+
+これに関しては `input` 要素と `label` 要素の両方に `vertical-align: text-top;` を定義すれば、横並びで表示したときに表示位置が揃います。
+
+
+
+### `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
new file mode 100644
index 0000000..4f78bed
Binary files /dev/null and b/entries/images/east/blockquote_italic.png differ
diff --git a/entries/images/east/checkbox_and_text_align.png b/entries/images/east/checkbox_and_text_align.png
new file mode 100644
index 0000000..393c48d
Binary files /dev/null and b/entries/images/east/checkbox_and_text_align.png differ
diff --git a/entries/images/east/form.png b/entries/images/east/form.png
new file mode 100644
index 0000000..e6a813b
Binary files /dev/null and b/entries/images/east/form.png differ
diff --git a/entries/images/east/input_checkbox_label.png b/entries/images/east/input_checkbox_label.png
new file mode 100644
index 0000000..2800165
Binary files /dev/null and b/entries/images/east/input_checkbox_label.png differ
diff --git a/entries/images/east/sakura_cssstats.png b/entries/images/east/sakura_cssstats.png
new file mode 100644
index 0000000..0a7955f
Binary files /dev/null and b/entries/images/east/sakura_cssstats.png differ
diff --git a/entries/images/east/water_cssstats.png b/entries/images/east/water_cssstats.png
new file mode 100644
index 0000000..bf9b5e7
Binary files /dev/null and b/entries/images/east/water_cssstats.png differ
diff --git a/entries/images/north/dt_dd.png b/entries/images/north/dt_dd.png
new file mode 100644
index 0000000..bdd77e2
Binary files /dev/null and b/entries/images/north/dt_dd.png differ
diff --git a/entries/images/north/fieldset.png b/entries/images/north/fieldset.png
new file mode 100644
index 0000000..42967ac
Binary files /dev/null and b/entries/images/north/fieldset.png differ
diff --git a/entries/images/north/header.png b/entries/images/north/header.png
new file mode 100644
index 0000000..d906716
Binary files /dev/null and b/entries/images/north/header.png differ
diff --git a/entries/images/north/north_contrast.png b/entries/images/north/north_contrast.png
new file mode 100644
index 0000000..655d565
Binary files /dev/null and b/entries/images/north/north_contrast.png differ
diff --git a/entries/images/north/sakura_contrast.png b/entries/images/north/sakura_contrast.png
new file mode 100644
index 0000000..7622c63
Binary files /dev/null and b/entries/images/north/sakura_contrast.png differ
diff --git a/entries/images/north/water_css_fieldset.png b/entries/images/north/water_css_fieldset.png
new file mode 100644
index 0000000..91ac34d
Binary files /dev/null and b/entries/images/north/water_css_fieldset.png differ
diff --git a/entries/images/south/checkbox_and_link.png b/entries/images/south/checkbox_and_link.png
new file mode 100644
index 0000000..a248ca4
Binary files /dev/null and b/entries/images/south/checkbox_and_link.png differ
diff --git a/entries/images/south/form_modified.png b/entries/images/south/form_modified.png
new file mode 100644
index 0000000..74255bf
Binary files /dev/null and b/entries/images/south/form_modified.png differ
diff --git a/entries/images/west/almond_headings.png b/entries/images/west/almond_headings.png
new file mode 100644
index 0000000..aedc764
Binary files /dev/null and b/entries/images/west/almond_headings.png differ
diff --git a/entries/images/west/blockquote.png b/entries/images/west/blockquote.png
new file mode 100644
index 0000000..31b2f02
Binary files /dev/null and b/entries/images/west/blockquote.png differ
diff --git a/entries/images/west/dd_italic.png b/entries/images/west/dd_italic.png
new file mode 100644
index 0000000..fa552a5
Binary files /dev/null and b/entries/images/west/dd_italic.png differ
diff --git a/entries/images/west/sakura_headings.png b/entries/images/west/sakura_headings.png
new file mode 100644
index 0000000..4401e7d
Binary files /dev/null and b/entries/images/west/sakura_headings.png differ
diff --git a/entries/images/west/valid_quote.png b/entries/images/west/valid_quote.png
new file mode 100644
index 0000000..2f51c7f
Binary files /dev/null and b/entries/images/west/valid_quote.png differ
diff --git a/entries/north.md b/entries/north.md
index 7a7e0d4..9fdbfcd 100644
--- 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` 要素に対してスタイルが適用されています。スタイル自体はページのヘッダーによく適用されていそうなスタイルとなっているため、癖はないと言えます。
+
+
+
+### sakuraと比較して、多くの要素にスタイルが適用されている
+
+同じく軽量なライブラリであるsakuraと比較すると、new.cssのほうがスタイル適用されている要素は多いです。new.cssは56個の要素に対してスタイルが適用されているのに対して、sakuraは33個の要素に絞られています。
+
+「南の星 ～sakura～」の章で書きましたが、HTMLの要素は、過去に存在したが今は非推奨となった要素を除くと、2024年10月時点で114個の要素が存在します。
+
+なのでnew.cssは約半分の要素に対してスタイル適用がされていることになります。
+
+### 背景色と前景色のコントラスト比がもっとも高い
+
+new.cssは背景色に `#ffffff` と前景色に `#000000` が適用されている唯一のライブラリです。
+
+
+
+コントラスト比をもっとも抑えているsakuraを適用したページの画像は下記の通りですが、比較するとかなりコントラスト比が異なります。
+
+
+
+## 気になる点
+
+### `dt` 要素が太字になっている
+
+唯一 `dt` 要素に `font-weight: 700;` が指定されています。既定の状態だと `dd` 要素には `margin-inline-start` が適用されているので `dt` 要素と `dd` 要素で文字の太さを変更する必要はないですが、後述する `dd` 要素に対して `::before` 疑似要素を使って右矢印を表示するようにしている関係上、`dd` 要素と区別する意味で太字にしているかもしれません。
+
+
+
+ただ `dd` 要素のスタイル定義と合わせて、好みが分かれそうなスタイル定義です。
+
+### `dd` 要素の `::before` 疑似要素の `content` プロパティの値に右矢印が定義されている
+
+前述の `dt` 要素に続いて `dd` 要素も他にはない独自のスタイル定義として、`::before` 疑似要素の `content` プロパティの値に右矢印が定義されています。
+
+
+
+個人的にはこういう表現もありだとは思いますが、こちらもまた好みが分かれそうなスタイル定義です。
+
+### `fieldset` 要素の `padding` が広い
+
+他のライブラリと比較して、`fieldset` 要素に対して適用されている `padding` が広めとなっています。
+
+
+
+下記の画像はWater.cssを使って `fieldset` 要素を表示したときの見た目ですが、new.cssと比較して明らかに `padding` が狭いです。
+
+
+
+### 更新されていない
+
+また重要な点として、2021年10月頃から更新が途絶えていることが挙げられます。
+
+Water.cssも同じく更新が途絶えていますが、こちらは作者以外でメンテナーとして関わっていた人が、リポジトリの状況についてIssueを作る形で回答していました。
+
+しかしnew.cssはアナウンスもなく更新が途絶えている状態です。
+
+もしnew.cssを使う場合は、将来的にForkして使う可能性も検討したほうが良いでしょう。
diff --git a/entries/prologue.md b/entries/prologue.md
index 8b756f1..bf2b931 100644
--- a/entries/prologue.md
+++ b/entries/prologue.md
@@ -6,7 +6,9 @@
リセットCSSは最初期こそブラウザーが適用しているスタイルをすべて打ち消すものが多かったです。
-ただ、段々ブラウザー間の差異を無くしつつ、独自のスタイル定義をするライブラリが出てきました。最近のリセットCSSの代表例として、下記の4つが挙げられます。
+ただ時代が進むにつれて、ブラウザー間の差異を無くしつつ、独自のスタイル定義をするライブラリも出てきました。
+
+最近のリセットCSSの代表例として、下記の4つが挙げられます。
- [necolas/normalize.css: A modern alternative to CSS resets](https://github.com/necolas/normalize.css)
- [csstools/sanitize.css: A best-practices CSS foundation](https://github.com/csstools/sanitize.css)
@@ -39,7 +41,7 @@ Tacitの作者は[Tacit, a CSS Framework Without Classes](https://www.yegor256.c
- 独自のクラス名が多く定義されていて、かつフレームワークごとにクラス名が違う
- HTMLの構造やCSSのクラス名が、フレームワークの定義するものに縛られる
-- 見た目をカスタマイズしたい場合、複雑なセレクタ定義をしないといけない
+- 見た目をカスタマイズしたい場合、複雑なセレクター定義をしないといけない
これらの問題点によって、開発速度や開発体験に影響する場合がありました。
@@ -79,7 +81,7 @@ Tacitの作者は[Tacit, a CSS Framework Without Classes](https://www.yegor256.c
- [Pinterest](https://jp.pinterest.com/)や[pixiv](https://www.pixiv.net/)のような画像中心のページ
- [Figma](https://www.figma.com/)のような自由にオブジェクトが配置できる前提のWebアプリケーション
-- [Netflix](https://www.netflix.com/jp)といった複数カラムが各ページにモジュール単位で存在しているページ
+- [ABEMA](https://abema.tv/)といった複数カラムが各ページにモジュール単位で存在しているページ
## クラスレスCSSの活用
@@ -94,7 +96,7 @@ Tacitの作者は[Tacit, a CSS Framework Without Classes](https://www.yegor256.c
- ポートフォリオ
- 製品のランディングページ
-またコンポーネントカタログを構築するときに、HTML要素が持つ役割と合致したコンポーネント⸺たとえばボタンやフォームなどが存在するのであれば、HTML要素に対して直接スタイル定義をすることで、余計なクラスを増やすことなく、HTMLを書いただけで統一的な見た目を得られます。
+またコンポーネントカタログを構築するときに、HTML要素が持つ役割と合致したコンポーネント——たとえばボタンやフォームなどが存在するのであれば、HTML要素に対して直接スタイル定義をすることで、余計なクラスを増やすことなく、HTMLを書いただけで統一的な見た目を得られます。
## クラスレスCSSは結局なんなのか？
@@ -102,4 +104,9 @@ Tacitの作者は[Tacit, a CSS Framework Without Classes](https://www.yegor256.c
また必要に応じて追加のCSSを書くことができるため、クラスレスCSSライブラリで適用される見た目をもとにして、より発展的な見た目・レイアウトを作っていくことも可能です。
-次の章からは星の数ほどあるクラスレスCSSのうち、選りすぐりのライブラリを4つ紹介します。
+次の章からは星の数ほどあるクラスレスCSSのうち、選りすぐりのライブラリである下記の4つを紹介します。
+
+- [oxalorg/sakura](https://github.com/oxalorg/sakura)
+- [alvaromontoro/almond.css](https://github.com/alvaromontoro/almond.css)
+- [kognise/water.css](https://github.com/kognise/water.css)
+- [xz/new.css](https://github.com/xz/new.css)
diff --git a/entries/south.md b/entries/south.md
index cdc0658..32e4e70 100644
--- a/entries/south.md
+++ b/entries/south.md
@@ -1,56 +1,82 @@
# 南の星 ～sakura～
-[GitHubのリポジトリ](https://github.com/oxalorg/sakura)
+リポジトリ：[github.com/oxalorg/sakura](https://github.com/oxalorg/sakura)
-sakuraは90年代のような見栄えの悪いWebサイトを、sakuraが提供するCSSを読み込むだけででモダンなWebサイトにするライブラリと説明されています。
+sakuraは、90年代のような見栄えの悪いWebサイトを、sakuraが提供するCSSを読み込むだけででモダンなWebサイトにするライブラリと説明されています。
+
+ライトモードでは桜っぽい要素はありませんが、ダークモードの一部テーマでは、線やボタンの背景色に桜っぽい色が適用されます。
## 特徴
-sakuraのREADMEに書かれている特徴としては次の通りです。
+sakuraのREADMEには下記の特徴があると書かれています。
-- Sassによる独自のテーマ作成
+- Sassによる独自テーマ作成
- ダークモード用のCSSを読み込むことでダークモードに対応
-今回紹介するライブラリとの比較では、下記の特徴もあります。
+今回紹介するライブラリとの比較では、下記の特徴があります。
-- Webページを作る上でよく使われるHTMLの要素に、スタイル定義が限定されている
-- body要素の `max-width` 値として唯一 `em` 単位が使われている
-- body要素の `background-color` 値として唯一 `#ffffff` ではなく `#f9f9f9` と定義されている
-- テーブルに関する要素に対して `background-color` が定義されていない
+- Webページを作る上でよく使われるHTMLの要素に限定してスタイルが適用されている
+- `body` 要素の `max-width` の値の単位に、唯一 `em` 単位が使われている
+- `body` 要素の `background-color` の値に、唯一 `#ffffff` ではなく `#f9f9f9` が定義されている
+- `tr` 要素に対して `background-color` が適用されていない
- new.cssと同じく全てのスタイル定義が1つのファイルに書かれている
- Almond.cssと同じくSassが使われている
それぞれの特徴について詳しく見ていきます。
-### body要素の `max-width` の値の単位に唯一 `em` が使われている
+### Sassによる独自テーマ作成
-sakura独自の特徴として、body要素に定義されている `max-width` の値の単位に `em` が使われている点があります。
+[v1.5.0時点のsakuraのソースコード](https://github.com/oxalorg/sakura/blob/1.5.0/scss/sakura.scss)から引用してきたコードで示すと、下記の変数が定義されています。
-これによってブラウザーの設定で文字サイズを変更した場合、その値に応じて `max-width` の値が可変します。
+```scss
+$color-blossom: #1d7484;
+$color-fade: #982c61;
-文字サイズを拡大するよう設定を変更した場合はページの表示領域が狭くなります。そのため `max-width` の値の単位に `em` や `rem` を使うのは、表示領域に対するページ表示の最適化⸺たとえば2カラムで表示しているページを1カラム表示にして、メインコンテンツの表示領域を確保するといった意味で良い考えかもしれません。
+$color-bg: #f9f9f9;
+$color-bg-alt: #f1f1f1;
-### body要素の `background-color` の値として唯一 `#ffffff` ではなく `#f9f9f9` と定義されている
+$color-text: #4a4a4a;
+$font-size-base: 1.8rem;
-こちらもsakura独自の特徴として、body要素に定義されている `background-color` の値で `#f9f9f9` が使われている点があります。
+$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+$font-family-heading: $font-family-base;
-コントラスト比を高めすぎると視覚過敏の特性を持つ人にとってはまぶしく感じ、それによって目が疲れたり不快感を感じたりする場合があります。
+@import "main";
+```
-sakuraでは `color` の値に定義されている `#4a4a4a` と合わせて、背景色と文字色のコントラスト比を高めすぎないことで、目に優しい見た目となっています。
+該当のファイルは[scssディレクトリ](https://github.com/oxalorg/sakura/tree/1.5.0/scss)内に存在しているので、適当なファイルを複製して、変数の値を書き換えた上でビルドすれば、自分好みのテーマを作成できます。
-### tr要素に対して `background-color` が定義されていない
+### Webページを作る上でよく使われるHTMLの要素に限定してスタイルが適用されている
-今回紹介するライブラリの中では、唯一tr要素に `background-color` が定義されていません。これによりテーブル内のどの列も目立つことなく、同じように表示されます。
+sakuraは今回紹介するクラスレスCSSライブラリと比較して、CSS内で定義されているHTML要素の定義が少ないです。
-ただしtd要素とth要素に対して設定されているborder-colorのコントラストが背景色と比較すると低いため、環境によってはセル間の区切りが見づらくなります。
+new.cssも同じくHTML要素に対するスタイル定義が少ないです。ただnew.cssとsakuraを比較した場合も、new.cssは56個の要素に対してスタイルが適用されているのに対して、sakuraは33個の要素にしかスタイルが適用されていません。
-### Webページを作る上でよく使われるHTMLの要素に、スタイル定義が限定されている
+HTMLの要素は、過去に存在したが今は非推奨となった要素を除くと、2024年10月時点で114個の要素が存在します。約1/4の要素にのみスタイル適用されているという点でだいぶ割り切っています。
-sakuraは今回紹介するクラスレスCSSライブラリと比較して、CSS内で定義されているHTML要素の定義が少ないです。
+またメディアクエリー・属性セレクター・擬似クラス・疑似要素・子結合子・子孫結合子などの定義も少ないため、minifyされたCSSを展開した場合、new.cssと比較して約90行分コード量が少ないです。
-new.cssも同じくHTML要素に対するスタイル定義が少ないです。ただnew.cssとsakuraを比較した場合も、new.cssは56個の要素に対してスタイルが適用されているのに対して、sakuraは33個の要素にしかスタイルが適用されていません。
+### `body` 要素の `max-width` の値の単位に、唯一 `em` が使われている
+
+sakura独自の特徴として、`body` 要素に定義されている `max-width` の値の単位に `em` が使われている点があります。
+
+これによってブラウザーの設定で文字サイズを変更した場合、その値に応じて `max-width` の値が可変します。
+
+文字サイズを拡大するよう設定を変更した場合はページの表示領域が狭くなります。そのため `max-width` の値の単位に `em` や `rem` を使うのは、表示領域に対するページ表示の最適化──たとえば2カラムで表示しているページを1カラム表示にして、メインコンテンツの表示領域を確保するといった意味で良い考えかもしれません。
+
+### `body` 要素の `background-color` の値に、唯一 `#ffffff` ではなく `#f9f9f9` が定義されている
+
+こちらもsakura独自の特徴として、`body` 要素に定義されている `background-color` の値で `#f9f9f9` が使われている点があります。
+
+コントラスト比を高めすぎると視覚過敏の特性を持つ人にとってはまぶしく感じ、それによって目が疲れたり不快感を感じたりする場合があります。
+
+sakuraでは `color` の値に定義されている `#4a4a4a` と合わせて、背景色と前景色のコントラスト比を高めすぎないことで、目に優しい見た目となっています。
+
+### `tr` 要素に対して `background-color` が定義されていない
+
+今回紹介するライブラリの中では、唯一 `tr` 要素に `background-color` が定義されていません。これによりテーブル内のどの列も目立つことなく、同じように表示されます。
-またメディアクエリー・属性セレクタ・擬似クラス・疑似要素・子結合子・子孫結合子などの定義も少ないため、minifyされたCSSを展開した場合、new.cssと比較して約90行分コード量が少ないです。
+ただし `td` 要素と `th` 要素に対して設定されている `border-color` のコントラストが背景色と比較すると低いため、環境によってはセル間の区切りが見づらくなります。
### Almond.cssと同じくSassが使われている
@@ -66,12 +92,79 @@ sakuraではスタイルのカスタマイズ用にSassが使われています
## 気になる点
-他のライブラリと比較した際に、label要素に `display: block;` が定義されているのは気になります。
+### `:root` 擬似クラスに変数が定義されてないため、見た目を変更したい場合にSassを使う必要がある
-この影響でinput要素とlabel要素を横並びに表示することができません。今回用意したサンプルのHTMLだと、ラジオボタンの横並びおよび、チェックボックスとリンクを含むラベルの横並び表示ができませんでした。
+今回紹介するAlmond.cssやWater.css、new.cssといったライブラリでは `:root` 擬似クラスに変数が定義されています。そのため別途ツールをインストールしなくても、`:root` 擬似クラス内で変数の値を上書きしたCSSを `link` 要素で読み込めば、見た目を変更できます。
+
+一方でsakuraはSassの変数を使って見た目を変更するための変数が定義されています。なので見た目を変更したい場合は、Node.jsとnpmなどのパッケージマネージャーをインストールした上で、Sassとsakuraもインストールして、Sassのファイルを書き換えた上でビルドしてCSSを出力する作業が必要になります。
+
+`:root` 疑似クラスに変数が定義されていないぶん、ファイルサイズを軽くできているという利点もありますが、見た目を変更する手間は他のライブラリよりかかります。
+
+### `label` 要素に `display: block;` が適用されている
+
+フォームを縦並びに表示するため `label` 要素に `display: block;` が適用されていますが、その影響で `label` 要素内にフォームの要素を入れ子にすることを強いられます。
+
+今回用意したサンプルのHTMLは `label` 要素と `input` 要素を別に書いています。
+
+```html
+
+```
+
+上記のようなHTML構造にするとフォーム内の要素が横並びにならず、下記画像のように不格好な見た目になります。
-またol要素はsakura独自のスタイル定義がなく、ブラウザー既定のCSSが適用されているため、ul要素と並びたときにul要素の先頭の記号とol要素の先頭の数字がきちんと横に揃いません。
+下記のHTMLのように `label` 要素内に `input` 要素を入れ子にすることで、まだマシな見た目になります。
+
+```html
+
+```
+
+
+
+ただせっかく `label` 要素と `input` 要素を別に書ける仕様になっているのに、それができないのは少しモヤッとします。まあsakuraも悪気があったわけじゃないんでしょう。
+
+`label` 要素内に `input` 要素やテキストを入れ子にすることを強制した場合、下記の画像のようにチェックボックスとリンク、テキストを横並びにするようなUIで困ることになります。
+
+
+
+というのも `label` 要素をクリックした場合はフォーム要素にフォーカスされますが、`label` 要素内に `a` 要素などのユーザーが操作できる要素（インタラクティブ要素）を入れ子にすると、下記のようにクリックしたときの挙動が異なることになって、使う人の混乱を招く恐れがあるためです。
+
+- `a` 要素をクリックしたときは `href` 属性で指定しているリンク先に遷移する
+- テキストの部分をクリックしたときはフォーム要素にフォーカスする
+
+### `ol` 要素に独自のスタイルが適用されていない
+
+sakura独自のスタイル定義が `ol` 要素にはないため、ブラウザー既定のCSSが適用されています。
+
+このため `ul` 要素と並べたときに `ul` 要素の先頭の記号と `ol` 要素の先頭の数字がきちんと揃いません。
diff --git a/entries/west.md b/entries/west.md
index 54b2d0b..de498f2 100644
--- a/entries/west.md
+++ b/entries/west.md
@@ -1 +1,162 @@
# 西の星 ～Almond.css～
+
+リポジトリ：[github.com/alvaromontoro/almond.css](https://github.com/alvaromontoro/almond.css)
+
+Almond.cssはブラウザー間で見た目が異ならないよう正規化すると共に、独自のスタイルを適用するライブラリだと説明されています。
+
+## 特徴
+
+Almond.cssのREADMEには下記の特徴があると書かれています。
+
+- タグのみ使い、`class` 属性や `id` 属性に対するスタイルの適用はない
+- ブラウザ間の表示互換性
+- CSS variablesの値とHSLの色表現を変更できる
+- レスポンシブで、アクセシブルかつユーザブル
+- gzip圧縮したときにファイルサイズが3KB以内に収まる
+- シンプルさの維持
+
+今回紹介するライブラリとの比較では、下記の特徴があります。
+
+- `:root` 擬似クラスに定義されている変数を使ってスタイルのカスタマイズができる
+- `font-family` の値に定義されているフォントの数がもっとも少ない
+- 見出し要素に `color` を適用している
+- メインカラーとサブカラーの値定義にHSLを使っている
+
+それぞれの特徴について詳しく見ていきます。
+
+### `:root` 擬似クラスに定義されている変数を使ってスタイルのカスタマイズができる
+
+Water.cssやnew.cssと同じく `:root` 擬似クラスに変数が定義されています。変数の値を自分の書いたCSS内で上書きすることで、見た目を変えられます。
+
+[v1.2.2時点のAlmond.cssのソースコード](https://github.com/alvaromontoro/almond.css/blob/v1.2.2/src/general/variables.scss)から引用してきたコードで示すと、下記の変数が定義されています。
+
+```css
+:root {
+ /* Colors */
+ --primaryH: 210;
+ --primaryS: 50%;
+ --primaryL: 40%;
+ --primary-bg: #fff;
+ --secondaryH: 0;
+ --secondaryS: 0%;
+ --secondaryL: 13%;
+ --secondary-bg: #fff;
+
+ /* Font */
+ --font-family: Helvetica, Arial, sans-serif;
+ --font-size-root: 16px;
+ --font-weight-bolder: 700;
+ --font-weight-bold: 400;
+ --font-weight-normal: 200;
+ --font-weight-thin: 100;
+ --line-height: 1.75rem;
+ --heading-margin: 1.5rem 0 1rem;
+
+ /* Inputs */
+ --border-radius: 2px;
+
+ /* Status */
+ --error: #d00;
+ --warning: #ec0;
+ --info: #369;
+ --correct: #080;
+
+ /* Calculated colors */
+ --primary: hsl(var(--primaryH), var(--primaryS), var(--primaryL));
+ --primary-bright: hsl(var(--primaryH), calc(var(--primaryS) * 1.25), 90%); // #7ef;
+ --primary-transparent: hsla(var(--primaryH), var(--primaryS), var(--primaryL), 0.05);
+ --primary-dark: hsl(var(--primaryH), var(--primaryS), calc(var(--primaryL) * 0.5));
+ --primary-darker: hsl(var(--primaryH), var(--primaryS), calc(var(--primaryL) * 0.2));
+ --primary-light: hsl(var(--primaryH), var(--primaryS), 75%);
+ --primary-lighter: hsl(var(--primaryH), var(--primaryS), 96%);
+ --secondary: hsl(var(--secondaryH), var(--secondaryS), var(--secondaryL));
+ --secondary-transparent: hsl(var(--secondaryH), var(--secondaryS), var(--secondaryL), 0.05);
+ --secondary-dark: hsl(var(--secondaryH), var(--secondaryS), calc(var(--secondaryL) * 0.5));
+ --secondary-darker: hsl(var(--secondaryH), var(--secondaryS), calc(var(--secondaryL) * 0.2));
+ --secondary-light: hsl(var(--secondaryH), var(--secondaryS), 75%);
+ --secondary-lighter: hsl(var(--secondaryH), var(--secondaryS), 96%);
+}
+```
+
+変数の詳細は、[リポジトリのREADME](https://github.com/alvaromontoro/almond.css?tab=readme-ov-file#theming)の「Theming」内にまとまっています。
+
+### `font-family` の値に定義されているフォントの数がもっとも少ない
+
+多く使われているゴシック体のフォントに限ると下記の定義が全てです。
+
+```css
+font-family: Helvetica, Arial, sans-serif;
+```
+
+といっても他と比較しないとどれだけ少ないのか分からないので、今回紹介するライブラリで定義されている `font-family` の値を一覧にします。なお全てゴシック体のフォントに限定しており、セリフ体やソースコードに対して適用されている `font-family` は対象外としています。
+
+- sakura: `font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;`
+- Water.css: `font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Segoe UI Emoji,Apple Color Emoji,Noto Color Emoji,sans-serif;`
+- new.css: `font-family: '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"`
+
+こうして比較するとAlmond.cssの `font-family` に定義されているフォントの数が圧倒的に少ないと分かります。
+
+「ロボコンはデザインだけだと全国で勝てないので、もっと上を目指して努力したい」という大河くるみの精神が現れているかもしれません。
+
+### 見出し要素に `color` を適用している
+
+`font-family` では定義されているフォントの数で圧倒的な少なさを見せましたが、見出し要素に唯一 `color: hsl(210, 50%, 40%);` を適用しているのがAlmond.cssです。
+
+
+
+sakuraと比較してみると分かるかもしれません（白黒ページだと分かりづらいかもしれません……）。
+
+
+
+### メインカラーとサブカラーの値定義にHSLを使っている
+
+他のライブラリと違う点として、メインカラーとサブカラーがHSLの値で指定するようになっていることが挙げられます。
+
+`:root` 擬似クラスに定義された変数のうち、関連する変数だけを抜粋すると下記の部分が該当します。
+
+```css
+:root {
+ --primaryH: 210;
+ --primaryS: 50%;
+ --primaryL: 40%;
+ --secondaryH: 0;
+ --secondaryS: 0%;
+ --secondaryL: 13%;
+}
+```
+
+HSLは色相（Hue）・彩度（Saturation）・輝度（Lightness）で色を表すもので、色相を変えるだけで彩度と輝度が同じだが違う色にできたり、白・グレー・黒といった変化が輝度の値を調整するだけでできたりと、一般的によく使われる16進値と比較して、色のトーン合わせなどがやりやすい利点があります。
+
+もしかしたらHSLを使った可能性を試したいと思って、このような指定にしたのかもしれません。
+
+## 気になる点
+
+### ダークモードが実装されていない
+
+他のライブラリと比較した際に、ダークモードを唯一実装していないライブラリとなっています。このことは気になる人がいるかもしれません。
+
+### `dd` 要素に対して `font-style: italic;` が適用されている
+
+
+
+### `html` 要素の `lang` 属性の値によっては、`blockquote` 要素内が意図しない表示になる
+
+`blockquote` 要素の `::before` 疑似要素に指定している値が `open-quote` となっていますが、`html` 要素の `lang` 属性に定義されている値によって表示される記号が異なります。
+
+たとえば `html` 要素の `lang` 属性に `ja` の値を定義した場合は、かぎ括弧が引用符として使われます。この状態でAlmond.cssを読み込んで `blockquote` 要素を使うと、`blockquote` 要素内でかぎ括弧の始まりが変な位置に表示されます。
+
+
+
+おそらく `html` 要素の `lang` 属性に `en` の値を定義した場合を想定していそうなので、`blockquote` 要素の `::before` 疑似要素に対して、下記のように `quotes` プロパティを使ってダブルクオーテーションを表示するよう定義すると良いでしょう。
+
+```css
+blockquote::before {
+ quotes: "“""”";
+}
+```
+
+上記のスタイルを適用すると、`blockquote` 要素内で引用符が正しい位置に表示されます。
+
+
+
+大河くるみ自身は英語が苦手と原作小説で書かれていますが、`html` 要素の `lang` 属性が `en` などでないと `blockquote` 要素内の表示がデフォルトの状態だとおかしくなるのは皮肉と言えそうです。
diff --git a/vivliostyle.config.js b/vivliostyle.config.js
index f65c375..f3dc825 100644
--- a/vivliostyle.config.js
+++ b/vivliostyle.config.js
@@ -14,15 +14,19 @@ module.exports = {
title: TITLE,
author: 'kubosho',
language: 'ja',
- size: 'JIS-B5',
- theme: '@o2project/vivliostyle-theme-o2project',
+ size: 'JIS-A5',
+ theme: './node_modules/@o2project/vivliostyle-theme-o2project/lib/print.css',
entry: [
'./entries/prologue.md',
'./entries/south.md',
'./entries/west.md',
'./entries/east.md',
'./entries/north.md',
- './entries/colophon.md',
+ {
+ path: './entries/colophon.md',
+ title: '奥付',
+ theme: './node_modules/@o2project/vivliostyle-theme-o2project/lib/book_information.css',
+ },
],
output: [pdfConfig, webpubConfig],
workspaceDir: '.temp',