- HTML/CSS
視線が自然に流れる！スプリットレイアウト提案
おはようございます！株式会社ファストコーディングの働くおかんです。 先日、上の子と一緒に図鑑を読んでいたんですが、左ページに大きな写真、右ページに説明文という構成がすごく読みやすくて。子どもも写真をじーっと見てから「これ […]
- HTML/CSS
AIにReactのカスタムフックを書かせたら品質はどこまでいけるか ─ AI駆動開発の実践レポート
こんにちは、株式会社ファストコーディングのフルスタックエンジニア、独身貴族Fireです。 最近、ギターの練習でコード進行を覚えるのが面倒で、AIに「Key=Amのブルース進行を10パターン出して」と聞いてみたんです。出て […]
- HTML/CSS
「求職者と案件のマッチング、頭の中でやってませんか？」─ kintoneで人材マッチングを仕組み化する
皆さんこんにちは。kintoneアプリエンジニアのtomiokaです。 先日、人材紹介会社のお客様からこんな相談をいただきました。「求職者と案件のマッチングが担当者の記憶頼みで、情報共有ができていない」と。 今回の記事は […]
- HTML/CSS
デザイナーが知っておくべき”コーディングの現実”を50代営業が代弁する
株式会社ファストコーディングで営業を担当しています長谷川と申します。お客様とお話ししていて気づいたことや、フロントエンド開発・コーディング制作界隈で最近流行っていることを書いていこうと思っております。どうぞ宜しくお願いし […]
- HTML/CSS
スタイルの”巻き添え事故”を防ぐ！CSS @scopeで影響範囲を絞る実装術
CSS @scopeを使ってスタイルの影響範囲を限定し、意図しないスタイル漏れを防ぐ方法を解説。@scopeの基本構文からtoによる下限指定、カードUIやヘッダー・フッターの実装例、BEM・CSS Modulesとの比較まで、コード付きで紹介します。ビルドツール不要でWordPressや静的サイトにも導入可能です。
- HTML/CSS
“キーボードだけで使えるUI”を最小コードで ─ Roving TabindexとFocus Trapの実装法
Roving TabindexとFocus Trapの2パターンで、キーボードだけで操作できるアクセシブルなUIを実装する方法を解説。メニュー・タブ・モーダルのフォーカス管理をReactとVueの両方のコード付きで紹介します。外部ライブラリ不要、約100行で実装可能です。
- HTML/CSS
“動かすけど軽い” FLIPアニメーション設計 ─ React/Vueで60fpsを維持する実装法
カードの並び替えやフィルタ後のリスト再配置で60fpsを維持するFLIPアニメーション設計を解説。GoogleのPaul Lewisが提唱したFirst→Last→Invert→Playの4ステップで、transform主体のGPU合成アニメーションを実現します。ReactのuseLayoutEffect、VueのTransitionGroupでの実装例とパフォーマンス対...
- HTML/CSS
スマホユーザーを逃さない！CSSで作る縦スクロール設計
スマホの縦スクロールを活かしたUI設計をCSS scroll-snapで実装！モバイルユーザーが離脱しない、指に気持ちいいスクロール体験の作り方を紹介します。
- HTML/CSS
“追加コンポーネントは後で読み込み”：イベント駆動の遅延ハイドレーション
ページの初期表示を軽くする「遅延ハイドレーション」をVue.jsで実装する方法を解説。defineAsyncComponentやhydrateOnVisibleを使って必要なタイミングだけスクリプトを読み込み、表示速度を約30％改善した実例も紹介します。
