- HTML/CSS
「このサイト、なんか安っぽく見えるんですけど」─ コーディングだけで”高級感”を出す5つのCSS技法
こんにちは！株式会社ファストコーディングの働くおかんです。 先日、子どもの誕生日ケーキを手作りしたんです。味は悪くないはずなのに、見た目がどうにも「手作り感」全開で。隣に並べたお店のケーキと比べると、同じイチゴでも盛り付 […]
- HTML/CSS
「Figmaの通りに作ったのに、なんか違うんですけど」─ デザインカンプとブラウザ実装のズレを埋める方法
おはようございます！株式会社ファストコーディングの働くおかんです。 先日、子どもが描いた絵を写真に撮ってプリントしたら、「色が違う！」と怒られました。画面で見た色とプリンターから出てくる色は、そもそも仕組みが違うので完全 […]
- HTML/CSS
「ここの余白、もうちょっと詰められませんか？」─ 余白設計で失敗しないCSS実装
こんにちは！株式会社ファストコーディングの働くおかんです。 先日、子どもの運動会のプログラムを作るお手伝いをしたんですが、「文字と文字の間がスカスカで読みにくい」と先生に言われて余白を詰めたら、今度は「ギュッとしすぎて窮 […]
- HTML/CSS
「この表、スマホだと見づらいんですけど」─ テーブルのレスポンシブ対応3パターン
おはようございます！株式会社ファストコーディングの働くおかんです。 先日、子どもの学校の時間割表をスマホで見ようとしたら、文字が小さすぎて全然読めなくて。横にスクロールしてもどの列を見ているのかわからなくなる。結局ピンチ […]
- HTML/CSS
「前のコーダーのCSS、怖くて触れないんですけど」─ 既存CSSを壊さずに修正する防御的コーディング
おはようございます！株式会社ファストコーディングの働くおかんです。 先日、子どもが積み木で大作を作っていたんです。そこに下の子が「ここにもう一個足したい」と言って1つ追加した瞬間、全体がガシャーンと崩壊。上の子は大泣き、 […]
- HTML/CSS
離脱せず読まれる！”読み物”として最後まで読ませるHTMLレイアウト術
おはようございます！株式会社ファストコーディングの働くおかんです。 先日、子どもの学校の保護者会でもらった紙のお便りを読んでいたんですが、A4にびっしり文字が詰まっていて、正直どこを読めばいいのか分からなかったんですよね […]
- HTML/CSS
視線が自然に流れる！スプリットレイアウト提案
おはようございます！株式会社ファストコーディングの働くおかんです。 先日、上の子と一緒に図鑑を読んでいたんですが、左ページに大きな写真、右ページに説明文という構成がすごく読みやすくて。子どもも写真をじーっと見てから「これ […]
- HTML/CSS
CTAを確実に届ける！CSSアニメーションで”視線誘導”するテクニック
おはようございます！株式会社ファストコーディングの働くおかんです。 最近、上の子と一緒にオンラインの学習教材を見ていたんですが、画面の下にある「次のレッスンへ」ボタンがぽわんと光って、子どもが迷わずタップしていたんですよ […]
- HTML/CSS
スタイルの”巻き添え事故”を防ぐ！CSS @scopeで影響範囲を絞る実装術
CSS @scopeを使ってスタイルの影響範囲を限定し、意図しないスタイル漏れを防ぐ方法を解説。@scopeの基本構文からtoによる下限指定、カードUIやヘッダー・フッターの実装例、BEM・CSS Modulesとの比較まで、コード付きで紹介します。ビルドツール不要でWordPressや静的サイトにも導入可能です。
