Sekine Hisako Portforio

デ　ジ　タ　ル　弱　者　を　減　ら　し　た　い

, ,

HTML/CSS基礎⑤

学科【オンライン】2025.9.24

授業内容

  • CSSのプロパティについて
  • 本日の講義のまとめ

習得内容

  • CSSのプロパティについて

■CSSの記述・検証ツールの活用
Chromeの検証ツールを活用する。

□Chromeの検証画面を別ウインドウで開く方法

赤い□縦3つの・をクリック
赤く塗られた部分をクリック

■CSS：バックグランド系プロパティ
HTML-CSS入門講座 | 情報デザイン工房　濱屋サイト　Lesson6　L6.2.1～L6.2.8 参照

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


■CSS：テキスト系プロパティ
HTML-CSS入門講座 | 情報デザイン工房　濱屋サイト　Lesson5　L5.2.1～L5.2.9 参照
L5.2.2　opacity　4.は文字だけ透明にしない指定方法

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

■CSS：フォント系プロパティ
HTML-CSS入門講座 | 情報デザイン工房　濱屋サイト
Lesson5　L5.3.1～L5.3.10　参照
フォントの構成と単位 https://html-css.hamaya2020.com/tips-font-size.html#%　参照

HTML-CSS入門講座 | 情報デザイン工房　濱屋サイト／フォントの構成と単位　抜粋
  • font-family プロパティ（フォントの種類）
    ※サイトを開くパソコンによって持っているフォントが違うため、持っていないフォントの場合は文字化
    　けをおこす。その為いくつかのフォントを指定しておく。もしくはGoogle fontsを指定する。
  • font-size プロパティ（フォントのサイズ）
  • font-weight プロパティ（フォントの太さ）
  • font-style プロパティ（フォントのスタイル）
  • line-height プロパティ（行の高さ）
  • font プロパティ（フォント一括指定）

■CSS：リスト系プロパティ
HTML-CSS入門講座 | 情報デザイン工房　濱屋サイト　Lesson5　L5.4.1～L5.4.4 参照

  • list-style-type プロパティ（リストマーカーの種類）
  • list-style-image プロパティ（リストマーカーの画像）
    ※画像をリストマーカーとして貼り付けることができる
  • list-style-position プロパティ（リストマーカーの位置）
  • list-style プロパティ（リストマーカーの一括指定）

■CSS：レイアウト系プロパティ
HTML-CSS入門講座 | 情報デザイン工房　濱屋サイト　Lesson4　L4.2.1～L4.2.11 参照
以下のボックスモデルを頭に入れておく。

HTML-CSS入門講座 | 情報デザイン工房　濱屋サイトL3.3.1抜粋
  • width プロパティ（内容の幅）
    ※昔はcontentの幅（＝content-box）だったが、今はcontent+padding+borderの幅 (border-box)の指定に
    　使用される。
  • max-width プロパティ（幅の最大値）
    ※画面のサイズを小さくしたり、大きくしたりした際にcontentの大きさが変化するようになっているが、
    　その最大の大きさの指定
  • min-width プロパティ（幅の最小値）
  • height プロパティ（内容の高さ）※正方形の場合指定する。
  • max-height プロパティ（高さの最大値）
  • min-heightプロパティ（高さの最小値）
  • float プロパティ（回り込み）※横並びにさせることができる。
  • clear プロパティ（回り込みを解除）
  • position/top/left/bottom/right プロパティ（要素の配置方法）
    ※positionを使用するとスマホに対応させる時に大変になる為、最終手段として使用する。
  • z-index プロパティ（重なりの順序方法）
  • display プロパティ（要素の表示方法）
    ※HTML-CSS入門講座 | 情報デザイン工房　濱屋サイトL3.3.2の表示ルールを確認する。
    　属性の変更ができる。
  • overflow プロパティ（ボックスからあふれた内容の処理方法）

■CSS：ボーダー系プロパティ
HTML-CSS入門講座 | 情報デザイン工房　濱屋サイト　Lesson4　L4.3.1～L4.3.5 参照

  • border-style プロパティ（ボーダースタイル）
  • border-color プロパティ（ボーダー色）
  • border-width プロパティ（ボーダー幅）
  • border プロパティ（ボーダー一括指定）※指定の時は、ほとんどがこれを使用する。
  • border-top/-bottom/-left/-right プロパティ（ボーダー上下左右一括指定）

■CSS：パディング系プロパティ
HTML-CSS入門講座 | 情報デザイン工房　濱屋サイト　Lesson4　L4.4.1～L4.4.2 参照

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

■CSS：マージン系プロパティ
HTML-CSS入門講座 | 情報デザイン工房　濱屋サイト　Lesson4　L4.5.2～L4.5.3 参照
marginプロパティの注意事項　https://html-css.hamaya2020.com/tips-margin.html　参照

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

■CSS：その他のプロパティ
HTML-CSS入門講座 | 情報デザイン工房　濱屋サイト　Lesson4　L4.6.1～L4.6.7 参照

  • border-radius プロパティ（ボーダーの角の丸み）
    ※全ての角を同じRで指定する場合は値を1つ「border-radius: 40px」
    　ひとつひとつの角を違うRにしたい場合は
    　「border-radius: 40px 80px 80px 160px（横方向） / 40px 80px 40px 80px（縦方向）;」時計回りに指定
  • box-shadow プロパティ（ボックスの影）
  • box-sizing プロパティ（ボックスサイズ計算）
  • content プロパティ（挿入コンテンツ）※別の日に説明
  • object-fit プロパティ（画像トリミング）
  • object-position プロパティ（画像の配置位置指定）