-本日のアジェンダ-
1限目
学科 CSS基礎①
CSSの記述【文字】
2限目
学科 CSS基礎①
セレクタの得点について
3限目
学科 CSS基礎①
コメントアウトについて
4限目
学科 CSS基礎①
CSSのまとめ
5限目
学科 CSS基礎①
グラフィックツールの復習
本日のテーマ
「セレクタ」「プロパティ」「値」の基本構造を理解しましょう。
CSSとは？
Cascading Style Sheetsは、HTMLやXMLの要素をどのように修飾するかを指示する仕様の一つで、World Wide Web Consortium がとりまとめ勧告する。文書の構造と体裁を分離させるという理念を実現するために提唱されたスタイルシートの具体的な仕様の一つ。 ウィキペディア
ワンポイントアドバイス
CSSとHTMLの両方を駆使してWebサイトを構築していきますが、HTMLとCSSは開発元が異なります。単純に密接な関係なのに記述ルールと役割が異なります。
まずはしっかりとルールの違いに気を付けて学んでいきましょう。
CSSの記述ルールの基本として
セレクタ｛
プロパティ :値;
｝
※この「 セレクタ」「 プロパティ 」「値」の構成をしっかり意識して使い方を学んでいきましょう。
CSSのブラウザ対応について
HTMLやCSSを学ぶ際に最も気を付けなければならない事は、ブラウザに対応しているかどうかです。ここまでご紹介したHTMLのタグはほぼどのブラウザにも対応したタグです。逆に考えてもらうと、HTMLのタグもCSSのタグもここで学ぶ以上のタグが存在します。
ワンポイントアドバイス
検索などで独自に調べたタグは要注意です！非推奨やブラウザでは非対応ブラウザが存在したり、PCでは使えるがスマートフォンではNGのタグがあります。
特にCSSは、使えないタグは見た目の実装を不可能にします。
まずは、広く使われている、どのブラウザでも対応している基本のタグをしっかりと把握していきましょう。
参考サイト
CSSの記述【文字】
まずは文字の装飾や大きさ位置などを指定するCSSから覚えていきましょう。
文字に関するCSSの特徴は、正しく記述したら必ず見た目が変わります。
もし、変わらない時はHTMLの記述が誤っているなど他に原因があるかもしれません。注意して記述の練習をしていきましょう。
ワンポイントアドバイス
デザインしたサイトの文字情報はSEO対策として出来る限り画像文字にはぜずテキスト文字にするイメージをしっかり持って「どんな事ができるのか？」を確認しておきましょう。
参考サイト
ショートハンドについて
CSSのプロパティにはまとめて記述するための「ショートハンド」という書き方が用意されています。
ワンポイントアドバイス
CSSの記述はショートハンドという短縮して記述できる書き方があります。お仕事で誰かが作成したサイトを編集する時に、両方を理解しておく必要がありますので、しっかりと覚えておきましょう。
参考サイト
セレクタの得点について
はじめに. セレクタには優先順位があり、点数計算して高得点のものが適用されるます。
同点の場合は後にあるもの、更にStyle属性、Style要素、外部ファイルなど、CSSで特につまづく優先順位のルールを正しく理解していきましょう。
ワンポイントアドバイス
セレクタは計算ルールも考えて管理しやすいようにセレクタだけを見て何処をCSSでどの要素をコントロールしているかが解りやすくなるように意識して書くと良いでしょう。
参考サイト
「id」と「class」について
HTMLにスタイルシート(CSS)を適用する方法には、class属性を使う方法と、id属性を使う方法があります。
idはそのページ内で1回のみ、classは複数回使用しても大丈夫です。
また、idとclassの値は自由につけることが出来ますが、命名規則をよく考えて指定しましょう。
ID、Class名の付け方には法則があり、半角英数、-（ハイフン）、_（アンダースコア）の組み合わせで名前をつけます。 どんな名称でも使用できますが、どのような設定なのか、内容が判別しやすい名前にするのがよいでしょう。 大文字と小文字どちらでも利用できますが、基本は小文字で統一します。
ワンポイントアドバイス
企業に提出するポートフォリオサイトなどにWebサイトを提出した場合、特に見られているのが、「id」と「class」です。命名規則とセレクタの管理方法が雑であったり計画性が無かったりするのはマイナス要因しかありませんので注意しましょう。
参考サイト
コメントアウトについて
コメントアウトとは … プログラミングにおける「コメント」とは、プログラムのソースコード上で「実行させない部分」のことです。
ワンポイントアドバイス
HTMLのコメントアウトは、表示させない
CSSのコメントアウトは、プログラムを実行させない
言語の特徴で意味が異なるので注意しましょう。
参考サイト
本日の課題①
wordpressのサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルに「議題」は必ず入れましょう。
本日の課題②
グラフィックデザイン基礎の内容をページにまとめてください。
投稿日は、該当する「学科 グラフィックデザイン基礎」の日時にしてください。
※ページタイトルに「議題」は必ず入れましょう。