- すべて
このデザイン、どうコーディングする？ #6｜モーダルを外側クリックで閉じる？JS最小限でもしっかり動く＆アクセシブルに設計する方法
HTML標準の要素を使えば、モーダルの開閉・外側クリック・ESCキー対応・フォーカス制御まで、ほぼ自動で実現できます。本記事では、実務で役立つベースのモーダル実装方法を紹介しつつ、JS最小構成でもアクセシブルに設計するポイントを解説します。
- すべて
「Webディレクター必携 ─ 現場経験から導いた“フロント制作 完全ガイド”」 Vol.5 JavaScriptいらずのUI表現集 ─ CSSだけでここまでできる実装アイデア
CSSも日々進化しているの知ってますか？昔はJavaScriptが必要だったホバーアニメーションやアコーディオン、スライダーがCSSだけで実装可能になっています。本記事では、実務で活用できるCSSだけの動的UI実装例と、そのメリットを詳しくご紹介します。
- すべて
このデザイン、どうコーディングする？ #5｜スクロールで変化する透明ヘッダー、CSSだけで自然に固定する方法
スクロールに応じて背景が切り替わるヘッダーUIの実装方法について、CSSとJavaScriptの両面から丁寧に解説しています。position: sticky を使った構成により、初期は透明、スクロール後に背景や影を自然に追加する方法をご紹介。実務で役立つポイントや、スマートフォン対応、iOS Safariでの注意点...
- すべて
「Webディレクター必携 ─ 現場経験から導いた“フロント制作 完全ガイド”」 Vol.4 軽くて崩れにくいCSS設計 ─ 複雑なデザインを支える実装の工夫とは？
1. はじめに：見た目が同じでも、コードの中身は全然違う Webページを見て、「このデザイン、きれいにできてるな」と感じることは多いと思います。ですが、その裏側にあるCSSの設計が軽くて保守しやすいものか、複雑で崩れやす […]
- すべて
このデザイン、どうコーディングする？ #4｜Figmaだけにある“あのマージン指定”、CSSで正しく落とし込む方法
Figmaでよく見られる「左右40pxの余白、中央800px」レイアウトをCSSに落とし込む方法を解説します。最適な組み合わせは、padding-inline、max-width、margin-inline: autoです。この設計により、視覚的な余白と構造の把握が容易になります。
- すべて
「Freelancehub」でブログ記事をご紹介いただきました
レバレジーズ株式会社様が運営するITフリーランス向け案件サイト「Freelancehub」で、弊社のブログ記事「マイクロコピーとは？効果的な活用方法をご紹介！」をご紹介いただきました！ ぜひご覧ください！
- すべて
「Webディレクター必携 ─ 現場経験から導いた“フロント制作 完全ガイド”」 Vol.3 CSSが効かない？バグじゃなくて“仕様通り”な挙動とその正体
Web制作でよくある「CSSが効かない」のフィードバックは、だいたいがCSSプロパティの組み合わせで起きるバグです。HTMLがz-indexやposition: sticky、flexの影響を受けて、親子関係や他のプロパティによってスタイルが変わります。このあたり抑えておくだけで、バグはかなり少なくなりますよ！
- すべて
【最新】HTMLコーディング代行会社 検索上位10社比較（2025年4月）
こちらの記事では、コーディング代行を利用される利用者様のために、定期的に各社のWebサイトに書いてある情報をまとめています。 今回は、2025年4月現在の最新のウェブ検索結果をもとに、HTMLコーディング代行会社の検索で […]
- すべて
「Webディレクター必携 ─ 現場経験から導いた“フロント制作 完全ガイド”」 Vol.2 レスポンシブ対応の落とし穴 ─ ブレイクポイントだけじゃ防げないUI崩れ
UIUXのレスポンシブ対応はPCとスマホだけでなく、中間画面サイズや実データの影響を考慮して設計しなければなりません。弊社で実際に使っているコツをお教えいたします！
