さて今回は、CSSを書くために必要な基礎知識を勉強していきます
よっ！ 待ってました！
ちょうどCSSを勉強しようと思ってたんですよ
では、CSSの役割からお話ししましょうか
CSS（CascadingStyleSheets）は、Webページのレイアウトや文字サイズ、背景色など、見た目を装飾するために使用する言語です。
Webページにおいて、HTMLは「文書構造」の記述、CSSは「デザイン」を担当します。役割分担がはっきりすると、コードの管理が簡単になり、Webサイトの運用が効率化できます。
このページで、CSSを学ぶ上で必要な基礎知識や事前知識、書き方を身につけましょう。
簡単にわかるCSSの基礎知識
はじめに、CSSの基礎知識を学びましょうか
ふむふむ。 まぁ、聞こうじゃないか
技術も大事だけど、知識も同じくらい大切ですからね
HTMLとCSSの役割分担
Webページは、HTMLやCSSなどの言語の役割を理解し、構築することがとても重要です。
さて、復習の意味を込めて聞きますが……HTMLの役割はなんでしたか？
なんだっけ？
タグを使って、「こういう文章ですよ」と見出しや段落を決めていくんですよね
そうそう！ それそれ！
マークアップ言語と呼ばれていますね
CSSは、HTMLでマークアップされた文書に、レイアウトや文字サイズ、背景色など、人間に対しての視覚表現を可能にします。CSSは「スタイルシート」と言われます。
CSSでスタイルを指定するメリット
- HTMLに不要なスタイルを記述しないため、コードの見通しがよくなる
- メンテナンス性を向上する
- HTMLファイルを軽量化できる
上記の理由から、CSSは基本的に、HTMLと混在して記述することは推奨されていません。（JavaScriptなどの動的処理を除く）
ファイルの拡張子は「.CSS」、文字コードは「UTF-8」で保存するようにしましょう
CSSには複数のバージョンがある
CSSには、いくつかのバージョンがあります
へぇー、どんな？
CSSの最初のバージョンは、「W3C（Web技術の標準化を行う非営利団体）」によって1996年12月に勧告されました。その後、草案、策定、勧告などのプロセスを経て、現在のバージョン「CSS3」となりました。
- CSS1
- CSS2
- CSS2.1
- CSS3（現在のバージョン）
普段、CSSのバージョンを意識して記述することはありません。ですが、ブラウザよってCSSプロパティの対応状況に差があります。以下のサイトで確認するようにしましょう。
CSS3で可能になった表現
CSS3の主な特徴は、視覚表現やインタラクションが可能になったことです。
- アニメーション・エフェクト
- 背景グラデーション
- 変形
注目すべきはアニメーション表現です。従来、JavaScriptで表現していたアニメーションが、大部分CSSで実装可能になりました。
CSSアニメーションって楽しそうですね！
CSSを書くための事前知識と準備
次に、CSSを書くために必要な事前知識と準備を説明します
書くために、準備がいるんですね
CSSの記述位置
CSSの記述位置は、大きく3つの方法があります。
- HTML内に、<style>タグで記述
- HTMLタグに、style属性で記述
- CSSファイル作成し、HTMLから外部ファイルとして読み込む
この3つの中でどの方法がいちばんいいか、分かりますか？
もちろん、わかりません
③のCSSファイルを作って、HTMLから外部ファイルとして読み込むのがいちばんのおすすめです。では、それぞれの書き方を見ていきましょうか
①：HTML内に、<style>タグで記述
<html>内で<style>を使用することにより、CSSを記述できます。
<html>
<style>
body{
color: red;
}
</style>
</html>②：HTMLタグに、style属性で記述
HTMLタグの、style属性でCSSを直接記述できます。
<p style=”color: red;”>文字色「赤」にする。</p>紹介しておいてアレですけど……基本的にこの2つの方法は推奨されていません。
えっ、そうなの？
HTMLの文書構造にCSSの装飾が混在し、コードの見通しが悪くなるからです。ただし、JavaScriptで動的にCSSを追加する場合があるので、知識として覚えておきましょう。
③：CSSファイル作成し、HTMLから外部ファイルとして読み込む
今から紹介するのが、おすすめのCSSを書く方法です。よく覚えてくださいね
HTML<head>内で<link>タグを使い、CSSファイルを読み込みます。特別な理由がない場合はこの方法を使用します。
HTML（index.html）
<!doctype html>
<html>
<head>
<link rel=”stylesheet” href=”style.css”><!– CSSファイルの読み込み –>
</head>
<body>
<p>文字色「赤」にする</p>
</body>
</html>CSS（style.css）
p{
color: red;
}ブラウザのデフォルトCSSとは？
WebブラウザはHTMLのタグ要素に対し、CSS初期値が設定されています。「デフォルトCSS」と言われ、各ブラウザによって初期値は異なります。
デフォルトCSSの影響で、各ブラウザで表示に差が生じるため、「リセットCSS」を用いてCSS初期値を打ち消しましょう。
代表的なブラウザは、「Google Chrome」「Firefox」「Microsoft Edge」「Internet Explorer」「Safari」です。
リセットCSSを行おう
「デフォルトCSS」の初期値を打ち消す為には、「リセットCSS」と言われる外部ファイルの読み込みが一般的です。
「リセットCSS」は総称です。種類はいっぱいあります
リセットCSSは、オープンソースで公開されているファイルを使います。種類があり特徴もさまざまです。Webサイトの構築に合わせて選択してください。
代表的な「リセットCSS」を2つ紹介します。
CSSの書き方
では、ここからはCSSの書き方を学んでいきましょう
CSSの基本形
CSSの記述は、以下の3つの要素で成り立っています。基本的な書き方と名称を覚えていきましょう。
- セレクタ（何の）
- プロパティ（何を）
- 値（どのように、どのくらい変化させるか）
h1{
color: red;
}セレクタを先頭にして、「 { （波括弧）」で挟んだ中に、プロパティと値を記述します。プロパティの終わりには「:（コロン）」、値の終わりには「;（セミコロン）」を書きます。
HTMLの見出しタグ<h1>（セレクタ）に対し、color（プロパティ：文字色）で、red（値：赤）にしてくださいと指定しています
なるほど！指定したHTMLに、命令を与えていくんですね
改行ってなんで入れてるの？
猫田さん、いい質問ですね！「 { （波括弧）」で改行するのは、コードの見通しがよくなるからです。作法として覚えておきましょう
見た目の問題か……
セレクタ（何の）
セレクタは、大きく下記にように分かれており、多くの種類と組み合わせが存在します。今回は、「単体セレクタ」を解説しますね。
- 単体セレクタ
- 擬似クラス
- 構造的擬似クラス
- 擬似要素
例えば、以下のような<h1>見出しがあるとします。
HTML
<h1 id=”heading” class=”heading”>h1見出し</h1>CSS
/* HTMLタグセレクタ */
h1{
color: red;
}
/*
idセレクタ
HTMLのid属性（id=”heading”）で要素を選択します。「#（シャープ）」を先頭にして記述します。
*/
#heading{
color: red;
}
/*
classセレクタ
HTMLのclass属性（class=”heading”）で要素を選択します。「.（ドット）」を先頭にして記述します。
*/
.heading{
color: red;
}CSSは、「/*」で囲うことで、コメントアウトすることができます。コメントアウトは、自分以外の作業者へ、CSSの編集履歴や詳細を伝える時などに使用します。1行のコメントアウトであれば「//（スラッシュ）」2本で記述できます
誰が見てもわかるように書くことが、大切なんだなぁ
セレクタは、複数の要素を指定することや、HTMLの子要素に対しても指定できます。
//<body>の子要素である<h1>を指定する場合は、半角スペースを空けます。
body h1{
color: red;
}
//<body>と<h1>を指定する場合は、「,（カンマ）」で区切ります。
body,
h1{
color: red;
}- より限定的で詳細なセレクタが優先される
- 後からの指定がより優先される
- 「!important」が最優先される
プロパティ（何を）
プロパティは、セレクタで指定したHTML要素に対し、装飾の対象を指定します。
CSS
h1{
color: white;
font-size: 24px;
background-color: gray;
padding: 10px;
border-left: solid 10px #000;
}上記は、HTML見出しタグ<h1>に対し、以下の装飾の対象を指定しています。
- color（文字色）
- font-size（フォントサイズ）
- background-color（背景色）
- padding（内側の余白）
- border-left（左側の罫線）
プロパティの種類は大きく分けて、以下のようなカテゴリーが存在します。
- 色と背景、囲み線
- ボックス
- フォント
- テキスト
- 段組みとフレキシブルボックス
- 変形・遷移・アニメーション
テキストや色、レイアウトに関するプロパティはよく使うので、優先して覚えるといいですよ
すべてのCSSプロパティを覚える必要はありません。よく使うプロパティに絞って覚えていきましょう。
値（どのように、どのくらい変化させるか）
プロパティに対して、どのように変化させるか、値となる数値やキーワードを指定します。
CSS
h1{
color: white;
font-size: 24px;
background-color: gray;
padding: 10px;
border-left: solid 10px #000;
}CSSで指定できる値は、以下のような種類です。
- キーワード
- 長さのサイズ値
- パーセント値
- 数値
- 角度
- 時間
- URL
- 色
プロパティによって、指定できる値は違います。CSSのリファレンスで確認して使用しましょう。
装飾を確認してみよう
では、今まで書いてきたCSSを、Webブラウザで確認してみましょう。 簡単に表示確認できるツールを紹介しますね
以下のURL「CODEPEN」にアクセスし、HTMLとCSSをコピーアンドペーストしましょう。
HTML
<h1 id=”heading” class=”heading”>h1見出し</h1>CSS
h1{
color: white;
font-size: 24px;
background-color: gray;
padding: 10px;
border-left: solid 10px #000;
}うぉおおおおおおお！ なんか豪華になってる！
CSSの基礎知識：まとめ
さて……というわけで、CSSの基礎知識を今回は学びました
本格的になってきましたね
なってきた！ なってきた！
CSSは事前知識がなくても書けますが、冒頭に解説した「HTMLとCSS」の役割を正しく理解しないまま記述してしまうと、HTMLが見通しの悪いコードになってしまいます。
見通しの悪いコードは修正コストや運用コストの負担になり、他の作業者からも嫌がられるので、Web制作者であれば理解は必須です。
CSSでWebページの装飾ができるようになると、Web制作が楽しくなります。楽しみながらCSSを学んでくださいね。
よーし、次いってみよー