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ラベル、カード...続きを読む
入門編では、リスト番号を自動で付ける方法を紹介しました。 今回はさらに一歩進んで、段落番号や図表番号を自動付与する実用テクニックを解説します。 マニュアル記事やレポート風コンテンツだけでなく、We...続きを読む
【CSS】CSSカウンター入門｜番号を自動で付与する基本と活用例
CSSカウンターとは？初心者でもできる番号自動付与の基本 Webサイトを作っていると、リストや段落に番号を振りたい場面が多々あります。 HTMLの<ol>タグを使えば自動的に番号が付与され...続きを読む