学科 CSS基礎④

-本日のアジェンダ-

1限目
学科 CSS基礎④
CSSの記述【疑似クラス・疑似要素】

2限目
学科 CSS基礎④
CSSの記述【リスト】CSSの記述【表】

3限目
学科 CSS基礎④
その他のCSSについて

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

5限目
学科 CSS基礎④
グラフィックツールの復習

本日のテーマ

CSSはその他にもいろいろあります。

疑似クラス・疑似要素 について

擬似クラスとは … 擬似クラスとは指定の要素が特定の状態である場合にスタイルを適用させるセレクタです。 文章構造の範囲外にある情報によってスタイルを変化させることができます。
 擬似要素とは、要素の一部に対してスタイルを適用できる指定方法です。 HTML​の要素を擬似的にCSSで設定するので、コーディングに手を加えることなく装飾を適用することができます。

ワンポイントアドバイス

疑似クラス・疑似要素はここまで学んだ基本的なCSSを更に効果的に使う為の技術です。ここまで学んだ内容を復習しながら使うと良いでしょう。

サンプルファイル( CSSの記述【疑似クラス・疑似要素】)

参考サイト

リスト や 表 について

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

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

サンプルファイル( CSSの記述【表】)

参考サイト

様々なCSSについて

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

ワンポイントアドバイス

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

参考サイト

本日の課題①

wordpressのサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルに「議題」は必ず入れましょう。

本日の課題②

グラフィックデザイン基礎の内容をページにまとめてください。
投稿日は、該当する「学科 グラフィックデザイン基礎」の日時にしてください。
※ページタイトルに「議題」は必ず入れましょう。