ブログ

Tailwind CSSで引数のあるMixinのような仕組みを作る方法（改）

以前、「Tailwind CSSで引数のあるMixinのような仕組みを作る方法」というブログを書いた。しかしその後、調査を重ねていくうちに、以前書いたのとは別のアプローチの方が望ましいと考えるようになったため、改めて書き直すことにした。

タイプスケールがハマらないとはどういうことか

先日、頼まれて知人のサイトを作った。載せられるコンテンツはほとんどないものの、会社っぽい体裁にはしたいとのことだ。そんなわけで、要素はほとんどないなりに、多少なりとも見栄えがするようにデザインしてみた。要するに、このサイトみたいな極端な作りにはしなかったってこと。

CSSファイルに記述されたクラスをTailwind CSS IntelliSenseで検出できるようにする

VS Codeの拡張機能であるTailwind CSS IntelliSenseを使用する際には、通常、CSSファイルに記述されたクラスは補完されない。というのも、Tailwind CSS IntelliSenseでは、Tailwind CSSの設定ファイル（tailwind.config.js）を基にしてCSSを算出しており、設定ファイルを介さずに実装されたCSSは無視されるからだ。

ReactコンポーネントでレンダリングされるHTML要素の種類を変更可能にするためのパターン

ReactのUIコンポーネントライブラリを使っていると、あるコンポーネントによってレンダリングされるHTML要素の種類を変更したくなる場面がある。たとえば、通常はbutton要素としてレンダリングされるButtonコンポーネントを使うときに、代わりにa要素を使ってレンダリングしたいというケース。

ウルトラブースト日記

僕は右利きだが、スマホはいつも左手で使う。だから、スマホに入ったPASMOを改札機にタッチするときは毎回フラストレーションを覚える。

ブロックエディタ用のCSSを参考にした、よりよいコンテナの実装

以前、「本文エリア内の要素をpaddingのないコンテナとして実装する」という記事を書いた。本文エリア内の要素をすべて同じ幅でレイアウトするのではなく、ものによっては少し広めにしたりページの最大幅まで広げたりしたいという場合に、どのように実装すべきかという話。

マークアップのわかり方

この記事は、2022年10月28日に開催されたDIST.37「マークアップな夜」での発表「マークアップのわかり方」をもとにしたものです。当日は話せなかった内容も大幅に追加しています。

横並びになったボタンを同じ幅で配置するCSS

複数のボタンを横並びにしつつ、それぞれのボタンが同じ幅になるように合わせたいということがある。ボタンに同じwidthを指定すれば合わせられるが、するとラベルの長さに応じた幅にできなくなる。

プロフィール画像を作り直した

僕のプロフィール画像、通称ギザギザを新しく作り直した。SVG化したいなと長らく思っていたけど、そのまま機械的に変換するのもつまらないし、せっかくなのでとマイナーチェンジを施した。

宣言的デザイン（翻訳）

この記事は、Jeremy Keith氏による「Declarative design」の日本語訳です。掲載に当たって著者の許諾を得ています。

Re: #deisui_html_radio #52

これについて超絶走り書きで簡単に返すのでお許しください。

yuheiy.com-v6

このウェブサイトをリニューアルした。これまでも何度かリニューアルを重ねてきており、今回でバージョン6ということになる。サイトとしては今年で7年目。

僕と梅、男梅シート

昔から梅が好きでよく食べる。実家にいたころは、口寂しくなるたびに冷蔵庫を開け、おやつ感覚で梅干しを食べては、塩分の摂りすぎだからやめろと母親に言われていた。ご飯を食べるときにもよく梅干しをおかずにしていた。

文の途中でも流れを読み誤られないように作文することを心がけている

日本語の文では、文末に到達するまで話の方向性が読み切れないことがある。文を読むときに、途中まで読んだところで「あー、はいはい」となっていても、最後まで読み進めると「あれ、そういう話？」という感じになり、流れを読み誤っていたことに後で気づく。人がしゃべるのを聞いているときにはより顕著になる。しゃべる速度は読む速度よりも遅いので、どうしても焦ったくなってしまうものだ。

これはこれで逆に広げられない話は書けないみたいな縛りになっている

いつからかそういう癖がつき始めた。なんでもかんでもを「そのまま」書くわけにはいかないからという意識からなんだけど。散歩してるとかシャワーを浴びてるときみたいに、頭が暇な時間がありすぎると、考えがそっちの方向に進みすぎて、ざっと記事化するには手に負えない感じになってしまうことがある。ちょうどいい抽象度で書きたいことをドンピシャで書けるようなタイミングもあるんだけど、そういうときって今みたいな「まだそのときじゃない」と見送ってきたピースがちょうど繋がったときでもあるかもしれないな、ということに、今まで書いていて気づいた。しかしそれを感じるタイミングは割と頻繁にあって、「このタイミングは本当にマジのやつか？」があまりわからない。いやあるいは、あるテーマを考え終えるとき、別のテーマに頭が移っていく前のタイミングというのが、自分の中で一番満足するまで考え切ったタイミングだ、と言えるだろうか。それがマジのやつだろうか。

田舎に回帰したい

いま住んでる部屋が結構ボロいので、いろいろ不満があって、引っ越したいなあと思いつつも、めんどくさくてずっとほったらかしていたけど、そろそろ本当にどうにかしたいと思って引っ越し先を考え始めた。

『Every Layout——モジュラーなレスポンシブデザインを実現するCSS設計論』、素直さという選択 #everylayout_ja

友人の腹筋ローラーの力を信じろさんと共に監訳を担当した書籍『Every Layout——モジュラーなレスポンシブデザインを実現するCSS設計論』が出版されます。現在、Amazonで予約受付中です。当初の予定よりもかなり遅れてしまいましたが、内容はいまだ鮮やかなままに思えます。

リハビリ

ブログを書くのはおよそ8ヶ月ぶりになる。僕にとっては、それなりに長らく書かなかったことになる。

ぜんぶかきなおす

丸2日くらいかけて、このサイトのHTML/CSSやサイト生成の仕組みを全部書き直した。わかりやすい変化としては、以前のバージョンではフォントサイズとか余白とかがビューポートのサイズに関わらずつねに一定だったところが、今のバージョンではビューポート幅にもとづいたファクターに応じてすべてのフォントサイズが変化するようになっている。

歩行とか

「歩行 Advent Calendar 2020」を作ったけど、25日中15日しか歩行できなかった。作った当初は本当に25日分全部埋める気でいたけど、実際のところ3日目でいきなり穴を開けてしまっているし、この60%という微妙な達成度が僕の緊張感のなさを絶妙に体現しているようで、なるべくしてなった気がした。

ブログ投稿のハードルと雑さについて

個人的な話、Twitterにいろいろと長文も書いたりするようになってからブログをあまり書かなくなった。タイムラインのツイートはすぐに流れていく分、今パッと思いついた話とか、まだ十分整理されてないようなテキストを出しやすい。