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>タグを使えば自動的に番号が付与され...続きを読む
【CSS】JavaScript不要！CSSだけで実装トグル式アコーディオンの作り方
WEBサイトで「アコーディオン」といえば、クリックするとパネルが開閉するUIの定番パターンですね。 多くの場合、JavaScriptと組み合わせて実装することがほとんどだと思います。 でも、CSSだけでもシンプルなアコーディオンを実装で...続きを読む
【CSS】linear-gradient（グラデーション）を使ったボタン作成
CSSのlinear-gradient()関数を用いることで画像を使わずとも、グラデーション色のボタンを作成することができます。 ※矢印は、「Font Awesome」、文字はGoogle Fontsの「M PLUS Rounded ...続きを読む
画像処理のソフトなどには、文字やオブジェクトに影をつける「ドロップシャドウ」という機能があります。 ボタンや写真などに「ドロップシャドウ」使うことで立体的に表現することができるのでよく使われる効果のひとつです。 画像処理のソ...続きを読む
最近は、CSSというとCSS3にクローズアップされることが多いのですが、今回は、CSS2より追加された「counter（カウンタ）」の着目してみました。 CSSの「counter（カウンタ）」を使用すると連番などの自動ナンバリング...続きを読む