講師:田中 里枝 先生
1限目
実技 WEBデザイン実習②
Web用画像について
2限目
実技 WEBデザイン実習②
Web画像の解像度について
3限目
実技 WEBデザイン実習②
課題制作
4限目
実技 WEBデザイン実習②
課題制作
5限目
実技 WEBデザイン実習②
課題制作
今日はLPのデザインラフとコーディングの作業を行う。
デザインラフは暗いパターンと明るいパターンを作成。最後にホバーの設定(配色の変化)を詰める。
午後からコーディングに入るが、画像の位置が思うように変えられない。画像(img)はブロック要素だと思っていたが、marginが全く効かなかった。外に<p>でくくって、text-alignmentで右寄せしたら、ようやく画像が動いた。
感想・質問
- 感想
フォントの指定し方や文字間隔の調整など基本的なことに時間を取られてしまった。授業で聞いているだけでは何のためにその操作を行うか理解できたおらず、実際に操作が必要になったときにはじめて授業で説明していたことの意味が分かってきました。 - 質問
XDのプレビューでは、画面の枠の大きさを変えると画像も文字もすべて大きさが変わるが、MTHL・CSSでは、画像と文字の位置が変わるが画像や文字の大きさは変わらない。全画面表示にした時の画像で合わせればよいのでしょうか?
下が完成したデザインラフ。このデザインを目標にコーディングを始めました。どのぐらい時間がかかるかな?
