【架空案件】Web制作会社・コーポレートサイト
Figmaのデザインカンプと見本サイトをもとに、企業サイトをHTML・CSSでコーディングしました。制作では、デザインカンプを確認しながら要素同士の間隔や幅を一つずつ計測し、見本のレイアウトをできるだけ正確に再現することを意識しました。
FigmaではAltキーを使って要素間の距離を確認し、余白や各要素のサイズを調整しました。一方で、すべてをそのまま再現するのではなく、ヘッダーのロゴについては、見本よりも少し外側に配置したほうが全体のバランスが良いと感じたため、位置を微調整しました。
今回特に苦労したのは、BUSINESSセクションのレイアウトです。PCでは2列に配置したコンテンツを上下にずらして見せるデザインになっており、grid-template-rows: auto auto;と、grid-auto-flow: column;を初めて使用しました。最初はgrid-auto-flow: column;の仕組みが分からなかったため調べながら実装し、指定した要素が意図した順番で縦方向に配置されることを確認しました。
.room1と.room2には、transform: translateY(100px);を指定して、画像を見た目上100px下げています。このとき、見た目では要素が下に移動していても、レイアウト上の元の位置は変わらないため、そのままでは次のCOMPANYセクションとの間隔が狭くなってしまいました。そこで、.business-detailにpadding-bottom: 100px;を追加し、移動させた分の余白を確保しました。この調整を通して、transformは見た目の位置を動かすもので、レイアウト上の位置そのものを変更するわけではないことを理解しました。
レスポンシブ対応では900pxをブレークポイントとしていますが、PCとスマートフォンでGridの設定そのものを切り替えました。PCでは、
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
grid-auto-flow: column;
として2列に配置していたものを、スマートフォンでは、
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-auto-flow: row;
として1列に変更しました。PCとスマートフォンで、単に幅を変えるだけではなく、要素の並び方そのものを切り替えられることが分かり、CSS Gridの仕組みをより具体的に理解できました。
COMPANYセクションでは、左側に会社情報、右側に会社写真を配置するレイアウトを実装しました。.company-visualの幅は、左側の文章と写真が重ならず、全体としてバランスよく見えるように調整し、width: 52.6%;としました。また、ブレークポイントが900pxのため、PCレイアウトが適用される最小幅の901pxで表示を確認し、そこでも文章と写真が重ならないことを確認しました。
また、会社写真を縦方向の中央に配置するため、top: 50%;とtransform: translateY(-50%);を組み合わせました。top: 50%;だけでは画像の上端が中央の位置に配置されるため、画像自身の高さの50%分だけ上方向へ移動させることで、画像の中心が中央に揃うことを学び、それぞれのプロパティがどの位置を基準に動かしているのかを理解するきっかけになりました。レスポンシブ対応においては、PCでは会社写真を会社情報の横に重ねるレイアウトだったものを、スマートフォンでは会社情報の下に写真を配置するレイアウトにしています。
この制作を通して、Figmaのデザインを正確に読み取り、実際のHTML・CSSに落とし込む力を身につけるとともに、CSS Gridやtransform、positionなどを組み合わせて複雑なレイアウトを実装する方法を学びました。特に、PCとスマートフォンでGridの並び方そのものを変更できることや、見た目の位置とCSS上のレイアウト位置が必ずしも同じではないことを理解できたことが、大きな学びでした。
Figmaのデザインカンプと見本サイトをもとに、企業サイトをHTML・CSSでコーディングしました。制作では、デザインカンプを確認しながら要素同士の間隔や幅を一つずつ計測し、見本のレイアウトをできるだけ正確に再現することを意識しました。
FigmaではAltキーを使って要素間の距離を確認し、余白や各要素のサイズを調整しました。一方で、すべてをそのまま再現するのではなく、ヘッダーのロゴについては、見本よりも少し外側に配置したほうが全体のバランスが良いと感じたため、位置を微調整しました。
今回特に苦労したのは、BUSINESSセクションのレイアウトです。PCでは2列に配置したコンテンツを上下にずらして見せるデザインになっており、grid-template-rows: auto auto;と、grid-auto-flow: column;を初めて使用しました。最初はgrid-auto-flow: column;の仕組みが分からなかったため調べながら実装し、指定した要素が意図した順番で縦方向に配置されることを確認しました。
.room1と.room2には、transform: translateY(100px);を指定して、画像を見た目上100px下げています。このとき、見た目では要素が下に移動していても、レイアウト上の元の位置は変わらないため、そのままでは次のCOMPANYセクションとの間隔が狭くなってしまいました。そこで、.business-detailにpadding-bottom: 100px;を追加し、移動させた分の余白を確保しました。この調整を通して、transformは見た目の位置を動かすもので、レイアウト上の位置そのものを変更するわけではないことを理解しました。
レスポンシブ対応では900pxをブレークポイントとしていますが、PCとスマートフォンでGridの設定そのものを切り替えました。PCでは、
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
grid-auto-flow: column;
として2列に配置していたものを、スマートフォンでは、
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-auto-flow: row;
として1列に変更しました。PCとスマートフォンで、単に幅を変えるだけではなく、要素の並び方そのものを切り替えられることが分かり、CSS Gridの仕組みをより具体的に理解できました。
COMPANYセクションでは、左側に会社情報、右側に会社写真を配置するレイアウトを実装しました。.company-visualの幅は、左側の文章と写真が重ならず、全体としてバランスよく見えるように調整し、width: 52.6%;としました。また、ブレークポイントが900pxのため、PCレイアウトが適用される最小幅の901pxで表示を確認し、そこでも文章と写真が重ならないことを確認しました。
また、会社写真を縦方向の中央に配置するため、top: 50%;とtransform: translateY(-50%);を組み合わせました。top: 50%;だけでは画像の上端が中央の位置に配置されるため、画像自身の高さの50%分だけ上方向へ移動させることで、画像の中心が中央に揃うことを学び、それぞれのプロパティがどの位置を基準に動かしているのかを理解するきっかけになりました。レスポンシブ対応においては、PCでは会社写真を会社情報の横に重ねるレイアウトだったものを、スマートフォンでは会社情報の下に写真を配置するレイアウトにしています。
この制作を通して、Figmaのデザインを正確に読み取り、実際のHTML・CSSに落とし込む力を身につけるとともに、CSS Gridやtransform、positionなどを組み合わせて複雑なレイアウトを実装する方法を学びました。特に、PCとスマートフォンでGridの並び方そのものを変更できることや、見た目の位置とCSS上のレイアウト位置が必ずしも同じではないことを理解できたことが、大きな学びでした。
あなたのforiioを無料で作成
Figmaのデザインカンプと見本サイトをもとに、企業サイトをHTML・CSSでコーディングしました。制作では、デザインカンプを確認しながら要素同士の間隔や幅を一つずつ計測し、見本のレイアウトをできるだけ正確に再現することを意識しました。
FigmaではAltキーを使って要素間の距離を確認し、余白や各要素のサイズを調整しました。一方で、すべてをそのまま再現するのではなく、ヘッダーのロゴについては、見本よりも少し外側に配置したほうが全体のバランスが良いと感じたため、位置を微調整しました。
今回特に苦労したのは、BUSINESSセクションのレイアウトです。PCでは2列に配置したコンテンツを上下にずらして見せるデザインになっており、grid-template-rows: auto auto;と、grid-auto-flow: column;を初めて使用しました。最初はgrid-auto-flow: column;の仕組みが分からなかったため調べながら実装し、指定した要素が意図した順番で縦方向に配置されることを確認しました。
.room1と.room2には、transform: translateY(100px);を指定して、画像を見た目上100px下げています。このとき、見た目では要素が下に移動していても、レイアウト上の元の位置は変わらないため、そのままでは次のCOMPANYセクションとの間隔が狭くなってしまいました。そこで、.business-detailにpadding-bottom: 100px;を追加し、移動させた分の余白を確保しました。この調整を通して、transformは見た目の位置を動かすもので、レイアウト上の位置そのものを変更するわけではないことを理解しました。
レスポンシブ対応では900pxをブレークポイントとしていますが、PCとスマートフォンでGridの設定そのものを切り替えました。PCでは、
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
grid-auto-flow: column;
として2列に配置していたものを、スマートフォンでは、
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-auto-flow: row;
として1列に変更しました。PCとスマートフォンで、単に幅を変えるだけではなく、要素の並び方そのものを切り替えられることが分かり、CSS Gridの仕組みをより具体的に理解できました。
COMPANYセクションでは、左側に会社情報、右側に会社写真を配置するレイアウトを実装しました。.company-visualの幅は、左側の文章と写真が重ならず、全体としてバランスよく見えるように調整し、width: 52.6%;としました。また、ブレークポイントが900pxのため、PCレイアウトが適用される最小幅の901pxで表示を確認し、そこでも文章と写真が重ならないことを確認しました。
また、会社写真を縦方向の中央に配置するため、top: 50%;とtransform: translateY(-50%);を組み合わせました。top: 50%;だけでは画像の上端が中央の位置に配置されるため、画像自身の高さの50%分だけ上方向へ移動させることで、画像の中心が中央に揃うことを学び、それぞれのプロパティがどの位置を基準に動かしているのかを理解するきっかけになりました。レスポンシブ対応においては、PCでは会社写真を会社情報の横に重ねるレイアウトだったものを、スマートフォンでは会社情報の下に写真を配置するレイアウトにしています。
この制作を通して、Figmaのデザインを正確に読み取り、実際のHTML・CSSに落とし込む力を身につけるとともに、CSS Gridやtransform、positionなどを組み合わせて複雑なレイアウトを実装する方法を学びました。特に、PCとスマートフォンでGridの並び方そのものを変更できることや、見た目の位置とCSS上のレイアウト位置が必ずしも同じではないことを理解できたことが、大きな学びでした。