-本日のアジェンダ-
1限目
学科 CSS基礎③
positionについて
2限目
学科 CSS基礎③
displayの種類について
3限目
学科 CSS基礎③
overflow について
4限目
学科 CSS基礎③
CSSのまとめ
5限目
学科 CSS基礎③
グラフィックツールの復習
本日のテーマ
配置について
positionについて
positionについては、使い方を誤るとややこしくなりますので、基本的な3つの使い方と使い分けをしっかりと覚えておきましょう。
- position:relative; （相対位置）
- position:absolute; （絶対位置）
- position:fixed; （固定位置）
ワンポイントアドバイス
position タグは、コーディングをする時に設計を複雑にしてしまいます。計画的に行うか、最後に行うなどして工夫すると良いでしょう。
参考サイト
displayについて
displayタグを使う事で、様々なレイアウトを可能にします。まずはブロックレベル要素とインライン要素の違いと特徴をしっかりと確認しておきましょう。
参考サイト
- display－スタイルシートリファレンス
- 【フレックスボックス】CSS display:flexの使い方を解説 …
- display noneとvisibility hiddenとの違いとSEO上の注意点まとめ
overflow について
overflowは、これまでのタグでも注意は必要でしたが、特に気を付ける事としてブラウザ依存する（ブラウザ毎にデザインが異なる）という点に注意しましょう。
参考サイト
- overflow－CSSリファレンス – HTMLクイックリファレンス
- 【CSS】overflowの使い方：hiddenやscrollの違いは？
- 【CSS】overflow徹底攻略！scrollやhiddenなどの使い方も解説
本日の課題①
wordpressのサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルに「議題」は必ず入れましょう。
本日の課題②
グラフィックデザイン基礎の内容をページにまとめてください。
投稿日は、該当する「学科 グラフィックデザイン基礎」の日時にしてください。
※ページタイトルに「議題」は必ず入れましょう