Bootstrap5実装環境でmt-5を足しても余白が変わらない原因
Bootstrap 5 の実装環境でmt-5を足したのに、「あれ？ 余白、変わってない？」と首をかしげたことはありませんか？ 講座やレビューの場でも、この違和感は本当によく出てきます。コードは正しそうに見えるし、Bootstrap...続きを読む
生成AIを使ったHTML/CSSコーディングが当たり前になり、 「コードを書くスピード」そのものは、以前よりも確実に上がりました。 一方で、こんな感覚はありませんか？ ・その場では便利だったはずのC...続きを読む
ChatGPTにCSSを書かせる前に、人が決めておくべきこと
ChatGPTにCSSを書かせると、 見た目としてはそれなりに整ったコードが、すぐに出てきます。 「とりあえず動く」「デザイン要件は満たしている」 ここまでは、特に問題を感じないかもしれません。 ただ...続きを読む
生成AIでHTML/CSS構築するなら「先に設計→後でAI」が安全な理由
ここまでの記事で、 AIが書いたHTMLが読みにくくなる理由や、 AI生成CSSが後から直しづらくなる構造、 Bootstrap・Flexbox・CSS Gridが混ざったときの違和感について整理してきました。 ...続きを読む
Bootstrapを使って実務を回してきた人ほど、 モダンCSSに触れたときに、少し戸惑う瞬間はありませんか？ CSS Gridも分かる。 Flexboxも理解している。 Tailwindの考え方も、理屈とし...続きを読む
Bootstrapのグリッドレイアウトを生成AIで書き直すべきか？
近年のフロントエンド開発では、 CSS Gridを前提にレイアウトを考えるケースが増えています。 CSS Gridは、2017年前後に主要モダンブラウザで本格対応が揃い、 現在ではIEを考慮しないプロジェクトで...続きを読む
Bootstrapは今も使える？Tailwind・生成AI時代に考える実務での役割
今回は、Bootstrapはもう古いのか？生成AI時代の実務から再評価してみようと思います。 「今はTailwind CSSや独自CSSの時代だ」 「Bootstrapはもう役割を終えた」 こうした言葉を、...続きを読む
AIが書いたCSSは正しいのか？「動くけど、後から直せなくなる」コードの正体
AIが書いたCSSは正しいのか、それとも「後から直せなくなる設計」なのか？ 今見ているそのCSS、表示は問題ない。 デザインも要件どおりで、とりあえず見た目も問題ない。 それなのに、少し修正しようとした瞬間...続きを読む
ChatGPTで生成するHTMLはなぜ実務で扱いづらいのか ─ HTML / CSS / Bootstrap視点で考える
ChatGPTで生成したHTMLは正しいのか、それとも“たまたま動いているだけ”なのか？ ChatGPTで生成したHTML、表示は崩れていない。エラーも出ていない。 それなのに、いまいち腑に落ちない。コードを読むのに時間...続きを読む
CSSカウンターで作る番号デザイン集｜丸数字・ローマ数字・英字・STEPラベルの実装例
CSSカウンターで番号をデザインする CSSカウンターは、番号を自動で付与するだけでなく、その番号を「デザイン要素」として活用できる便利な仕組みです。 丸数字、ローマ数字、英字形式、STEPラベル、カード...続きを読む