-本日のアジェンダ-
1限目
学科 HTML/CSS基礎⑥
CSSの記述方法について
2限目
学科 HTML/CSS基礎⑥
CSSの記述方法について
3限目
学科 HTML/CSS基礎⑥
Webページ制作実践
4限目
学科 HTML/CSS基礎⑥
Webページ制作実践
5限目
学科 HTML/CSS基礎⑥
本日の講義のまとめ
【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報(注記)を追記して頂いても大丈夫です。
ストーリー:とにかくグラフィックソフトを使うHTMLとCSSの理解
内容1:HTMLとCSSについて
内容2:HTMLとCSSについて
内容3:
課題:練習問題提出
【注記】
・新カリキュラム用に修正(2024/8/14:大浜)
本日のテーマ
CSSの記述をしましょう
セレクタの得点について【復習】
セレクタには優先順位があり点数計算をして高得点のものが採用されます。同じ得点の場合は後ろに書いてあるものが採用されます。点数計算の結果によっては前に書いてあるセレクタが採用されてしまうことがありますので意図したスタイルにならない時は点数を確認してください。
CSS:レイアウト系プロパティ【復習】
- width プロパティ(内容の幅)
- max-width プロパティ(幅の最大値)
- min-width プロパティ(幅の最小値)
- height プロパティ(内容の高さ)
- max-height プロパティ(高さの最大値)
- min-heightプロパティ(高さの最小値)
- float プロパティ(回り込み)
- clear プロパティ(回り込みを解除)
- display プロパティ(要素の表示方法)
- overflow プロパティ(ボックスからあふれた内容の処理方法)
Webページ制作実践③
実際にサンプルファイルを使用してWebページ制作の手順を確認していきましょう。
- バックグランド系プロパティ
- テキスト系プロパティ
- フォント系プロパティ
- リスト系プロパティ
- レイアウト系プロパティ
- パディング系プロパティ
- マージン系プロパティ
【資料】
カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/
下記のファイルをダウンロードしましょう。
「chapter3.zip」
- CSSファイル(style.css)にセレクタの書出し
- 文字の大きさや色の設定
- header部分のレイアウト作成
本日の課題
Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付けを行いましょう。(出来たところまでで大丈夫です)