青牡丹工務店 コーポレートサイト

HTML/CSSのコーディングの事例です。
デザインカンプ（Figma）を元にした、HTML/CSSコーディングを行いました。

担当範囲

• HTML/CSSコーディング

制作のポイント

Figmaデザインよりコーディングを行っております。

デザインに忠実であるのはもちろん、
デザインの意図が、実際の利用者へと正しく伝わり、できる限り気持ちよく使って貰えるよう、心掛けて作っています。

サイドバー

画面幅が広い時には、サイドバーが表示されます。
今回、仕様として指示をいただいた、

• 固定配置（スクロールしても常に表示）
• マウスホバーでの開閉
• デフォルトでは閉じている

に沿って制作を行いました。
実際にマウスを動かして触りながら、動きに違和感ないように、動きが心地良く、自然に感じられるように工夫や調整をしています。

お知らせページ

お知らせの内容はモーダルで出現させています。今回、モーダルの実装には Micromodal.js を使用しました。

お問い合わせページ

お問い合わせページは、今回「PHP工房」様で提供いただいているプログラムをカスタマイズして、実装しました。