- React, Vue.js
「Webディレクター必携 ─ 現場経験から導いた“フロント制作 完全ガイド”」 Vol.4 軽くて崩れにくいCSS設計 ─ 複雑なデザインを支える実装の工夫とは？
1. はじめに：見た目が同じでも、コードの中身は全然違う Webページを見て、「このデザイン、きれいにできてるな」と感じることは多いと思います。ですが、その裏側にあるCSSの設計が軽くて保守しやすいものか、複雑で崩れやす […]
- React, Vue.js
このデザイン、どうコーディングする？ #4｜Figmaだけにある“あのマージン指定”、CSSで正しく落とし込む方法
Figmaでよく見られる「左右40pxの余白、中央800px」レイアウトをCSSに落とし込む方法を解説します。最適な組み合わせは、padding-inline、max-width、margin-inline: autoです。この設計により、視覚的な余白と構造の把握が容易になります。
- React, Vue.js
【このデザイン、どうコーディングする？ 】#3｜JSなしでスクロール連動フェードイン。CSSだけでここまでできる！
弊社で実際に使っているCSSだけでスクロール連動アニメーションを簡単に実装できる方法を解説。特にanimation-timelineと:has()を活用することで、JavaScriptなしでも自然なフェードインが実現可能です。
- React, Vue.js
【このデザイン、どうコーディングする？ 】#02「Pinterest風の高さバラバラな要素をスマートに整列させる方法」
Pinterest風のグリッドレイアウトを実装する方法について解説します。CSS Gridのgrid-auto-flow: denseやマルチカラムレイアウトを使用し、高さの異なるカードを整然と並べます。使用ケースやメリット・デメリットを考慮し、実務に役立つ技術を提案しています。
- React, Vue.js
【このデザイン、どうコーディングする？ 】#01「スマホで横スライド！比率固定のカルーセルUIをCSSだけで作る方法」
このブログシリーズでは、モダンなUIデザインをシンプルに実装する方法を紹介します。第1回は、スマホサイト向けの横スライド型カルーセルUIをcssのみで実現する手法を解説。実装ポイントや柔軟なスタイル設定についても触れています。
- React, Vue.js
いまさら聞けない！CSSでレイアウトを決めるプロパティと具体的な使い方
Web制作をしていると、「このレイアウト、どうやって実装すればいいんだろう？」と悩むことはありませんか？HTMLやCSSの基本は知っているけれど、レイアウトを組む方法がいまいちわからない、あるいは 「いつもFlexbox […]
- React, Vue.js
【CSS】CSSだけで画像をトリミングできる「object-fit」
こんにちは。FASTCODINGデザイナーの七転び八重子です。 今回は、簡単に画像をトリミングできるCSSをご紹介します。サイズのバラバラな画像を並べる場合に、わざわざ画像をトリミングする必要がないのでとても便利です。 […]
- React, Vue.js
「Lazy Load」でページの読み込み速度を向上させる
こんにちは。FASTCODINGデザイナーの七転び八重子です。 大量の画像を表示するWebページは、表示速度が遅くなりがちです。ページ速度が遅くなると、ブラウザが重くなるので、画面操作に支障が出て、UIが低下してしまいま […]
- React, Vue.js
【アニメーション特集 -6】アニメーションを最適化してパフォーマンスを高める
こんにちは。FASTCODINGデザイナーの七転び八重子です。 アニメーションをシリーズでまとめて見よう！第6回は、「アニメーションを最適化してパフォーマンスを高める」です。これまでの特集で、CSS、JavaScript […]
