学科 HTML/CSS基礎⑤【オンライン】

-本日のアジェンダ-

1限目
学科 HTML/CSS基礎⑤
CSSの記述・検証ツールの活用

2限目
学科 HTML/CSS基礎⑤
CSSのプロパティについて

3限目
学科 HTML/CSS基礎⑤
CSSのプロパティについて

4限目
学科 HTML/CSS基礎⑤
Webページ制作実践

5限目
学科 HTML/CSS基礎⑤
本日の講義のまとめ

【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：とにかくグラフィックソフトを使うHTMLとCSSの理解
内容1：HTMLとCSSについて
内容2：HTMLとCSSについて
内容3：
課題：なし
【注記】
・新カリキュラム用に修正（2024/8/14：大浜）

本日のテーマ

CSSのプロパティを理解しましょう

CSSの記述・検証ツールの活用

【まとめサイト】

【動画】

セレクタの得点について

セレクタには優先順位があり点数計算をして高得点のものが採用されます。同じ得点の場合は後ろに書いてあるものが採用されます。点数計算の結果によっては前に書いてあるセレクタが採用されてしまうことがありますので意図したスタイルにならない時は点数を確認してください。

Chrome検証ツールについて

ブラウザに表示されるWebページの設定情報を参照したり、想定通りに表示されない場合の調査には、Chrome の検証ツールの使用が有効です。また、スマートフォンやタブレットでの表示型式を確認することもできます。

CSS：バックグランド系プロパティ

  • background-color プロパティ（背景色）
  • background-attachment プロパティ（背景画像の位置）
  • background-image プロパティ（背景画像のファイル）
  • background-repeat プロパティ（背景画像の繰り返し）
  • background プロパティ（背景の一括指定）
  • background-size プロパティ（背景画像のサイズ）
  • background-position プロパティ（背景画像の表示開始位置）

CSS：テキスト系プロパティ

  • color プロパティ（文字の色）
  • opacityプロパティ（透明度）
  • text-align プロパティ（文字の配置）
  • text-decoration-color プロパティ（文字飾りの色）
  • text-decoration-style プロパティ（文字飾りの線種）
  • text-decoration-thickness プロパティ（文字飾りの線の太さ）
  • text-decoration プロパティ（文字の飾りの一括指定）
  • text-shadow プロパティ（文字の影）

CSS：フォント系プロパティ

  • font-family プロパティ（フォントの種類）
  • font-size プロパティ（フォントのサイズ）
  • font-weight プロパティ（フォントの太さ）
  • font-style プロパティ（フォントのスタイル）
  • line-height プロパティ（行の高さ）
  • font プロパティ（フォント一括指定）
  • white-space プロパティ（空白・改行の表示方法）
  • word-wrap プロパティ（単語の途中での改行方法）
  • word-break プロパティ（テキストや単語の改行方法）
  • tab-size プロパティ（タブ文字の表示幅指定）

CSS：リスト系プロパティ

  • list-style-type プロパティ（リストマーカーの種類）
  • list-style-image プロパティ（リストマーカーの画像）
  • list-style-position プロパティ（リストマーカーの位置）
  • list-style プロパティ（リストマーカーの一括指定）

CSS：レイアウト系プロパティ

  • width プロパティ（内容の幅）
  • max-width プロパティ（幅の最大値）
  • min-width プロパティ（幅の最小値）
  • height プロパティ（内容の高さ）
  • max-height プロパティ（高さの最大値）
  • min-heightプロパティ（高さの最小値）
  • float プロパティ（回り込み）
  • clear プロパティ（回り込みを解除）
  • display プロパティ（要素の表示方法）
  • overflow プロパティ（ボックスからあふれた内容の処理方法）

CSS：パディング系プロパティ

  • padding-top/-bottom/-left/-right プロパティ（パディング上下左右）
  • padding プロパティ（パディング一括指定）

CSS：マージン系プロパティ

  • margin-top/-bottom/-left/-right プロパティ（マージン上下左右）
  • margin プロパティ（マージン一括措定）
  • マージンの相殺
  • マイナスマージン
  • ボックスの中央配置
  • ボックスの右端配置

本日の課題

本日学んだ内容を復習して整理しておきましょう。
WordPressの投稿ページに学んだことをまとめておくと良いです。