月: 2023年11月

学科 CSS基礎⑥【オンライン】

-本日のアジェンダ-

1限目
学科 CSS基礎⑥
ボックスモデルについて

2限目
学科 CSS基礎⑥
ボックスモデルについて

3限目
学科 CSS基礎⑥
レスポンシブWEBデザインについて

4限目
学科 CSS基礎⑥
レスポンシブWEBデザインについて

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

本日のテーマ

Box modelについて（レスポンシブWEBデザイン）

Box modelについて（RWD）

【資料】

カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/

下記のファイルをダウンロードしましょう。
「マルチデバイス対応の教科書①.pdf」　

【動画】

RWD 対応のサイトについて

  • 幅広デザインでの Web ページ作成
  • viewport 定義の指定
  • 横幅変動時のコンテンツ幅を設定
  • Media Querie でデザインを整える
  • 画面サイズに合わせた表示部品の導入

本日の課題

本日学んだ内容を復習して整理しておきましょう。
ポートフォリオサイトの投稿ページ作成が出来る方は投稿ページにまとめておくと良いです。

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

-本日のアジェンダ-

1限目
学科 CSS基礎⑤
練習問題の説明

2限目
学科 CSS基礎⑤
Webページ運用・作成の困った問題

3限目
学科 CSS基礎⑤
練習問題の解説

4限目
学科 CSS基礎⑤
擬似クラスと擬似要素について

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

本日のテーマ

レイアウトデザイン練習問題④（Webページ運用・作成の困った問題）

練習問題：Webページ運用・作成の困った問題

【資料】

カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/

下記のファイルをダウンロードしましょう。
「レイアウトデザイン 練習問題④.zip」　

【動画】

擬似クラス系セレクタ

  • link 擬似クラス（未訪問リンクスタイル）
  • visited 擬似クラス（訪問済リンクスタイル）
  • hover 擬似クラス（オンカーソルスタイル）
  • active 擬似クラス（アクティブスタイル）
  • first-child/last-child 擬似クラス（先頭・最終の子要素指定）
  • nth-child 擬似クラス（n 番目の子要素指定）
  • nth-of-type 擬似クラス（同一のセレクタを持つ n 番目の子要素指定）
  • not 擬似クラス（指定値以外の要素指定）

擬似要素系セレクタ

  • first-letter 擬似要素（要素の 1 文字目を指定）
  • first-line 擬似要素（要素の 1 行目を指定）
  • before/after 擬似要素（要素の直前・直後にコンテンツの挿入）

本日の課題

本日学んだ内容を復習して整理しておきましょう。
ポートフォリオサイトの投稿ページ作成が出来る方は投稿ページにまとめておくと良いです。

学科 CSS基礎④

-本日のアジェンダ-

1限目
学科 CSS基礎④
レイアウト系のプロパティについて

2限目
学科 CSS基礎④
レイアウト系のプロパティについて

3限目
学科 CSS基礎④
ボーダー／パディング／マージンのプロパティについて

4限目
学科 CSS基礎④
その他のプロパティについて

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

本日のテーマ

Webページを自由に配置できるようになりましょう

レイアウト系プロパティ

  • width プロパティ（内容の幅）
  • max-width プロパティ（幅の最大値）
  • min-width プロパティ（幅の最小値）
  • height プロパティ（内容の高さ）
  • max-height プロパティ（高さの最大値）
  • min-heightプロパティ（高さの最小値）
  • float プロパティ（回り込み）
  • clear プロパティ（回り込みを解除）
  • position/top/left/bottom/right プロパティ（要素の配置方法）
  • z-index プロパティ（重なりの順序方法）
  • display プロパティ（要素の表示方法）
  • overflow プロパティ（ボックスからあふれた内容の処理方法）

ボーダー系プロパティ

  • border-style プロパティ（ボーダースタイル）
  • border-color プロパティ（ボーダー色）
  • border-width プロパティ（ボーダー幅）
  • border プロパティ（ボーダー一括指定）
  • border-top/-bottom/-left/-right プロパティ（ボーダー上下左右一括指定）

パディング系プロパティ

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

マージン系プロパティ

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

その他のプロパティ

  • border-radius プロパティ（ボーダーの丸み）
  • box-shadow プロパティ（ボックスの影）
  • box-sizing プロパティ（ボックスサイズ計算）
  • content プロパティ（挿入コンテンツ）
  • object-fit プロパティ（画像トリミング）
  • object-position プロパティ（画像の配置位置指定）

本日の課題

本日学んだ内容を復習して整理しておきましょう。
ポートフォリオサイトの投稿ページ作成が出来る方は投稿ページにまとめておくと良いです。

学科 CSS基礎③【オンライン】

-本日のアジェンダ-

1限目
学科 CSS基礎③
レイアウト系のプロパティについて

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

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

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

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

本日のテーマ

レイアウトデザイン練習問題③（レイアウトを定義するCSS）

本日は、レイアウト系のCSSを中心に説明しますが、一部のプロパティと各プロパティの詳細説明は「CSS基礎④」で説明します。

レイアウト系プロパティ

  • width プロパティ（内容の幅）
  • max-width プロパティ（幅の最大値）
  • min-width プロパティ（幅の最小値）
  • height プロパティ（内容の高さ）
  • max-height プロパティ（高さの最大値）
  • min-heightプロパティ（高さの最小値）
  • float プロパティ（回り込み）
  • clear プロパティ（回り込みを解除）
  • position/top/left/bottom/right プロパティ（要素の配置方法）【CSS基礎④で説明】
  • z-index プロパティ（重なりの順序方法）【CSS基礎④で説明】
  • display プロパティ（要素の表示方法）
  • overflow プロパティ（ボックスからあふれた内容の処理方法）

ボーダー系プロパティ【CSS基礎④で説明】

  • border-style プロパティ（ボーダースタイル）
  • border-color プロパティ（ボーダー色）
  • border-width プロパティ（ボーダー幅）
  • border プロパティ（ボーダー一括指定）
  • border-top/-bottom/-left/-right プロパティ（ボーダー上下左右一括指定）

パディング系プロパティ

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

マージン系プロパティ

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

その他のプロパティ【CSS基礎④で説明】

  • border-radius プロパティ（ボーダーの丸み）
  • box-shadow プロパティ（ボックスの影）
  • box-sizing プロパティ（ボックスサイズ計算）
  • content プロパティ（挿入コンテンツ）
  • object-fit プロパティ（画像トリミング）
  • object-position プロパティ（画像の配置位置指定）

練習問題：レイアウトを定義するCSS

【資料】

カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/

下記のファイルをダウンロードしましょう。
「レイアウトデザイン 練習問題③.zip」　

【動画】

本日の課題

本日学んだ内容を復習して整理しておきましょう。
ポートフォリオサイトの投稿ページ作成が出来る方は投稿ページにまとめておくと良いです。