フリーターからプログラマになったオヤジの備忘録

フリーターからフリーランスになった就職経験なしの オヤジ が物忘れと戦うブログ

2022-01-01から1年間の記事一覧

Tailwind CSSで織りなすテキストの横にラインが引かれる世界

こんな感じでテキストの横にラインが幅いっぱい引かれるパターン <div className='flex items-center space-x-1'> <span className="text-gray-500">タグ</span> <div className="flex-1 border-b border-gray-500"></div> </div> 地方・田舎に住む男性と地方・田舎へ嫁ぎたい・移住したい女性専門の結婚相談所・お見合い・婚活サービスは【田舎婚】 【ヲタ婚】

Tailwind CSSで織りなすアニメーション アイコンをクリックするとニョキッと広がる世界

こんな感じでクリックするとアイコンが広がりボタンになるアニメーション 1度目のクリックでボタンになり、2度目のクリックで処理が実行されるので、確認ダイアログよりスマートな操作となる。

Tailwind CSSで織りなすInput内に右寄せのボタンがある世界

一緒にアニメ・ゲームを楽しめるパートナーを探すなら【ヲタ婚】 1年以内の成婚率41.3%! 平均6.6ヶ月で婚約できるスマホの結婚相談所【naco-do】 選ばれて10年。エンジニアの気持ちが分かる転職エージェントは【アイムファクトリー】 こんなやつ ソース ※Re…

Tailwind CSSで織りなすh-screenに邪魔されずに画面中央にしたい世界線

Tailwindで画面中央に配置したい場合 h-screen w-screen flex justify-center items-center を使うことが多いと思いますが、親要素ですでにh-screenを指定していると場合によって画面以上になってしまいます。 そんな場合は absolute inset-0 flex items-cen…

Tailwind CSSで織りなす左寄せ戻るボタンが邪魔しない中央揃えの世界

このように左端に戻るボタンがあっても、タイトルをセンターに表示したいときは下記でOK 戻るbuttonタグにabsoluteを付ける タイトルのh1タグの幅をw-fullにする 【ヲタ婚】 1年以内の成婚率41.3%! 平均6.6ヶ月で婚約できるスマホの結婚相談所【naco-do】 <div className="flex top-0 sticky text-white"> </div>