【架空案件】和菓子店サイト

模写サイトをもとに、HTML・CSSで和菓子店のWebサイトをコーディングしました。

今回の制作では、サイト全体に縦書きのレイアウトを取り入れています。普段あまり扱わない縦書きだったため、最初は要素の配置や書字方向の違いに苦戦しました。

特に、writing-mode: vertical-rl;を設定すると、その中に配置した要素にも縦書きの影響が及ぶため、画像部分にはwriting-mode: horizontal-tb;を設定して、横書きのレイアウトに戻しています。縦書きの中に横書きの要素を組み合わせるという実装は今回が初めてだったため、実際の表示を確認しながら逐一調整しました。

商品紹介部分では、画像にaspect-ratio: 3 / 2;とobject-fit: cover;を設定し、画面サイズが変わっても画像の比率を保ちながら表示できるようにしています。また、画像の上に半透明のテキストボックスを重ねるため、position: absolute;を使用して配置しました。PCとスマートフォンで画像の大きさや位置を調整し、レイアウトが崩れないようにレスポンシブ対応しています。

画像を少し下方向へずらして余白を作る部分では、transform: translateY()を使用しました。見た目の位置だけを動かし、周囲のレイアウトへの影響を抑えながら配置を調整しています。

ニュース部分では、PCでは5件表示し、スマートフォンでは3件に絞ることで、限られた画面幅でも見やすくなるようにしています。また、スマートフォンでは英語タイトルを非表示にし、文字サイズや余白も調整しました。

ヘッダーとフッターにも縦書きを取り入れ、サイト全体で統一感が出るようにしています。一方で、Google Mapは横幅いっぱいに表示し、画面サイズに合わせて高さや余白を調整しました。

今回の制作を通して、writing-modeのような普段あまり使わないCSSについて、指定したプロパティが他の要素にどのような影響を与えるのかを学びました。特に、縦書きと横書きを組み合わせることで、CSSの書字方向を切り替えながらレイアウトを組めることを理解できたことが大きな学びになりました。