第６回 CSS入門 その１
Webデザイン基礎B/2020｜造形短期大学部｜2020.10.19｜遠隔
情報共有シート｜特設サイト
AGENDA
- 以下名簿が表示されます。ご自身の「出席欄」にチェックをつけて下さい。
情報共有シート - 今回から、CSSのコーディングについて学びます。
- 最後に GitHubへのアップロードを求ています。
以下、LIVE動画をご覧下さい。記事に沿って解説しています。
記録動画の公開は21日（水）までとします。早めの確認をお願いします。
本日のメニュー
はじめに
- 今回から、CSSの書き方について学習します。
- 前回に引き続き、みなさんのお手元にある SampleSite を使って、その中にある style.css を編集しながら学習して下さい。
- 演習の成果は、GitHub 上の SampleSite リポジトリにあるファイルを上書き更新する形で公開していただく前提です。
- みなさんの進捗状況は、受講生専用ページで確認させていただきます。
特設サイト
1. CSSとは
CSS（Cascading Style Sheets）とは、HTMLやXMLで記述された文書の「構造と体裁の分離」を実現する為に提唱された技術仕様（またそれが記述されたファイル）のことです。
文書というものは、タイトル、見出し、本文、箇条書きなど、いくつかの要素に分けることができますが、その場しのぎにフォントや文字サイズを変更していたのでは、まとまりのない書類になってしまいます。そこで、「見出しは12ptでゴシック体」、「本文は10.5ポイントで明朝体」などとルールを決めて、文書全体を通じて共通にルールを適用させるというのが賢いやりかたです。このルール決めのことを「スタイル定義」といいます。
CSSを記述する（つまりスタイルを定義する）ことにより、ページを構成する各要素の位置、文字の種類・サイズ・色、また背景色・背景画像といった、「見た目」に関する細かな設定を、文書本体とは独立したかたちで設定することができます。「スタイルシートを差し替える」ことは「文書の内容はそのままで、見た目を変更する」ということを意味するもので、これが可能になったことで、Webデザインのメンテナンス効率は大幅に向上しました。
2. CSSの３つの書き方
CSSを記述する方法は３つあります。
- 1) HTMLファイルに書かれた各タグの中に直接書く
- 2) HTMLファイルのヘッダー部分にまとめて書く
- 3) HTMLファイルとは独立した別のファイルに書く（ 拡張子は .CSS ）
結論から言うと、3つめが最も推奨される方法です。
以下、それぞれの書き方を紹介しますが、1. と 2. は非推奨です。
2.1. HTMLファイルに書かれた各タグの中に直接書く（非推奨）
以下のように書くと、h1 の文字色が赤、文字サイズが 24px になります。
<h1 style="color: red; font-size:24px; ">HOME</h1>
2.2. HTMLファイルのヘッダー部分にまとめて書く（非推奨）
以下の例では、h1の見出しの背景色が赤になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>SamplePage</title>
<style type="text/css">
<!--
h1 {
background-color : red;
}
-->
</style>
</head>
<body>
<h1>HOME</h1>
<p>
本文
</p>
</body>
</html>
上のソースコードの中では、以下の3行の部分がCSSです。
「h1の部分の背景色を赤にする」という指示が書かれています。
h1 {
background-color : red;
}
2.3. HTMLファイルとは独立した別のファイルに書く（推奨）
これが、もっとも推奨される方法です。
- HTMLとCSSの役割を以下のように明確に区別して、相互に関連付けします。
- HTMLには、文書の構造と内容（タイトル、見出し、本文など）を記述
- CSSには、そのビジュアル（レイアウト、色、サイズなど）を記述
- HTMLとCSS、２つのファイル を連携させてページをレンダリングする
- すべてのページ(HTML)を、原則１つのCSSファイルで制御する
- HTMLファイル側に必要な記述
HTMLの <head> の中に、以下の一行を挿入します。<link rel="stylesheet" href="style.css">
これはCSSファイル style.css をリンクして利用することを意味します。サイトを構成するすべてのHTMLファイルに、同じ記述を加えれば、style.css に書かれたビジュアルが、すべてのページに適用されることになります。
- CSSファイル側の記述
以下のように指示を列挙するかたちで記述します。body { background-color: silver; } #container { width: 800px; margin: auto; background-color: white; }この例では、bodyの背景色がシルバー、コンテナの幅が800px・余白自動・背景白、というかたちで表示されます。
2.4. style.css ファイルの実際
今、みなさんのお手元にある SampleSite の style.css は以下のようになっていると思います（以前の演習において、若干修正されているはずです）。
とりあえず、ざっくりと眺めておいてください。第３節以降で、その文法的な事項について説明します。
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
#container {
width: 84%;
max-width: 1280px;
min-width: 512px;
margin: 0 auto;
}
header {
position:relative;
height: 8rem;
background: #333;
box-shadow: 0 4px 0.3125rem rgba(0,0,0,.3);
}
header h1 {
position: absolute;
top: 3rem;
left: 3rem;
font-size: 2rem;
color: white;
}
nav {
padding: 1rem 3rem ;
background: #333;
}
nav ul {
display: flex;
flex-direction: row;
}
nav ul li {
margin-right: 2rem;
}
nav ul li a {
color: white;
}
main {
display: flex;
flex-direction: row;
}
section {
flex: 3;
padding: 3rem;
background: #EEE;
}
article {
min-height: 8rem;
padding: 1rem;
margin-bottom: 2rem;
background: #FFF;
}
aside {
flex: 1;
padding: 3rem;
background: #DDD;
}
footer {
padding: 2rem 3rem;
text-align: center;
background: #333;
color: white;
}
3. CSSの書式
3.1. 基本フォーマット
CSSでは、「見出し(h1)の・背景色を・赤に」のように、どの部分の・何を・どうするかを列挙します。それぞれセレクタ、プロパティー、値 と言います。記述の基本ルールは以下のとおり。
コロン（：）とセミコロン（；）を間違えないよう注意して下さい。
セレクタ（どの部分の） {
プロパティー（何を） : 値（どうする） ;
プロパティー（何を） : 値（どうする） ;
:
}
ひとつのセレクタに複数の指示を与えることができます。
具体に書くと以下のようなイメージです
h1 {
background-color: red;
color : white;
}
3.2. CSSにおけるコメントアウトについて
/* color: red; */
のように /* と */ で一定範囲を囲むと、コメント扱いとなります。
後で使う可能性のある記述を一時機能停止させたい場合にも使えます。
3.3. 記載の順序
CSSファイル内に記載された事項は、基本的に上から順に処理されていきます。したがって、基本的には「全般的指示から例外的指示へ」「全体から部分へ」「ページの上部から下部へ」を意識して記載します。テーマごとに追加するCSSなどを除いて、基本的に記述が重複しないよう、注意して下さい。
4. セレクタ
4.1. 様々なセレクタ
セレクタは「対象」を特定するキーワードであり、思い通りのデザインを実現するためには、それを正しく把握することがとても重要な技術となります。ページ内の各要素を掴むためのセレクタには以下のようなものがあります。
- 要素タグ名 ｜ 例えば <h2>
例：文字サイズを18pxに設定するCSS h2 { font-size: 18px; } - ID名（任意） ｜ 例えば <div id="contents">
例：背景色を赤にするCSS #contents { background-color: red; } - CLASS名（任意） ｜ 例えば <span class="note">
例：文字を赤にするCSS .note { color: red; }
4.2. セレクタの具体例
- セレクタ＝既存のタグの場合
＜body＞や＜h1＞など、HTMLタグ要素に対してスタイルを定義する場合h1 { background-color : gray; }
- セレクタ＝特定のブロック内のタグの場合
＜nav＞の内部にある＜li＞タグにのみスタイル定義する場合nav li { background-color : gray; }
- セレクタ＝ID要素の場合 CSS側には # を付けて明記
＜div id="block01"＞など、IDに対してスタイル定義する場合#block01 { background-color : gray; }
- セレクタ＝CLASS要素の場合 CSS側には . を付けて明記
＜span class="textStyle01"＞など、クラスに対してスタイル定義する場合.textStyle01 { font-weight : bold; }
4.3. 親要素と子孫要素について
階層構造をもつ文書において要素をセレクトする際には「親要素と子孫要素」という概念を理解することが重要です。外側の要素を親要素、中に囲まれている要素を子孫要素といいます。
<div> ← 親要素
<p> ・・・ </p> ← 子要素
<p> ← 子要素
<span>・・・</span> ← 孫要素
</p>
<p> ・・・ </p> ← 子要素
</div>
5. 色・文字サイズ
5.1. 色指定の記法
- 文字色
color: 色値;
https://developer.mozilla.org/ja/docs/Web/CSS/color
- 背景色
background-color: 色値;
https://developer.mozilla.org/ja/docs/Web/CSS/background-color
5.2. 色の扱いについて
Webサイトの文字や背景の色には、RGB値を16進数で表す16進トリプレット、あるいは、red やgreen といった直接的な名称で指定する X11 Colors を利用して指定します。
- 16進トリプレット
先頭に # を書いて、赤・緑・青の順に、各２桁の計６桁を書く仕様です。
各成分は 00〜FF（0～255） の光度（intensity）で表現され、#000000 は黒、#FFFFFF は白、また例えば、#FF0000 は赤となります。color : #rrggbb;
- X11 Colors
HTML と CSS に準拠したウェブブラウザで一般化している色名が利用できます。右にその一覧があります。＞ X11の色名称color : Maroon; background-color: white;
5.3. 文字サイズの記法
font-size: 値;
https://developer.mozilla.org/ja/docs/Web/CSS/font-size
5.4. サイズの単位について
Webサイト上の大きさを指定するには、画面サイズに対して最も直接的な pxの他に、%、em、rem といった単位が存在します。
- px：画素数で指定。画面のサイズ（例えば、1920x1080）に対して、最も直接的なサイズの指定方法です。
- %：親要素の幅に対する子要素の幅を比率で指定するもの
- em：文字の高さを基準にした単位。1emは1文字分で、環境によって大きさが変化する相対単位です。デフォルトでは 1em=16px となります。
この単位は、親要素に対する比率になるので、同じ1.5emでも親要素の大きさによって実寸が変わるので、混乱する場合が多々あります。
- rem：root+em の略で、ルート要素のフォントサイズを継承します。常にルート要素に対する相対値なので、1.5rem と書けば、それがどこにあっても同じ実寸になります。一般的にはこちらの方が好まれる傾向にあります。
6. 演習｜色・文字サイズの変更
みなさんのお手元にあるSampleSite の中の style.css をエディタで開いて、ページの色彩構成・文字サイズの変更をお試しください。
すでに、第２回の演習で多少の編集体験をしていただいていますが、今回は、記法も含めて学習して下さい。
7. 本日の成果をGitHub にアップロード
- 本日手を加えた最新の データ（index.html と画像を含んだ imagesフォルダ）を 前回作成した リポジトリ（SampleSite ）にアップロード更新して下さい。
- 手順は以下です。
- GitHub で あなたの SampleSite リポジトリを開いてください。
- [File Upload] をクリックして下さい。
- 本日更新した、index.html、imagesフォルダ をドラッグ＆ドロップします
- [Commit Canges] をクリックすると、新しいファイルでリポジトリが更新されます。
- リポジトリが以下のように構成されていれば正解です。
- 特設サイトの以下の部分から、サイトにアクセスして本日更新したWebサイトが閲覧できればOKです。
==GitHub Pages== * https://JaneSmith.github.io/SampleSite <br>
第６回目は、以上をもって終了とします。お疲れ様でした。
第７回は、CSSによるレイアウトの方法について学びます。