ウェブデザイン支援訓練１０日目

6月23日（水）

今日は午前中は前々から授業で作っているケーキ屋さんのサイトの下層ページを作り、午後からは今まで授業で習ったHTMLとCSSをフル活用した自己紹介ページをつくることに。今までは模範となるサイトの全体像があって、それを模写していく流れだったけど、いきなり「自己紹介ページ好きなように作ってください」と言われると、コード以前に何をどういうレイアウトで作っていいのやらわからん・・・ということで、「自己紹介サイト」でググって、まずは参考になるサイトを探してレイアウトをパクることから始めた。

＜本日の学び＞

• 左と右に配置してあるものを逆にしたい→ flex-direction: row-reverse;
• スマホで撮った画像は大きすぎるのでCSSで縮小して配置→ htmlの内部参照で<style>タグの中にimg{ max-width: 100%; height: auto; }を入れて、imgを挟んでいるpタグのクラスに{width: 300px; }　と記述し幅を設定する。そうすると縦横比が崩れることなく画像がピッタリハマる。