学科 CSS基礎③

-本日のアジェンダ-

1限目
学科 CSS基礎③
positionについて

2限目
学科 CSS基礎③
displayの種類について

3限目
学科 CSS基礎③
overflow について

4限目
学科 CSS基礎③
CSSのまとめ

5限目
学科 CSS基礎③
グラフィックツールの復習

本日のテーマ

配置について

positionについて

positionについては、使い方を誤るとややこしくなりますので、基本的な3つの使い方と使い分けをしっかりと覚えておきましょう。

  1. position:relative; (相対位置)
  2. position:absolute; (絶対位置)
  3. position:fixed; (固定位置)

サンプルページ(CSSの記述【配置】)

サンプルファイル(positionの基本の使い方)

サンプルファイル(positionの使い方)

ワンポイントアドバイス

position タグは、コーディングをする時に設計を複雑にしてしまいます。計画的に行うか、最後に行うなどして工夫すると良いでしょう。

参考サイト

displayについて

displayタグを使う事で、様々なレイアウトを可能にします。まずはブロックレベル要素とインライン要素の違いと特徴をしっかりと確認しておきましょう。

サンプルファイル( displayの種類について )

参考サイト

overflow について

overflowは、これまでのタグでも注意は必要でしたが、特に気を付ける事としてブラウザ依存する(ブラウザ毎にデザインが異なる)という点に注意しましょう。

サンプルファイル( overflow見本)

参考サイト

本日の課題①

wordpressのサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルに「議題」は必ず入れましょう。

本日の課題②

グラフィックデザイン基礎の内容をページにまとめてください。
投稿日は、該当する「学科 グラフィックデザイン基礎」の日時にしてください。
※ページタイトルに「議題」は必ず入れましょう

カテゴリー: 学科 CSS基礎 パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です