-本日のアジェンダ-
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の記述はショートハンドという短縮して記述できる書き方があります。お仕事で誰かが作成したサイトを編集する時に、両方を理解しておく必要がありますので、しっかりと覚えておきましょう。
参考サイト
本日の課題①
wordpressのサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルに「議題」は必ず入れましょう。
本日の課題②
グラフィックデザイン基礎の内容をページにまとめてください。
投稿日は、該当する「学科 グラフィックデザイン基礎」の日時にしてください。
※ページタイトルに「議題」は必ず入れましょう。