CSS– tag –
-
hoverすると下線が引かれるアニメーションを作ろう
Tailwindcss では class に 「underline」 と書くだけで下線を引いてもらえる便利な機能がある。 けれども、パッと瞬間的に下線が引かれる。 それは当たり前だろと思われるかもしれないけれど、これもアニメーションで 左から右へ下線を引くことが出来ない... -
MVCを扱う上での備忘録
フレームワーク無しでPHPでウェブアプリを書いているけれど、どうしても忘れてしまって、 HTTP 500エラーが出てあたふたすることが多いんだよね。 なので、MVCの基本中の基本を備忘録として書き記しておきます。 フレームワークを使っている人でも参考にな... -
CSSで文字に縁取りを付けよう
文字がライトテーマだとはっきり見えても、ダークテーマにすると見えにくくなる あるいはその逆の場合もあったり、どうすればはっきり見やすくなるのか・・・ ライトテーマとダークテーマで文字色を切り替えればいいのかもしれないけれど、文字色は変えた... -
Tailwindcssのポップオーバーのテキスト表示について
Tailwindcssのポップオーバーを弄っているとあることに気が付いた。 HTML<?php $sentence = 'ある日のこと'.PHP_EOL.'本日は天気も良く、絶好のお散歩日和だと私は考えます。'.PHP_EOL.'ですが、ペットを置き去りにして1人で外出するのも気が引けてしま... -
Tailwindcssでダークモードを動的に適用したい
Tailwindcssにはダークモードが搭載されています。 筆者もダークモード愛用者なので、これは嬉しいところ。 HTML<html class="dark"> ... </html<html class="dark"> ... </html 上記のように、HTMLの先頭のクラスに dark を指定... -
送信ボタンに付けるSVG画像と格闘した
お問い合わせフォームの送信ボタンを押した後、数秒間delayがあることに気が付いたので、 二重クリック防止＋今は送信処理中ですよーということをアイコンを使ってアニメーションで表現することにしました。 とりあえず<img>として画像表示＋Tailwin... -
Tailwindcssの差分が更新されない時の対策
順調にTailwindcssを使っていたある日・・・。 とあるクラスをあててもスタイルが表示されていない。。。 それは「border-l-4」と「border-teal-300」。 「border-l-2」はスタイルがあたるのに、どうしてなのかさっぱりわからない。 そんな時に調べてまと... -
PHP＋MySQL+TailwindcssV4.1でサイトを作ろうと思った
前職でPHPの経験があったので、リハビリ代わりにPHPを使ったサイトを作ることにした。 とりあえず、XAMMPで開発するので、DBはMySQL CSSフレームワークは前職で触っていたBootstrapを使おうかな？と思ったけれど、 調べると、独学してた時に使っていたNuxt...
1