見出し画像

技術書典でトラペジウムとクラスレスCSSを組み合わせた技術同人誌を頒布した

kubosho

mhidakaが2つ目を建立した Advent Calendar 2024の19日目です。

技術書典17で技術書典2以来にサークル出展をしたのですが、その時の制作話を書きます。

頒布した本

trapezium.css というタイトルの技術同人誌です。

小説・映画・漫画（予定）と各種メディアミックスをしているトラペジウムと、一切のクラスセレクターやIDセレクターを使わずにスタイルを適用していく「クラスレスCSS」を組み合わせた本となっています。

自分で書いていてもなぜこの組み合わせにしたのか意味が分かりません。

背景


私が主催しているサークル「O2 Project」は「イベントに申し込む時点で、自分の脳を灼きつくしているアニメやゲームと、ソフトウェア関連の技術を組み合わせた同人誌を作る」という謎の縛りをしています。これまで作った同人誌を並べると下記の通りです。

  • Steins;Git（ならびにSteins;Git 0、Steins;Git REBUILD）

  • サイト制作のSTART:DASH!!

  • Reset CSSフレンズ

なんとなく元ネタを察してもらいつつ、今までの本は組み合わせる作品とソフトウェア関連の技術が、まだ親和性のある内容になってそうな気がします（本当か？）。

ただ今回は自分で言うのもなんですが、謎の組み合わせと言わざるを得ません。

ですが、今年はトラペジウムに脳を灼きつくされてしまいました。なので、この脳を灼きつくした作品である「トラペジウム」を題材に技術同人誌をどうしても書きたくてしかたなかったので、無理やりな組み合わせなことは承知しつつも書ききりました。

なおトラペジウムに関しては、技術が絡まない作品（二次創作小説）を初めて書いた上に、1作品に収まらず2作品書いていました。

そのうちの1作品は、冬コミで頒布されるアンソロジーに寄稿したもので、下記の通りメロンブックスでも予約できるのでぜひチェックしてください（PR）。

trapezium.cssというライブラリ作成の思いつきと作成の断念


話を戻しましょう。はじめは下記の通りtrapezium.cssというクラスレスCSSを作ろうとしていました。多分この時は東西南北（劇中に出てくるアイドルグループ）のイメージカラーを配色に使ったクラスレスCSSライブラリを作った上で、自分の技術系のことを書くブログに適用したいと考えていた気がします。

技術書典に申し込んだ時点では、クラスレスCSSとはなんぞや？的な話から展開して、自作のtrapezium.cssについて特徴を書いていく予定でした。

ですが、忙しくてtrapezium.cssを作る余裕がなく、やむなくクラスレスCSSのライブラリを紹介する同人誌にしました。

紹介予定だったライブラリと、実際に紹介したライブラリ

クラスレスCSSとはなんぞや？という話から、自作ライブラリを元にクラスレスCSSについて解説する内容にするつもりが、すでにあるクラスレスCSSのライブラリを紹介する本へと内容を変更するにあたって、どういったライブラリを紹介するのか決める必要がありました。

せっかくならトラペジウム、特に東西南北の各メンバーに関連してそうなライブラリについて紹介したいと考え、見栄えや更新頻度も踏まえつつ、下記のライブラリを紹介しようと考えていました。

  • 東ゆう：tacit
    クラスレスCSSの源流といっても過言ではないライブラリで、東ゆうが打算込みとはいえ関係構築とアイドルデビューの流れを作ったところから連想

  • 大河くるみ：pico
    東西南北内では1番背が小さいことと、単位の「ピコ」と紐づき、なんか「ピコ」という響きもかわいいしピッタリなのでは？と思ったところから連想。

  • 華鳥蘭子：sakura
    イメージカラーと、桜の花言葉「高潔」「優美」といったところが華鳥蘭子の外見や内面に合致していそうなところから連想

  • 亀井美嘉：simple.css
    原作小説で亀井美嘉の印象として「特にクセのない、万人受けする顔をしている気がする」と書かれている点と、simple.cssの万人受けしそうな見た目から連想

さて私の作ったサンプルのHTMLでは、Landmark Regions | APG | WAI | W3CやAside should not be contained in another landmark | Axe Rules | Deque University | Deque Systemsに沿って、他のランドマークロールにaside要素を含まない形式でHTMLを書いていました。

ですが、この形式のHTMLだとaside要素に対して良い感じの見た目が適用されないクラスレスCSSライブラリが多く、前述した紹介予定のライブラリのうち、sakura以外は紹介しづらい状態になりました。

そのため紹介するライブラリを変更しました。再選定したライブラリは下記の通りです。

  • 東ゆう：Water.css
    原作小説で「外来語をカタカナで表記するのは構わないが、その際適切な変換をしてもらいたかったものだ。（中略）ウォーターはワラー（後略）」と書かれている点から連想

  • 大河くるみ：Almond.css
    名前の「くるみ」はナッツ類なので、同じナッツ類のアーモンドを冠するライブラリを紹介した

  • 華鳥蘭子：sakura
    変更なし

  • 亀井美嘉：new.css
    亀井美嘉の設定で、小学生時代にいじめを受け、その影響で中学受験をして顔も変えて全部新しくしたという設定がある点から連想

ただこうやって見ると、大河くるみの関連付けがあまりにも苦しいですね……

あと数年更新されていないWater.cssとnew.cssを紹介することになってしまいました。ただクラスレスCSSという特性上、HTML要素が劇的に増えることはそう無いはずなので、更新していないライブラリが紛れていても、数年はクラスレスCSSを知るための参考資料として使えるはずと考えました。

ただこの記事を書くにあたって、あらためて仕様を調べたら、HTML Accessibility API Mappings 1.0の2024年12月11日の仕様では、aside要素がbody要素またはmain要素直下にある場合とaside要素にアクセシブルな名前が付いている場合は complementaryロールになるが、セクショニングコンテンツ（article、aside、nav、section）内でaside要素を使う場合はgenericロールになることが書かれていました。

ちなみに「アクセシブルな名前」というのは下記の通りだと考えています。

If an area begins with a heading element (e.g. h1-h6) it can be used as the label for the area using the aria-labelledby attribute.

If an area requires a label and does not have a heading element, provide a label using the aria-label attribute.

Landmark Regions | APG | WAI | W3C

この仕様について、当初は各主要ブラウザーで仕様変更に対して実装が追いついていなかったようですが、現時点の最新安定版では仕様通りの実装になっていました。

この事実をもっと早く知っていれば、当初予定していたライブラリを紹介できたのにな……と今さらながら悔やみました。

久しぶりに技術同人誌を書いて頒布した感想

技術同人誌を書いて頒布したのは2019年の冬コミ以来で、某パンデミックが発生してから一定の収束を見せるまでの期間は、会社の同僚と出した本の組版と寄稿しかやっていませんでした。

また今まで自分のサークルから出した同人誌では、イラストや表紙作成といった点で知り合いを巻きこんでいましたが、今回は本当にすべて1人でやりきりました。

なので、自分のサークルで頒布する同人誌に限っても、ブランクがあったことで思った通りにいかないことが多かったです。

これに合わせて、トラペジウムの亀井美嘉に焦点を合わせたアンソロジー同人誌にもWordを2段組みにした状態で4ページのSSを寄稿していましたが、同人誌の入稿締め切りと寄稿の本締め切りがほぼ同じタイミングだったのが本当に大変でした。最後はいろいろ犠牲にしつつ気合いで乗り切りました。

今回書いたtrapezium.cssという同人誌についても、トラペジウムとクラスレスCSSという謎の組み合わせをした関係上、トラペジウムとクラスレスCSSどちらも分かるという人が本当に少ないということを、技術書典のオフライン会場で知りました。自分の気持ちとしては「こんなすてきな同人誌ないよ！」という思いだったのですが……

ということで、急遽2つのテーマについて説明する紙を用意しました。この紙を用意してから少しだけ頒布数が伸びた気がします。


まとめ

トラペジウムの円盤発売は本来2024年12月25日だったのですが、2025年2月26日へ延期されてしまいました。
『トラペジウム』Blu-ray&DVD 発売延期のお知らせ - News | 映画『トラペジウム』公式サイト

ただそれまでに日本国内では、川崎のチネチッタで2025年1月1日に上映されるのと、秋葉原のUDXシアターで2025年1月12日に上映されます。

なので、この機会にトラペジウムをまだ観ていない人は観てみましょう。原作小説や映画ノベライズもありますが、そういったものを何も見ないでまず劇場版のアニメを見てみて、どういう感想になるかが楽しみです。

そして私は、trapezium.css（クラスレスCSSライブラリ）の作成や、いくつか構想があるトラペジウム二次創作SSの執筆はやりたくて、そういった作ったものを星空交差点というトラペジウムオンリーイベントで、trapezium.css（技術同人誌）の追加要素として頒布できたらいいな……と考えています。

おまけ

表紙のグラデーションは東西南北のイメージカラーをもとにIllustratorのフリーグラーデション機能を使って作りましたが、フリーグラーデションのカラー分岐点を線でつなぐと不等辺四角形になるのは地味にこだわった点です。


青・赤・緑・黄の色の分岐点を線でつなぐと不等辺四角形（トラペジウム）になる