【制作期間】 約1日（実作業時間：約4時間） 【制作目的】 HerTechの課題として、HTML・CSSを使用した「Cafe Roast」のWebサイトのコーディングに取り組みました。 デザインカンプをもとにPC版のWebサイトを実装し、スマートフォンやタブレットなど、異なる画面幅でもレイアウトが崩れないようレスポンシブ対応を行いました。 【使用技術】 ・HTML ・CSS 【対応デバイス】 PC・タブレット・スマートフォン 【制作範囲】 PC版、タブレット版、スマートフォン版のレスポンシブ対応 【制作内容】 デザインカンプをもとに、HTML・CSSを使用してWebサイトを実装しました。 PC版のレイアウトを基準に、画面幅に応じて各要素のサイズや配置、画像の表示方法などを調整し、異なるデバイスでも閲覧しやすいレイアウトになるよう制作しました。 【工夫した点】 レスポンシブ対応では、画面幅が変わった際に要素が折り返されることで、レイアウトが崩れる可能性がある箇所を確認し、ブレイクポイントを設定しました。 特に、デザインカンプでは3列で表示されている画像部分について、タブレットサイズでは2列表示に切り替わるようCSSを調整しました。 画面幅に合わせて表示する列数を変更することで、画像やコンテンツが無理に縮小されたり、レイアウトが崩れたりしないよう意識しました。 また、スマートフォンではPCとは異なる画面幅になるため、要素同士の余白やサイズ、配置を確認しながら調整しました。 実際のブラウザで画面幅を変えながら表示を確認し、各サイズでレイアウトが崩れていないかを確認しながら制作を進めました。 【制作を通して学んだこと】 レスポンシブ対応では、単純に画面幅に合わせて要素を縮小するのではなく、画面幅に応じてレイアウトそのものを変更する必要があることを学びました。 特に、コンテンツの折り返しや表示列数を考慮してブレイクポイントを設定することで、PC・タブレット・スマートフォンそれぞれで見やすいレイアウトを実現できることを学びました。