学科 CSS基礎（リスト・画像・背景の編集）

訓練日誌

2022.08.04

目次

前回の復習
本日の訓練内容
1. メモ
  1. Lesson-9 グリッドレイアウトを活用しましょう
    1. L9.2 基本形
      1. L9.2.1 構成要素
      2. L9.3.2 grid-template-rows（行方向のサイズ・高さ）
    2. L9.4 grid アイテム（子要素）に指定可能なプロパティ
      1. L9.4.1 grid-row-start/end / grid-column-start/end（配置）
-本日のアジェンダ-
本日のテーマ
リスト装飾プロパティについて
1. 参考サイト
リストや表について
1. 参考サイト
画像の配置とトリミングについて
1. 参考サイト
バックグラウンド設定プロパティについて
1. 参考サイト
本日の課題①
本日の課題②

前回の復習

border-radius プロパティ（ボックスの4つのコーナーの丸み）
プロパティの存在を知っていれば必要な際に調べることができる。
box-shadow プロパティ（ボックスに対して１つまたは複数の影を指定する）
ぼかしの距離は半径の指定
color プロパティ（文字の色）
opacity プロパティ（不透明度）
text-align プロパティ（文字の配置）
text-decoration プロパティ（文字の装飾）
text-shadow プロパティ（文字の影）
font-family プロパティ（フォントの種類）
font-size プロパティ（フォントサイズ）
font-weight プロパティ（フォントの太さ）
font-style プロパティ（フォントスタイル）
line-height プロパティ（行の高さ）
font プロパティ（フォントの一括指定）
white-space プロパティ（空白・改行の表示方法）

本日の訓練内容

CSS でレイアウトを作りましょう | HTML-CSS 入門講座 | 情報デザイン工房濱屋

L5.4 リスト系プロパティ

L5.4.1 list-style-type プロパティ（リストマーカーの種類）

list-style-type: リストマーカーの種類;

リストの先頭に表示するマーカーの種類を指定する。list-style-image の値を同時に指定した場合には list-style-image の値が優先される。

L5.4.2 list-style-image プロパティ（リストマーカーの画像）

L5.4.3 list-style-position プロパティ（リストマーカーの位置）

L5.4.4 list-style プロパティ（リストマーカーの一括指定）

L5.4.5 リスト関連プロパティ表示サンプル

CSS で文字飾りを付けましょう | HTML-CSS 入門講座 | 情報デザイン工房濱屋

Lesson-6 CSSで飾りを追加しましょう

L6.1 はじめに

L6.1.1 概要

CSS の中で飾りを追加するプロパティ
- バックグラウンド系プロパティ
- テーブル系プロパティ
特定のタグやコンテンツを指定するためのセレクタ
- 疑似クラス系セレクタ
- 疑似要素系セレクタ

L6.2 バックグラウンド系プロパティ

L6.2.1 background-color プロパティ（背景色）

background-color: 背景色;

L6.2.2 background-attachment プロパティ（背景画像の位置）

background-attachment: 背景画像の位置;

fixed
背景画像の位置が固定されスクロールしても動かなくなる。
scroll
スクロールすると背景画像も移動する。

L6.3 テーブル系プロパティ

L6.3.1 border-collapse プロパティ（隣接セルの表示方法）

border-collapse: 隣接セルの表示方法;

collapse = 呼び出し

collapse
隣接するセルの border を重ねて表示する。
separate
隣接するセルの border を間隔をあけて表示する。

L6.3.2 border-spacing プロパティ（隣接セルの border 間の間隔の指定）

border-spacing: 隣接セルの border 間の間隔;

border-collapse プロパティに separate が指定されているときに有効になるプロパティ。

隣接セルの border 間の間隔は複数指定でき、指定した個数により対象位置が異なる。

1つ指定
「上下左右」すべての指定。
2つ指定
「左右」「上下」の順で指定する。

メモ

知恵袋（Tips） | HTML-CSS 入門講座 | 情報デザイン工房濱屋

A3.7 画像の配置

（1）説明

画像を並べて表示する場合に縦・横方向に隙間が発生することがある。
縦方向に隙間が発生する原因は、vertical-align プロパティの初期値がbaseline に指定されているため。
横方向に隙間が発生する原因は、改行コードは空白扱いとなるため。
vertical-align プロパティを使用するときは、img に対してスタイルを指定する。

A3.8 画像のトリミング

（1）説明

大きさの違う画像を一定の大きさにトリミングするときは、 object-fit プロパティを使用する。

img {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

A.3.9 テキストの回り込み

（1）説明

画像の形状に従ってテキストの回り込みを行うときは、shape-outside プロパティを使用する。
shape-outside プロパティは、回り込む画像のスタイルに指定する。
画像の形状は、円、楕円、多角形などを指定することができる。

フレックスレイアウトを活用しましょう | HTML-CSS 入門講座 | 情報デザイン工房濱屋

Lesson-9 グリッドレイアウトを活用しましょう

L.9.1.1 概要

グリッドレイアウトは二次元グリッドを使用して Web ページのレイアウトを作成する仕様。
フレックスレイアウトは一次元、グリッドレイアウトは二次元での配置が基本となる。

L9.2 基本形

L9.2.1 構成要素

container
グリッドレイアウト全体を囲む要素を示す。「display: grid;」（block 属性）または「display: inline-grid;」（inline-block 属性）を指定することで、その要素はグリッドレイアウトのコンテナとなる。
item
コンテナの子要素。
line
グリッドレイアウトを分ける垂直及び水平の線を示す。
track
cell
area

L9.3.2 grid-template-rows（行方向のサイズ・高さ）

grid-template-rows: ライン名 高さ;

L9.4 grid アイテム（子要素）に指定可能なプロパティ

L9.4.1 grid-row-start/end / grid-column-start/end（配置）

-本日のアジェンダ-

1限目
学科 CSS基礎⑤
リスト装飾プロパティについて

2限目
学科 CSS基礎⑤
画像の配置とトリミングについて

3限目
学科 CSS基礎⑤
バックグラウンド設定プロパティについて

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

5限目
学科 CSS基礎⑤
過去の訓練の復習

本日のテーマ

画像を使いこなしましょう

リスト装飾プロパティについて

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

参考サイト

リストや表について

リスト項目やテーブル（表）のHTMLのタグに対して、それぞれのCSSがあります。文法と見た目の特徴に合わせて上手に使っていきましょう。

サンプルファイル（ CSSの記述【リスト】）

サンプルファイル（ CSSの記述【表】）

参考サイト

画像の配置とトリミングについて

object-fitプロパティ

参考サイト

バックグラウンド設定プロパティについて

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

参考サイト

本日の課題①

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

本日の課題②

過去の訓練の復習として訓練内容を「投稿ページ」にまとめてください。
投稿日は、該当する訓練の日時にしてください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。

学科 CSS基礎⑤ | DEAUアカデミー WEBデザイナー養成科（短時間）A教室