課題内容
ここまでの実習で使ってきた方法の復習を兼ねたWebページの制作を行ってください。
見本と素材
完成見本は、素材のmihonフォルダ内の画像、もしくは下記ページをご確認ください。
見本サイトはこちら
https://skillhub-sozai.s3.ap-northeast-1.amazonaws.com/lp_sample/lpkadai.html
課題コーディングについて
1.WebfontとサニタイズCSS
実習と同じものを使います。
- sanitize.css
- Google fonts(Noto Sans JP)
- Google Material Icons
実習で作ったファイルからコピペしていただいて構いません。
2.CSSクラスに関して
containerやcol-*クラス、ブレイクポイントは実習と同じ設定です。
使える部分はコピペして使っていただいてOKです。
見本サイトはPC幅ファーストでコーディングしています。
解説も同様に行いますので、PC幅からCSSを書いて頂くと見合わせやすいです。
3.使用画像に関して
コーディングに必要な画像は、素材(kadai-sozai)のimagesフォルダに入っています。
画像が入っていないものは、CSSもしくはGoogle fonts(icon)で表現してください。
4.見本の再現性
見本画像を厳密に再現する必要はありません。
角丸の値や、グラデーションの切り替え位置等は“だいたい”で設定して良いです。
復習をメインに行う課題ですので、TB幅以下のスタイル指定は簡単に整える程度で良いです。
こちらも細かく位置等を合わせる必要はありません。