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

本日の課題②

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

学科 CSS基礎⑤

-本日のアジェンダ-

1限目
学科 CSS基礎⑤
positionについて

2限目
学科 CSS基礎⑤
displayの種類について

3限目
学科 CSS基礎⑤
overflow について

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

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

本日のテーマ

配置 について

positionについて

positionについては、使い方を誤るとややこしくなりますので、基本的な3つの使い方と使い分けをしっかりと覚えておきましょう。

  1. position:relative; (相対位置)
  2. position:absolute; (絶対位置)
  3. position:fixed; (固定位置)

サンプルページ(CSSの記述【配置】)

サンプルファイル(positionの基本の使い方)

サンプルファイル(positionの使い方)

ワンポイントアドバイス

position タグは、コーディングをする時に設計を複雑にしてしまいます。計画的に行うか、最後に行うなどして工夫すると良いでしょう。

参考サイト

displayについて

displayタグを使う事で、様々なレイアウトを可能にします。まずはブロックレベル要素とインライン要素の違いと特徴をしっかりと確認しておきましょう。

サンプルファイル( displayの種類について )

参考サイト

overflow について

overflowは、これまでのタグでも注意は必要でしたが、特に気を付ける事としてブラウザ依存する(ブラウザ毎にデザインが異なる)という点に注意しましょう。

サンプルファイル( overflow見本)

参考サイト

本日の課題①

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

本日の課題②

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