学科 HTML基礎⑥（CSS基礎・Chrome 検証ツール）

前回の復習
本日の訓練内容
-本日のアジェンダ-
本日のテーマ
CSSとは？
1. ワンポイントアドバイス
CSSの記述場所について
CSSの記述ルールの基本として
CSSのブラウザ対応について
1. ワンポイントアドバイス
2. 参考サイト
CSSの記述【文字】
1. ワンポイントアドバイス
2. 参考サイト
ショートハンドについて
1. ワンポイントアドバイス
2. 参考サイト
セレクタの得点について
1. ワンポイントアドバイス
  1. 参考サイト
「id」と「class」について
1. ワンポイントアドバイス
  1. 参考サイト
コメントアウトについて
1. ワンポイントアドバイス
2. 参考サイト
ボックスモデルについて
1. 参考サイト
width と height について
1. ワンポイントアドバイス
  1. 参考サイト
border と padding と margin について
1. ワンポイントアドバイス
2. 参考サイト
デベロッパーツール（Chrome検証ツール）について
1. ワンポイントアドバイス
本日の課題①
本日の課題②

前回の復習

納品前にタグチェッカーなどでチェックすることを心掛ける。
検索したときに上位に出ることが必要。検索者は上位2~3ページまでしか見ないと考える。
Google検索にはじかれない正しいタグを使う。
画像の大きさに気を付ける（解像度・トリミング）。ページ読み込み速度も検索評価の対象になる。

本日の訓練内容

予定を変更し、本日はCSS基礎①の講義を行う。

HTML でコンテンツを追加しましょう | HTML-CSS 入門講座 | 情報デザイン工房濱屋

...

Lesson-3 CSSでデザインを始める前に

L3.1 はじめに

L3.1.1 概要

CSSには以下の分類がある。

layout系プロパティ
border系プロパティ
padding系プロパティ
layout関連その他のプロパティ
text系プロパティ
font系プロパティ
list系プロパティ
background系プロパティ
table系プロパティ

L3.2 CSSの基本構造

L3.2.1 CSSの構造（HTML ファイルとは別に記述する場合）

Web サイト内の各ページは基本的に同一のスタイルを使用するためHTMLとは別ファイルにCSSを記述し、各HTMLからリンクすることで管理する。

<link href="CSS ファイルのパス名" rel="stylesheet" type="text/css">

@charset "UTF-8";
    /* 文字コード宣言（UTF-8の場合） */
セレクタ{
    プロパティ:値;
}
    /* セレクタ：スタイル対象を指定　プロパティ：スタイル種別を指定　値：スタイル値を指定 */
/* コメント */
    /* コメント */
p{
    color: red;
}
    /* 対象をタグ名で指定 */
.class-1{
    padding: 10px;
}
    /* 対象をクラス名で指定 */
#id-1{
    margin: 20px;
}
    /* 対象をID名で指定 */

L3.2.2 CSSの構造（HTML ファイル内に記述する場合）

HTMLファイル内にCSSを記述する場合もある。

HTML ファイルのhead タグ内（</head>の直前が良い）に以下の記述を行う。

<style>
    /* CSSの開始 */
セレクタ{
    プロパティ:値;
}
    /* セレクタ：スタイル対象を指定　プロパティ：スタイル種別を指定　値：スタイル値を指定 */
/* コメント */
    /* コメント */
p{
    color: red;
}
    /* 対象をタグ名で指定 */
.class-1{
    padding: 10px;
}
    /* 対象をクラス名で指定 */
#id-1{
    margin: 20px;
}
    /* 対象をID名で指定 */

</style>
    /* CSSの終了 */

L3.2.3 CSSの構造（HTML タグにインラインで記述する場合

HTML タグにインラインで記述するときは、style属性を使用して以下の記述を行う。

<div style="プロパティ: 値;">
<div style="width: 6oopx; height: 400px;">
    <h1 style="font size: 20px;">大見出し</h1>
    <p style="font-"color: #00f;">
        文章・・・・・・<br>
        文章・・・・・・<br>
    </p>
</div>

L3.2.4 注意事項

(1) 可読性について

CSS では基本的に空白や改行は無視されるため、可読性が確保できる空白をとる。

L3.3 ボックスモデル

L3.3.1 ボックスモデルの構造

Web ページのレイアウトをつくるためには領域定義が必要。

領域の定義にはボックスモデルが適用されコンテンツ（content）、パディング（padding）、ボーダー（border）、マージン（margin）を組み合わせて領域が定義される。

(1) content

要素の内容であるコンテンツ（文字・図・写真など）の領域。領域のサイズはwidth とheight で指定する。

(2) padding

要素の内側の余白。

(3) border

要素の枠線。

(4) margin

要素の外側の余白。

(5) 注意事項

padding, border, margin は上下左右を独立して指定することもでき、それぞれのプロパティに-top, -bottom, -right, -leftを付与する。
ボックスのサイズは「ボックスサイズ = content + padding + border + margin」で計算できる。
width プロパティ、height プロパティの指定値は、box-sizing プロパティの指定値により意味が異なる。
- box-sizing: content-box; （初期値）
  width, height プロパティの指定の値= content 領域の値
- box-sizing: border-box;
  width, height プロパティの指定の値= content + padding + border 領域の合計値

L3.3.2 ボックスモデルの表示ルール

ボックスモデルの表示ルールはタグの種類によって異なるが display プロパティを使用することで変更が可能。

	display: inline;	display: inline-block	display: block;
主な用途	文章内	文章内・横並び	レイアウト・サイズ調整
主なタグ	a, strong, span など（テキスト分類）	img など（コンテンツ埋め込み）	h1, p, ul, li, div など（セクション分類）（コンテンツ分類）
並び方	横	横	縦
初期サイズ	内容サイズ	内容サイズ	横は100%、縦は内容
width / height	–	指定可能	指定可能
padding	上下左右*1	上下左右	上下左右
margin	左右のみ	上下左右	上下左右
line-height （行間）	外側にかかる	内側にかかる	内側にかかる
text-align （文字の配置/横）	–	指定可能	指定可能
vertical-align （文字の配置／縦）	指定可能	指定可能	–

*1 余白がとられるが上下の要素の位置には影響しない。

CSSのブラウザ対応について

HTML・CSSのタグにはブラウザによって非対応、スマートフォンでのみ非対応などのものが存在する。

ショートハンドについて

CSSの記述には複数の指示を一括して記述できるショートハンドという書式がある。引継ぎなどで他者が作成したサイトを編集する場合などのために両方を理解しておく必要がある。

セレクタの得点について

セレクタには優先順位があり、点数計算して高得点のものが適用される。

セレクタは記述順に適用されるため、同点の場合は後にあるものが適用される。

style 属性、style 要素、外部ファイルなどによって優先順位が変化する。

Google chrome 検証ツールの活用

【Customize and control Dev tool （右上の3点メニュー）】→【Doc side（検証ツールの配置変更）】で表示を変更することができる。

【左上のカーソルアイコン】でブラウザ表示からコードの位置を検索することができる。

【左上のタブレット・スマートフォンアイコン】で各デバイス上での表示を確認することができる。
【サイズ】タブでデバイスの種類を変更する。

【ソース】タブでHTML・CSSなどのソースを見ることができる。
参考になるサイトのソースをたくさん見ることがセンス向上・上達につながる。

メモ

学科 HTML基礎⑥ | DEAUアカデミー WEBデザイナー養成科（短時間）A教室

-本日のアジェンダ-

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のプロパティにはまとめて記述するための「ショートハンド」という書き方が用意されています。

ワンポイントアドバイス

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サイトの性質上細かなルールがいくつも存在します。
まずはしっかりとボックスモデルの基礎となるという事を意識しておきましょう。

サンプルページ（CSSの記述【配置】）

ワンポイントアドバイス

幅（width）については、ある程度指定した数値が反映されますが、高さ（height）の指定については、複雑なルールがあります。高さ（height）は、基本ニュートラルに設定し、やむを得ない場合のみ絶対値を指定すると覚えておくと、よいかもしれません。

参考サイト

border と padding と margin について

要素の中身（内容）があり、そのまわりの余白がpaddingです。そのまわりにはborder（線）があり、それより外側の余白がmarginです。 … この図のようなCSSの余白の考え方はボックスモデルと呼ばれます。なお、要素に対してwidthとheightの値を指定した場合には、要素の中身の部分の大きさが変わります。

サンプルページ（CSSの記述【ボックス】）

ワンポイントアドバイス

CSSで最も理解度が求められるタグが「border」「padding」「margin」です。CSSの理解の最重要ポイントになりますので、しっかりと理解と確認をしておきましょう。また、役割を分けるのも制作のコツです。
borderは、罫線の装飾
paddingは、内側の余白
marginは、ボックスとボックスとの距離
というように、役割を明確にしておきましょう。

参考サイト

デベロッパーツール（Chrome検証ツール）について

デベロッパーツールはGoogle Chromeに標準で搭載されているデバッグツールで、WebサイトのHTML構成や表示スピード、通信状況などを確認できます。特別なツールやプログラムを使わずブラウザのみで手軽に利用でき、エンジニアの私もWebサービスの開発やテスト、デザインのチェックを行うときに頻繁に使っています。

参考サイト

ワンポイントアドバイス

ソースコードは実際に記述したコードの内容で、デベロッパーツールはブラウジングされた内容として出力されます。コードの誤り等を見つけるのに便利ですので、しっかり使いこないして

本日の課題①

WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。

本日の課題②

過去の訓練の復習として訓練内容を「投稿ページ」にまとめてください。
投稿日は、該当する訓練の日時にしてください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。