HTML/CSSのコーディングの事例です。
デザインカンプ(Figma)を元にした、HTML/CSSコーディングを行いました。
- 担当範囲
-
- HTML/CSSコーディング
制作のポイント
Figmaデザインよりコーディングを行っております。
デザインに忠実であるのはもちろん、
デザインの意図が、実際の利用者へと正しく伝わり、できる限り気持ちよく使って貰えるよう、心掛けて作っています。
サイドバー
画面幅が広い時には、サイドバーが表示されます。
今回、仕様として指示をいただいた、
- 固定配置(スクロールしても常に表示)
- マウスホバーでの開閉
- デフォルトでは閉じている
に沿って制作を行いました。
実際にマウスを動かして触りながら、動きに違和感ないように、動きが心地良く、自然に感じられるように工夫や調整をしています。

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

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

- 使用した技術・ライブラリなど
-
- HTML
- CSS(SASS)
- JQery
- Slick.js
- Micromodal.js
- PHP(お問い合わせフォーム)
- 制作期間
-
3週間程度
