docs(entries/south): sakuraを紹介する章を書いた

Author: kubosho

entries/images/south/form.png

@@ -1 +1,77 @@
 # 南の星 ～sakura～
+
+[GitHubのリポジトリ](https://github.com/oxalorg/sakura)
+
+sakuraは90年代のような見栄えの悪いWebサイトを、sakuraが提供するCSSを読み込むだけででモダンなWebサイトにするライブラリと説明されています。
+
+## 特徴
+
+sakuraのREADMEに書かれている特徴としては次の通りです。
+
+- Sassによる独自のテーマ作成
+- ダークモード用のCSSを読み込むことでダークモードに対応
+
+今回紹介するライブラリとの比較では、下記の特徴もあります。
+
+- Webページを作る上でよく使われるHTMLの要素に、スタイル定義が限定されている
+- body要素の `max-width` 値として唯一 `em` 単位が使われている
+- body要素の `background-color` 値として唯一 `#ffffff` ではなく `#f9f9f9` と定義されている
+- テーブルに関する要素に対して `background-color` が定義されていない
+- new.cssと同じく全てのスタイル定義が1つのファイルに書かれている
+- Almond.cssと同じくSassが使われている
+
+それぞれの特徴について詳しく見ていきます。
+
+### 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` が定義されていません。これによりテーブル内のどの列も目立つことなく、同じように表示されます。
+
+ただしtd要素とth要素に対して設定されているborder-colorのコントラストが背景色と比較すると低いため、環境によってはセル間の区切りが見づらくなります。
+
+### Webページを作る上でよく使われるHTMLの要素に、スタイル定義が限定されている
+
+sakuraは今回紹介するクラスレスCSSライブラリと比較して、CSS内で定義されているHTML要素の定義が少ないです。
+
+new.cssも同じくHTML要素に対するスタイル定義が少ないです。ただnew.cssとsakuraを比較した場合も、new.cssは56個の要素に対してスタイルが適用されているのに対して、sakuraは33個の要素にしかスタイルが適用されていません。
+
+またメディアクエリー・属性セレクタ・擬似クラス・疑似要素・子結合子・子孫結合子などの定義も少ないため、minifyされたCSSを展開した場合、new.cssと比較して約90行分コード量が少ないです。
+
+### Almond.cssと同じくSassが使われている
+
+sakuraではAlmond.cssと同じくSassが使われています。
+
+ただしそれぞれのライブラリでSassの用途は異なります。Almond.cssではスタイル定義を個々のファイルに分割するためSassが使われていますが、sakuraではスタイルのカスタマイズ目的でSassが使われています。
+
+### new.cssと同じく全てのスタイル定義が1つのファイルに書かれている
+
+sakuraではスタイルのカスタマイズ用にSassが使われていますが、適用するスタイルの定義は1つのファイルにまとまっています。
+
+スタイル定義が少ないため、1つのファイルにまとまっていたほうが元のソースコードが読みやすいと判断して、1つのファイルにまとめたのだと思います。
+
+## 気になる点
+
+他のライブラリと比較した際に、label要素に `display: block;` が定義されているのは気になります。
+
+この影響でinput要素とlabel要素を横並びに表示することができません。今回用意したサンプルのHTMLだと、ラジオボタンの横並びおよび、チェックボックスとリンクを含むラベルの横並び表示ができませんでした。
+
+![フォーム内の要素が横並びできていない](./images/south/form.png)
+
+またol要素はsakura独自のスタイル定義がなく、ブラウザー既定のCSSが適用されているため、ul要素と並びたときにul要素の先頭の記号とol要素の先頭の数字がきちんと横に揃いません。
+
+![リスト要素の先頭が横に揃わない](./images/south/ol_li.png)