- HTML/CSS
「ここの余白、もうちょっと詰められませんか？」─ 余白設計で失敗しないCSS実装
こんにちは！株式会社ファストコーディングの働くおかんです。 先日、子どもの運動会のプログラムを作るお手伝いをしたんですが、「文字と文字の間がスカスカで読みにくい」と先生に言われて余白を詰めたら、今度は「ギュッとしすぎて窮 […]
- HTML/CSS
「この表、スマホだと見づらいんですけど」─ テーブルのレスポンシブ対応3パターン
おはようございます！株式会社ファストコーディングの働くおかんです。 先日、子どもの学校の時間割表をスマホで見ようとしたら、文字が小さすぎて全然読めなくて。横にスクロールしてもどの列を見ているのかわからなくなる。結局ピンチ […]
- HTML/CSS
「前のコーダーのCSS、怖くて触れないんですけど」─ 既存CSSを壊さずに修正する防御的コーディング
おはようございます！株式会社ファストコーディングの働くおかんです。 先日、子どもが積み木で大作を作っていたんです。そこに下の子が「ここにもう一個足したい」と言って1つ追加した瞬間、全体がガシャーンと崩壊。上の子は大泣き、 […]
- HTML/CSS
離脱せず読まれる！”読み物”として最後まで読ませるHTMLレイアウト術
おはようございます！株式会社ファストコーディングの働くおかんです。 先日、子どもの学校の保護者会でもらった紙のお便りを読んでいたんですが、A4にびっしり文字が詰まっていて、正直どこを読めばいいのか分からなかったんですよね […]
- HTML/CSS
CTAを確実に届ける！CSSアニメーションで”視線誘導”するテクニック
おはようございます！株式会社ファストコーディングの働くおかんです。 最近、上の子と一緒にオンラインの学習教材を見ていたんですが、画面の下にある「次のレッスンへ」ボタンがぽわんと光って、子どもが迷わずタップしていたんですよ […]
- HTML/CSS
カードUIの”選択肢整理” ─ ホバーで一枚だけ持ち上げる
こんにちは、株式会社ファストコーディングのBigViです。最近、夫と一緒に近所のから揚げ専門店に行きました。メニューが10種類もあって、迷いました。。でも写真が大きいやつが目に入って、それを選びました。おいしかったです。 […]
- HTML/CSS
スタイルの”巻き添え事故”を防ぐ！CSS @scopeで影響範囲を絞る実装術
CSS @scopeを使ってスタイルの影響範囲を限定し、意図しないスタイル漏れを防ぐ方法を解説。@scopeの基本構文からtoによる下限指定、カードUIやヘッダー・フッターの実装例、BEM・CSS Modulesとの比較まで、コード付きで紹介します。ビルドツール不要でWordPressや静的サイトにも導入可能です。
- HTML/CSS
滞在時間を伸ばす！マイクロインタラクションのコーディング実例
CSSだけで実装できるマイクロインタラクションの実例を紹介。ボタンホバー、フォームフォーカス、スクロール連動フェードイン、カードの浮き上がりエフェクトの4つをコード例付きで解説。prefers-reduced-motionによるアクセシビリティ対応や、導入判断の基準も整理しています。
- HTML/CSS
ブランドサイトで差をつける！CSSガラスモーフィズムの実装テクニック
CSSのbackdrop-filterを使ったガラスモーフィズムの実装方法を徹底解説。ブランドサイトで高級感を演出する半透明デザインの作り方、ヒーローセクション・ナビゲーション・カードグリッドでの実装例、ダークモード対応、パフォーマンス最適化まで実践的なコーディングテクニックを紹介します。
