【HTML/CSS】デザインカンプをもとに店舗紹介ページを制作しました！

本日は、現在制作を進めているWebサイトの「店舗紹介」セクションをHTML・CSSでコーディングしました。

今回は、デザインカンプをもとに、レイアウトや装飾を細かく再現することを意識して制作を進めました。

実務を想定したコーディングを行いながら、HTMLの構造やCSSのレイアウト、画像の配置方法など、多くのことを学ぶことができました。

今回制作した内容

今回作成したのは、店舗の魅力が伝わる「店舗紹介」セクションです。

✔ HTMLで構造を設計

まずはHTMLでレイアウトを組みました。

セクションタイトル

左側の店舗内観写真

右側の店舗外観・相談スペース

吹き出し

特徴カード

デザインだけを見るとシンプルに見えますが、実際は見やすく保守しやすいHTML構造を考えながら作成しています。

✔ CSSでデザインを再現

CSSではデザインカンプに合わせて細かく調整しました。

例えば…

CSS Gridを使ったレイアウト

Flexboxでアイコンと文字を横並び

border-radiusで写真の角丸

position:absoluteで吹き出しを配置

object-fitで画像サイズを調整

transitionを使った画像アニメーション

見た目だけでは分からない細かな調整もたくさん行いました。

✔ 吹き出しを画像として重ねる

今回のデザインでは吹き出しの形が特殊だったため、

HTMLでは画像を配置し、

CSSの

position: absolute;

を利用して写真の上に重ねています。

吹き出しの位置も何度も微調整しながら、デザインカンプに近づけました。

✔ カードデザインも調整

店舗の特徴を伝えるカードも制作しました。

アイコンサイズ

文字位置

行間

背景色

枠線

角丸

細かな余白まで調整し、統一感のあるデザインを意識しています。

✔ レスポンシブ対応も開始！

今回はPC版だけでなく、

1180px

980px

767px

それぞれの画面サイズに対応できるよう準備も進めました。

どのデバイスでも見やすいサイトになるよう、今後さらに調整していきます。