Tailwindcss– tag –
-
PHPで下線を引く位置を動的に変更しよう
四字熟語の意味問題は、傍線部の読みを答えさせる問題です。 これが、前半2文字だったり後半2文字だったりするので、こちらも語群に含めなければなりません。 今回は傍線（縦棒）ではなく、下線（横棒）として下記のように表示させます。 See the Pen Unde... -
Tailwind CSS でhover下線をアニメーション化する方法
Tailwindcss では class に 「underline」 と書くだけで下線を引いてもらえる便利な機能があります。 けれども、 hover:underline だとパッと瞬間的に下線が引かれてしまい、視覚的に物足りないように思います。 下からスッと線が伸びるようなアニメーショ... -
Tailwindcssでtransitionのアニメーションが動かない問題
Tailwindcssで、棒状にアニメーションを入れてみました。 棒状の図は出てきたのですが、アニメーションが動きません。 なぜアニメーションが動かないのか調査した備忘録です。 Tailwindcssで書いた元々のコード まず動かなかったコードを公開します。 HTML... -
Tailwindcssでテキストボックスのフォーカスが当たった時に枠線の色を変える方法
テキストボックスにフォーカスが当たった時、黒く太い枠線が表示されます。 サイトによってはテーマカラーに応じて好きな色に変えたい時もありますよね。 なので、Tailwindcssを使ってフォーカスが当たった時にだけ枠線の色を変えようと思います。 ↓の pas... -
PHPでログイン画面を作ろう
問題のデータを入れるために管理画面が必要になりました。 ただ、その管理画面は筆者以外には触らせるわけにはいけません。 その管理画面が出来上がるまでの過程を、ここに書き記しておきます。 ログイン情報ファイルを作ろう 今回は、Basic認証ではなく、... -
Tailwindcssでダークモードを動的に適用する方法
Tailwindcssにはダークモードが搭載されています。 筆者もダークモード愛用者なので、これは嬉しいところ。 HTML<html class="dark"> ... </html<html class="dark"> ... </html 上記のように、HTMLの先頭のクラスに dark を指定... -
Tailwind CSSでフッターの境界線をおしゃれに見せる方法｜box-shadow活用例
ポートフォリオサイトを制作しているとき、「フッターとコンテンツの境界線をどう見せるか」で悩みました。 単純にborderを使う方法もありますが、どうしても線の印象が単調でお粗末な印象を受けてしまいがちです。 そこで今回は、Tailwind CSS のbox-shad...
1