Tachyonsはじめました

このブログを開設するにあたりHugoというSSGを使用した。タグやカテゴリーを記事一覧の右側につけるにあたって、CSSの調整に苦労したので、調べたことをまとめておく。

Tachyonsについて

このブログで使っているHugoのthemeがanankeで、 anankeで使われているのがTachyons。これが私とTachyonsの出会い。

CSSフレームワークといえば、Bootstrap、Tailwind CSSなどが思い浮かぶが、Tachyonsも軽量で高速であるという強みから、ReactやVue.jsなどと組み合わせて使われているよう。小規模な開発に向いている。

記法については公式ドキュメントがわかりやすい https://tachyons.io/docs/

他のフレームワークと比べてみる

1. テキストのサイズ指定

<!-- Tachyons -->
<p class="f4">テキスト</p>

<!-- Tailwind -->
<p class="text-lg">テキスト</p>

<!-- Bootstrap -->
<p class="fs-4">テキスト</p>

2. マージン・パディング

<!-- Tachyons -->
<div class="pa3 ma2">内容</div>

<!-- Tailwind -->
<div class="p-3 m-2">内容</div>

<!-- Bootstrap -->
<div class="p-3 m-2">内容</div>

苦労したところ

　状況としては、ディスプレイいっぱいに表示したときに、paddingがおかしくなってしまった。原因は、anankeのCSSにph0-lと指定されていたこと。CSSをオーバーライドして指定したつもりが、うまくできなかった。

対応としては、forkして、ananke自体のCSSを修正した。ちょっとその場しのぎかもしれない。

今後もこのBlogをカスタマイズしながらCSS勉強したい。 そしたらCSS組版も、もっとうまくできるかも。

• Hugo
• Tachyons
• CSS