Tailwind CSS

前回（#54）に続いて、テスタを待つあいだの直しです。今回は、自分の iPhone で使って気になった、見た目の小さなところばかりです。 引っぱると、フッターの下に別の色が見える 料理の食材を選ぶ欄で、食材を先に出す スマホでは、札を出さな …

前回（#30）までで、公開に向けた大きな機能がそろいました。使っていると、小さな気になる点が出てきます。 今回は、その小さな直しの話です。 気づいた点を、1つの Issue にためる（#143・#154） ヘッダーに、ログインしている人の表 …

前回（#23）で一覧のカードを整えたので、今回は画面の「枠」のほうを直します。 ヘッダーのメニューに、アイコンを付ける（#118） 全部の画面に、共通のフッターを出す（#119） 編集画面の一番下に、「一覧へ戻る」リンクをそろえ …

前回（#22）に続いて、見た目の手直しです。今回は、#20で作ったカード表示を直します（#110・#112）。 前回は「サンプル画像を見て決めれば、あとからの直しが出ない」という話でした。今回は、サンプルを見て決めても、使ってみたら直したく …

ギアにも（#12）、キャンプにも（#15）画像を付けられるようにしましたが、一覧は文字のリストのままでした。画像は、編集画面やキャンプの画面を開かないと見られません。 今回は、一覧をカード表示に切り替えられるようにします。ギアの一 …

前回（#13）のおすすめ度までで、ギアに載せる情報はひととおりそろいました。今回は、それを一覧でどう見せるかの改善です。 メーカー名とコンテナ名を、文字ではなくバッジで出す 「欲しい」「廃棄済」のギアも、タブで切り替えて見られるようにする …

前回（#10）でMVPを振り返り、次にやることの1つに「UIの見直し」を挙げました。 今回は、その最初の一歩として、画面の土台を作り直しました。 これまでの画面は、機能を確かめるための最低限の見た目で、ペー …

技術スタックの記事で、画面のスタイルは「Tailwind CSS v4 を基本に、色・フォント・角丸などをサービスごとに @theme で定義する」と決めました。 ただ、それだけでは、実際に画面を作るときにどこに何を書くかが決まっていません …

家計簿アプリ作成シリーズの第33回です。スマートフォンでも使いやすいようにレスポンシブ対応を行います。

家計簿アプリ作成シリーズの第31回です。flowbite-svelte の DarkMode コンポーネントを使ってダークモードの切り替え機能を実装します。