カテゴリー: 学科 レイアウトデザイン基礎

学科 レイアウトデザイン基礎⑤

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎⑤
デベロッパーツールについて

2限目
学科 レイアウトデザイン基礎⑤
プロパティと値 について

3限目
学科 レイアウトデザイン基礎⑤
課題制作

4限目
学科 レイアウトデザイン基礎⑤
課題制作

5限目
学科 レイアウトデザイン基礎⑤
課題制作

本日のテーマ

後はプロパティと値をひたすら書く

プロパティと値について

プロパティ（property）とは適用するスタイルの種類のことです。 上記の例では色を指定するcolorプロパティの値（value）にblueを指定しています。 CSSでは他にも様々なプロパティが用意されているので、適用するスタイルに応じて使い分けます。
ひとつのセレクタに対して複数のスタイル指定する場合には、スタイル宣言をセミコロン（ ; ）で区切って記述します。 セミコロン（ ; ）は宣言同士の区切り記号なので最後は必要ありませんが、付けても誤りではありません。 後からスタイル宣言を追加したり、スタイル宣言の順序を入れ替える可能性などを考慮して付けておくのが一般的です。

ワンポイントアドバイス

後は、デベロッパーツールでプロパティと値をひたすら書くです。
レイアウトに関するCSSは、HTMLの上から下に対して、影響をもたらす場合があります。（marginとか）デザイン（デザインラフ）の上から作っていくと、変な間違い等の見落としを回避し易いです。

参考サイト

第4回成績考査

9月6日の5限目までに、Webページを提出してください。
サイト内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

http://deau00000.html.xdomain.jp/sample20210817/

学科 レイアウトデザイン基礎④

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎④
セレクタについて

2限目
学科 レイアウトデザイン基礎④
リセットCSSについて

3限目
学科 レイアウトデザイン基礎④
課題制作

4限目
学科 レイアウトデザイン基礎④
課題制作

5限目
学科 レイアウトデザイン基礎④
課題制作

本日のテーマ

セレクタ をしっかり制御しましょう。

セレクタとは？

セレクタ（CSSセレクタ）は、CSSにおいてスタイルを適用する要素を選択するための条件式です。
セレクタ｛ プロパティ :値;｝
このセレクタをコントロールする事を意識しましょう。

サンプルページ（セレクタの得点）

ワンポイントアドバイス

CSSを思い通りにコントロールするには、セレクタの管理・理解をしっかりと行う事がコツです。
プロパティと値は後回しにして、セレクタの得点計算をしっかりと行ってみましょう。また、間違い探しのコツとして、HTMLに合わせて、コードの上から書くのも管理しやすくするコツです。

参考サイト

リセットCSSとは？

リセットCSSとは、ブラウザがデフォルトで持っているCSSを打ち消すCSSです。
各ブラウザは固有のCSSを持っています。（デフォルトのCSSと呼びます。）
このデフォルトのCSSの影響で、Webページをデザインするために自分で書いたCSSが意図しない表示になることがありますので、上手にリセットCSSを活用すると良いでしょう。

ワンポイントアドバイス

リセットCSSは育てていきましょう。サイト制作毎に、また更新やリニューアル毎に案件の運用方針や世の中のトレンドなどに合わせて育てていくと良いでしょう。また、リセットCSSにも流行りがあります。扱う記述は良く調べてから使ってみましょう。

参考サイト

第4回成績考査

9月6日の5限目までに、Webページを提出してください。
サイト内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。