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