HTML/CSSを学ぶ Tailwind CSS v4でリセットCSS部分を読み込ませない方法
こんにちは。 Tailwind CSSにはデフォルトでリセットCSSが組み込まれています。Preflightと呼ばれるもので、modern-normalizeをベースに制作されているようです。ですが、他のリセットCSSを使ってるなど場合によ...
HTML/CSSを学ぶ
HTML/CSSを学ぶ HTML/CSSを学ぶ Tailwind CSSが効かない理由を暴く【カスケードレイヤー】
こんにちは。特にLPのコーディング時に多いのですが、「だいたい見た目は一緒だけど一部だけ違う」要素って時々ありますよね。こういう時に通常のCSSに加えてTailwind CSSでその差分を指定する使い方をよくします。<head> <link...
HTML/CSSを学ぶ Tailwind CSS 4系の導入・設定ガイド【3系からの変更点も解説】
Tailwind CSS 4系の導入・設定方法を初心者向けに徹底解説。3系との違いや変更点を分かりやすくまとめました。導入手順を確認して快適な開発環境を整えましょう。
HTML/CSSを学ぶ 【コピペ可】HTMLの電話番号バリデーションを徹底的に考える【正規表現&JavaScript】
日本の電話番号バリデーションをHTMLとJavaScriptで正しく実装する方法を徹底解説。libphonenumberや正規表現コードも掲載。コピペもOK。
HTML/CSSを学ぶ input type=”number”で数字以外が入力できる理由と解決策を徹底解説
input type="number"でも数字以外が入力される？本記事ではその理由と仕様、正しい使い方、回避策まで丁寧に解説します。
HTML/CSSを学ぶ 【SSGの仕組み】Next.jsやGatsby.jsなどでSSGするとなぜ爆速になるのか
SSGで爆速になる理由を、Next.jsやGatsby.jsを例にわかりやすく解説。prefetchの仕組みと活用法も紹介します。
HTML/CSSを学ぶ 中央揃えにleft: 50%; transform: translateX(-50%);などという馬鹿げた記述をするな
こんにちは。今回はよく紹介される中央揃えテクニックについて思うところがあったので、最新の中央揃えを解説します。よく紹介される、position: absolute;にしてleft: 50%; transform: translateX(-5...
HTML/CSSを学ぶ 【コピペ可】文字数制限のかかったいい感じのtextareaを作る方法
こんにちは。今回はtextareaタグをいい感じにする方法を紹介します。作るものの確認文字数制限 ＋ それが分かりやすいように右下に表示をします。制限文字数を超えると赤くなってユーザーが気づきやすくしています。 const textarea...
HTML/CSSを学ぶ 【position: absoluteなし】一見重なっている要素を重ねずにlinear-gradientで解決する
こんにちは。今回は、デザイン上の見た目は要素が重なっているように見える要素をスマートに実装する方法を解説したいと思います。重なっているデザインといえばposition: absolute;を使った実装法がまず思いつくと思いますが、posit...
HTML/CSSを学ぶ CSSの単位、vwはいつ使うべきか【おすすめの使い方を紹介】
cm、mm、Q、in、pc、pt、ex、ch…と実は20以上の単位がCSSには存在します。といってもpxと％が使えれば概ね問題はありません。しかし、時々pxと%以外の単位を知っているとコーディング時にお得な時があります。今回はその中のvwに...