日: 2022年7月12日

学科 CSS基礎⑧

-本日のアジェンダ-

1限目
学科 CSS基礎⑧
テーブルの活用について

2限目
学科 CSS基礎⑧
フレックスレイアウトの活用について

3限目
学科 CSS基礎⑧
グリッドレイアウトとアニメーションの概要について

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

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

本日のテーマ

テーブルとフレックスレイアウトを理解しましょう

テーブルの活用について

テーブルは、行と列の組み合わせによるセルに含まれたデータによる二次元の表型式の情報です。テーブルの機能を使用してWebページのレイアウトを作成することもできますが、これは本来の使用法では、ありませんので、レイアウトを作成する場合は、CSSのレイアウト関連機能を使用するようにしてください。

テーブル関連要素

  • table 要素（表全体の定義）
  • caption 要素（主題の定義）
  • tr 要素（1 行範囲の定義）
  • th 要素（見出し項目の定義）
  • td 要素（データ項目の定義）
  • colgroup 要素（列グループの定義）
  • thead 要素（表のヘッダーグループの定義）
  • tbody 要素（表のボディグループの定義）
  • tfoot 要素（表のフッタグループの定義）

テーブル関連プロパティ

  • border-collapse プロパティ（隣接セルの表示方法）
  • border-spacing プロパティ（隣接セルのボーダー間の間隔）

参考サイト

フレックスレイアウトの活用について

フレックスレイアウトは、要素の横並びレイアウトを簡単に作成する機能です。テーブルやfloatを使って横並びのレイアウトを作成していたものが、フレックスレイアウトを使用することで横並びのレイアウトが簡単に作成できるようになります。

Flex コンテナ（親要素）に指定可能なプロパティ

  • display（Flex コンテナ作成）
  • flex-direction（Flex アイテム並び順）
  • flex-wrap（Flex アイテム折り返し）
  • flex-flow（Flex アイテム並び・折り返し一括指定）
  • justify-content（Flex アイテム水平位置）
  • align-items（Flex アイテム垂直位置）
  • align-content（Flex アイテム行の垂直位置）

Flex アイテム（子要素）に指定可能なプロパティ

  • order（Flex アイテム並び順）
  • flex-grow（Flex アイテム伸び率）
  • flex-shrink（Flex アイテム縮み率）
  • flex-basis（Flex アイテムベース幅）
  • flex（Flex アイテム並び順・伸び率・縮み率一括指定）
  • align-self（Flex アイテム垂直位置）

参考サイト

グリッドレイアウトの概要について

グリッドレイアウトは、2次元のレイアウトシステムであり、コンテンツを行と列にレイアウトすることができ、複雑なレイアウトを簡単に作成するための多くの機能があります。グリッドレイアウトは、グリッドセルと呼ばれる表のセルのようなものを組み合わせてレイアウトを作成します。

Grid コンテナ（親要素）に指定可能なプロパティ

  • display（Grid コンテナ作成）
  • grid-template-rows（行方向のサイズ・ライン名）
  • grid-template-columns（列方向のサイズ・ライン名）
  • grid-template-areas（エリア名）
  • grid-template（サイズ・ライン名・エリア名一括指定）
  • row-gap（行間余白）
  • column-gap（列間余白）
  • gap（行間・列間余白一括指定）
  • grid-auto-flow（自動配置方向）
  • grid-auto-rows（自動生成トラック行サイス）
  • grid-auto-columns（自動生成トラック列サイズ）
  • justify-items（Glid アイテム横位置）
  • align-items（Grid アイテム縦位置）
  • align-content（Grid アイテム縦配置位置）

Gridアイテム（子要素）に指定可能なプロパティ

  • grid-row-start/end / grid-column-start/end（配置）
  • grid-row / grid-column（配置位置一括指定）
  • grid-area（配置位置エリア・ライン一括指定）
  • justify-self（Grid アイテム横位置）
  • align-self（Grid アイテム縦位置）
  • order（Grid アイテム配置順）

参考サイト

アニメーションの概要について

CSSアニメーションは、HTMLで書かれている要素をCSSを使用してアニメーションとして表示する機能です。CSSアニメーションを使用することで動きのあるWebページを作成することができます。

transition（適用対象と時間）

  • transition-property（変化の適用対象）
  • transition-duration（変化の時間）
  • transition-delay（変化の遅延時間）
  • transition-timing-function（変化の仕方）
  • transition（適用対象と時間一括指定）

transform（変形する形態）

  • transform（translate）（移動）
  • transform（rotate）（回転）
  • transform（scale）（伸縮）
  • transform（skew）（傾斜）

@keyframes（動きの制御規則）

  • from / to で指定
  • 百分率（%）で指定

animation（アニメーション実施）

  • animation-name（アニメーション名指定）
  • animation-duration（変化の時間）
  • animation-timing-function（変化の仕方）
  • animation-delay（変化の遅延時間）
  • animation-iteration-count（繰り返し回数）
  • animation-direction（再生方向）
  • animation-fill-mode（開始前・終了後スタイル）
  • animation-play-state（再生・停止）
  • animation（アニメーション実施一括指定）

参考サイト

様々なCSSについて

ここまで学んだCSS以外にも様々なCSSがあります。また新しいものも出てきます。ただしブラウザによって使えるタグが異なったり、デバイス依存もあります。OSにも影響もあります。日々変わる業界の動向にアンテナを張っていきましょう。

ワンポイントアドバイス

まずはこれまで学んだCSSをしっかりと覚えてまずは、「知る」次に「使う」そしてお仕事で「使いこなす」を目指しましょう。
コツとしては、「自分なりにまとめる」をしっかりと定期的に行うと良いでしょう。

参考サイト

本日の課題①

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

本日の課題②

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