-本日のアジェンダ-
1限目
学科 HTML基礎⑥
CSSの基本構造について
2限目
学科 HTML基礎⑥
ボックスモデルの構造と表示ルールについて
3限目
学科 HTML基礎⑥
Chrome検証ツールについて
4限目
学科 HTML基礎⑥
CSSのまとめ
5限目
学科 HTML基礎⑥
過去の訓練の復習
本日のテーマ
CSSの基本構造を理解しましょう
CSSとは？
Cascading Style Sheetsは、HTMLやXMLの要素をどのように修飾するかを指示する仕様の一つで、World Wide Web Consortium がとりまとめ勧告する。文書の構造と体裁を分離させるという理念を実現するために提唱されたスタイルシートの具体的な仕様の一つ。 ウィキペディア
ワンポイントアドバイス
CSSとHTMLの両方を駆使してWebサイトを構築していきますが、HTMLとCSSは開発元が異なります。単純に密接な関係なのに記述ルールと役割が異なります。
まずはしっかりとルールの違いに気を付けて学んでいきましょう。
CSSの記述場所について
CSSの記述場所は、以下の種類があります。保守性も考慮して適切な場所に記述してください。
- HTMLファイルとは別のファイル（CSSファイル）に記述
- HTMLファイル内に記述
- HTMLタグ内にインラインで記述
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のコメントアウトは、プログラムを実行させない。
言語の特徴で意味が異なるので注意しましょう。
参考サイト
ボックスモデルについて
英語から翻訳-Web 開発では、CSS ボックス モデルは、HTML 要素がブラウザー エンジンでどのようにモデル化され、それらの HTML 要素のサイズが CSS プロパティからどのように導出されるかを指します。これは、HTML Web ページを構成するための基本的な概念です。 ウィキペディア（英語)
ボックスモデルとは HTMLのすべての要素は高さ、幅を持った四角形の中心にコンテンツ（文章、画像等）が入っています。 … ボックスモデルは、コンテンツを中心に4つの要素（コンテンツ, border, magrin, padding)で構成されています。
参考サイト
width と height について
単純にボックスに幅と高さを持たせるタグになります。ただし、幅と高さが持てるのは、ブロックレベル要素になります。
また、Webサイトの性質上細かなルールがいくつも存在します。
まずはしっかりとボックスモデルの基礎となるという事を意識しておきましょう。
ワンポイントアドバイス
幅（width）については、ある程度指定した数値が反映されますが、高さ（height）の指定については、複雑なルールがあります。高さ（height）は、基本ニュートラルに設定し、やむを得ない場合のみ絶対値を指定すると覚えておくと、よいかもしれません。
参考サイト
border と padding と margin について
要素の中身（内容）があり、そのまわりの余白がpaddingです。 そのまわりにはborder（線）があり、それより外側の余白がmarginです。 … この図のようなCSSの余白の考え方はボックスモデルと呼ばれます。 なお、要素に対してwidthとheightの値を指定した場合には、要素の中身の部分の大きさが変わります。
ワンポイントアドバイス
CSSで最も理解度が求められるタグが「border」「padding」「margin」です。CSSの理解の最重要ポイントになりますので、しっかりと理解と確認をしておきましょう。また、役割を分けるのも制作のコツです。
borderは、罫線の装飾
paddingは、内側の余白
marginは、ボックスとボックスとの距離
というように、役割を明確にしておきましょう。
参考サイト
デベロッパーツール（Chrome検証ツール）について
デベロッパーツールはGoogle Chromeに標準で搭載されているデバッグツールで、WebサイトのHTML構成や表示スピード、通信状況などを確認できます。 特別なツールやプログラムを使わずブラウザのみで手軽に利用でき、エンジニアの私もWebサービスの開発やテスト、デザインのチェックを行うときに頻繁に使っています。
参考サイト
ワンポイントアドバイス
ソースコードは実際に記述したコードの内容で、デベロッパーツールはブラウジングされた内容として出力されます。コードの誤り等を見つけるのに便利ですので、しっかり使いこないして
本日の課題①
WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。
本日の課題②
過去の訓練の復習として訓練内容を「投稿ページ」にまとめてください。
投稿日は、該当する訓練の日時にしてください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。