- HTML/CSS
このデザイン、どうコーディングする？ #6｜モーダルを外側クリックで閉じる？JS最小限でもしっかり動く＆アクセシブルに設計する方法
HTML標準の要素を使えば、モーダルの開閉・外側クリック・ESCキー対応・フォーカス制御まで、ほぼ自動で実現できます。本記事では、実務で役立つベースのモーダル実装方法を紹介しつつ、JS最小構成でもアクセシブルに設計するポイントを解説します。
- HTML/CSS
「Webディレクター必携 ─ 現場経験から導いた“フロント制作 完全ガイド”」 Vol.4 軽くて崩れにくいCSS設計 ─ 複雑なデザインを支える実装の工夫とは？
1. はじめに：見た目が同じでも、コードの中身は全然違う Webページを見て、「このデザイン、きれいにできてるな」と感じることは多いと思います。ですが、その裏側にあるCSSの設計が軽くて保守しやすいものか、複雑で崩れやす […]
- HTML/CSS
このデザイン、どうコーディングする？ #4｜Figmaだけにある“あのマージン指定”、CSSで正しく落とし込む方法
Figmaでよく見られる「左右40pxの余白、中央800px」レイアウトをCSSに落とし込む方法を解説します。最適な組み合わせは、padding-inline、max-width、margin-inline: autoです。この設計により、視覚的な余白と構造の把握が容易になります。
- HTML/CSS
【このデザイン、どうコーディングする？ 】#3｜JSなしでスクロール連動フェードイン。CSSだけでここまでできる！
弊社で実際に使っているCSSだけでスクロール連動アニメーションを簡単に実装できる方法を解説。特にanimation-timelineと:has()を活用することで、JavaScriptなしでも自然なフェードインが実現可能です。
- HTML/CSS
【このデザイン、どうコーディングする？ 】#02「Pinterest風の高さバラバラな要素をスマートに整列させる方法」
Pinterest風のグリッドレイアウトを実装する方法について解説します。CSS Gridのgrid-auto-flow: denseやマルチカラムレイアウトを使用し、高さの異なるカードを整然と並べます。使用ケースやメリット・デメリットを考慮し、実務に役立つ技術を提案しています。
- HTML/CSS
＜みんな気になる＞コーディング代行会社のよくある用語とその解説
コーディング代行会社を調べていると、各社色々な特徴や強みがありますが、それと同時に料金や検証環境などに色々な違いがあります。 今回は、基本料金からレスポンシブ対応時のページ単価、さらにサポート状況やブラウザ対応範囲までを […]
- HTML/CSS
【第３章】コーディング代行サービスの選び方
コーディング代行会社がお届けする「初めてのコーディング代行」シリーズ！全4章の第3弾です！ 「聞いたことはあるけど、使ったことはない」「どんなことしてくれるのかわからない」「メリットがあるのか」など、使ってみないとわから […]
- HTML/CSS
【第２章】「コーディング代行サービス」を使うのはどんな人？
コーディング代行会社がお届けする「初めてのコーディング代行」シリーズ！コーディング代行サービス」を使うのはどんな人か解説します
- HTML/CSS
【コピペ】HTMLフォームのselect項目まとめ(生年月日・年齢・都道府県・職業)
こんにちは、ディレクターのせりなです。 HTMLで問い合わせフォームなんかを作るとき用に セレクトメニューの中身をサクッとコピペできる、とーーーっても便利な一覧を作りました！ 私は平和主義なので、ひとり占めしないでみなさ […]
