学科 CSS基礎②

-本日のアジェンダ-

1限目
学科 CSS基礎②
CSSのプロパティと値について

2限目
学科 CSS基礎②
練習問題の説明

3限目
学科 CSS基礎②
CSSのプロパティと値を考える

4限目
学科 CSS基礎②
練習問題の解説

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

本日のテーマ

レイアウトデザイン練習問題②(CSSのプロパティと値を考える)

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

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

テキスト系プロパティ

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

フォント系プロパティ

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

リスト系プロパティ

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

練習問題:CSSのプロパティと値を考える

【資料】

ドロップボックスの資料をダウンロードしましょう。
資料 > 【STEP3】Webページの理解 > レイアウトデザイン 練習問題②
Webサイト制作のCSSのプロパティと値を考えるの練習資料です。

【動画】

本日の課題

WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。

学科 CSS基礎①

-本日のアジェンダ-

1限目
学科 CSS基礎①
マークアップの練習について

2限目
学科 CSS基礎①
マークアップの練習について

3限目
学科 CSS基礎①
リセットCSSとセレクタの得点について

4限目
学科 CSS基礎①
Chrome検証ツールについて

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

本日のテーマ

検証ツールを活用しましょう

【まとめサイト】

【動画】

リセットCSSついて

ブラウザは初期状態でタグ単位のデフォルトのスタイルシートを持っています。このデフォルトのスタイルシートの内容はブラウザによって異なるためブラウザ環境を変更すると意図しない表示になることがあります。このような現象を防ぐために使用するのがリセット CSS です。

リセット CSS は、ブラウザが持っているスタイルシートをリセット(クリア)するためのスタイルシートですがリセットする範囲はコーディングスタイルに依存するため、これが正解というリセット CSS は存在しません。各自のコーディングスタイルに合わせて適時変更してください。

セレクタの得点について

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

Chrome検証ツールについて

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

本日の課題

WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。