プログラミングや動画編集の勉強ならCANIT (キャニット)

入門2:【CSSとは?】CSSの基礎知識・事前知識や書き方を徹底解説!

【CSSとは?】CSSの基礎知識・事前知識や書き方を徹底解説! CSS入門
CANIT先生
CANIT先生

さて今回は、CSSを書くために必要な基礎知識を勉強していきます

猫田さん
猫田さん

よっ! 待ってました!

牛山くん
牛山くん

ちょうどCSSを勉強しようと思ってたんですよ

CANIT先生
CANIT先生

では、CSSの役割からお話ししましょうか

CSS(CascadingStyleSheets)は、Webページのレイアウトや文字サイズ、背景色など、見た目を装飾するために使用する言語です。

Webページにおいて、HTMLは「文書構造」の記述、CSSは「デザイン」を担当します。役割分担がはっきりすると、コードの管理が簡単になり、Webサイトの運用が効率化できます。

このページで、CSSを学ぶ上で必要な基礎知識や事前知識、書き方を身につけましょう。

簡単にわかるCSSの基礎知識

CANIT先生
CANIT先生

はじめに、CSSの基礎知識を学びましょうか

猫田さん
猫田さん

ふむふむ。 まぁ、聞こうじゃないか

CANIT先生
CANIT先生

技術も大事だけど、知識も同じくらい大切ですからね

HTMLとCSSの役割分担

Webページは、HTMLやCSSなどの言語の役割を理解し、構築することがとても重要です。

CANIT先生
CANIT先生

さて、復習の意味を込めて聞きますが……HTMLの役割はなんでしたか?

猫田さん
猫田さん

なんだっけ?

牛山くん
牛山くん

タグを使って、「こういう文章ですよ」と見出しや段落を決めていくんですよね

猫田さん
猫田さん

そうそう! それそれ!

CANIT先生
CANIT先生

マークアップ言語と呼ばれていますね

CSSは、HTMLでマークアップされた文書に、レイアウトや文字サイズ、背景色など、人間に対しての視覚表現を可能にします。CSSは「スタイルシート」と言われます。

CSSでスタイルを指定するメリット

  • HTMLに不要なスタイルを記述しないため、コードの見通しがよくなる
  • メンテナンス性を向上する
  • HTMLファイルを軽量化できる

上記の理由から、CSSは基本的に、HTMLと混在して記述することは推奨されていません。(JavaScriptなどの動的処理を除く)

CANIT先生
CANIT先生

ファイルの拡張子は「.CSS」、文字コードは「UTF-8」で保存するようにしましょう

CSSには複数のバージョンがある

CANIT先生
CANIT先生

CSSには、いくつかのバージョンがあります

猫田さん
猫田さん

へぇー、どんな?

CSSの最初のバージョンは、「W3C(Web技術の標準化を行う非営利団体)」によって1996年12月に勧告されました。その後、草案、策定、勧告などのプロセスを経て、現在のバージョン「CSS3」となりました。

  • CSS1
  • CSS2
  • CSS2.1
  • CSS3(現在のバージョン)

普段、CSSのバージョンを意識して記述することはありません。ですが、ブラウザよってCSSプロパティの対応状況に差があります。以下のサイトで確認するようにしましょう。

Can I use... Support tables for HTML5, CSS3, etc
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

CSS3で可能になった表現

CSS3の主な特徴は、視覚表現やインタラクションが可能になったことです。

  • アニメーション・エフェクト
  • 背景グラデーション
  • 変形

注目すべきはアニメーション表現です。従来、JavaScriptで表現していたアニメーションが、大部分CSSで実装可能になりました

牛山くん
牛山くん

CSSアニメーションって楽しそうですね!

CSSを書くための事前知識と準備

CANIT先生
CANIT先生

次に、CSSを書くために必要な事前知識と準備を説明します

牛山くん
牛山くん

書くために、準備がいるんですね

CSSの記述位置

CSSの記述位置は、大きく3つの方法があります。

  1. HTML内に、<style>タグで記述
  2. HTMLタグに、style属性で記述
  3. CSSファイル作成し、HTMLから外部ファイルとして読み込む
CANIT先生
CANIT先生

この3つの中でどの方法がいちばんいいか、分かりますか?

猫田さん
猫田さん

もちろん、わかりません

CANIT先生
CANIT先生

③のCSSファイルを作って、HTMLから外部ファイルとして読み込むのがいちばんのおすすめです。では、それぞれの書き方を見ていきましょうか

①:HTML内に、<style>タグで記述

<html>内で<style>を使用することにより、CSSを記述できます。

<html>
<style>
body{
 color: red;
}
</style>
</html>

②:HTMLタグに、style属性で記述

HTMLタグの、style属性でCSSを直接記述できます。

<p style=”color: red;”>文字色「赤」にする。</p>
CANIT先生
CANIT先生

紹介しておいてアレですけど……基本的にこの2つの方法は推奨されていません。

猫田さん
猫田さん

えっ、そうなの?

HTMLの文書構造にCSSの装飾が混在し、コードの見通しが悪くなるからです。ただし、JavaScriptで動的にCSSを追加する場合があるので、知識として覚えておきましょう。

③:CSSファイル作成し、HTMLから外部ファイルとして読み込む

CANIT先生
CANIT先生

今から紹介するのが、おすすめの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」と言われる外部ファイルの読み込みが一般的です。

CANIT先生
CANIT先生

「リセットCSS」は総称です。種類はいっぱいあります

リセットCSSは、オープンソースで公開されているファイルを使います。種類があり特徴もさまざまです。Webサイトの構築に合わせて選択してください。

代表的な「リセットCSS」を2つ紹介します。

CSSの書き方

CANIT先生
CANIT先生

では、ここからはCSSの書き方を学んでいきましょう

CSSの基本形

CSSの記述は、以下の3つの要素で成り立っています。基本的な書き方と名称を覚えていきましょう。

  • セレクタ(何の)
  • プロパティ(何を)
  • 値(どのように、どのくらい変化させるか)
h1{
 color: red;
}

セレクタを先頭にして、「 { (波括弧)」で挟んだ中に、プロパティと値を記述します。プロパティの終わりには「:(コロン)」、値の終わりには「;(セミコロン)」を書きます。

CANIT先生
CANIT先生

HTMLの見出しタグ<h1>(セレクタ)に対し、color(プロパティ:文字色)で、red(値:赤)にしてくださいと指定しています

牛山くん
牛山くん

なるほど!指定したHTMLに、命令を与えていくんですね

猫田さん
猫田さん

改行ってなんで入れてるの?

CANIT先生
CANIT先生

猫田さん、いい質問ですね!「 { (波括弧)」で改行するのは、コードの見通しがよくなるからです。作法として覚えておきましょう

猫田さん
猫田さん

見た目の問題か……

セレクタ(何の)

セレクタは、大きく下記にように分かれており、多くの種類と組み合わせが存在します。今回は、「単体セレクタ」を解説しますね。

  • 単体セレクタ
  • 擬似クラス
  • 構造的擬似クラス
  • 擬似要素

例えば、以下のような<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;
}
CANIT先生
CANIT先生

CSSは、「/*」で囲うことで、コメントアウトすることができます。コメントアウトは、自分以外の作業者へ、CSSの編集履歴や詳細を伝える時などに使用します。1行のコメントアウトであれば「//(スラッシュ)」2本で記述できます

猫田さん
猫田さん

誰が見てもわかるように書くことが、大切なんだなぁ

セレクタは、複数の要素を指定することや、HTMLの子要素に対しても指定できます

//<body>の子要素である<h1>を指定する場合は、半角スペースを空けます。
body h1{
 color: red;
}

//<body>と<h1>を指定する場合は、「,(カンマ)」で区切ります。
body,
h1{
 color: red;
}
CSSは適応される優先順位があります。指定が反映されない時は、以下を確認してみましょう。
  • より限定的で詳細なセレクタが優先される
  • 後からの指定がより優先される
  • 「!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(左側の罫線)

プロパティの種類は大きく分けて、以下のようなカテゴリーが存在します。

  • 色と背景、囲み線
  • ボックス
  • フォント
  • テキスト
  • 段組みとフレキシブルボックス
  • 変形・遷移・アニメーション
CANIT先生
CANIT先生

テキストや色、レイアウトに関するプロパティはよく使うので、優先して覚えるといいですよ

すべてのCSSプロパティを覚える必要はありません。よく使うプロパティに絞って覚えていきましょう。

値(どのように、どのくらい変化させるか)

プロパティに対して、どのように変化させるか、値となる数値やキーワードを指定します。

CSS

h1{
 color: white;
 font-size: 24px;
 background-color: gray;
 padding: 10px;
 border-left: solid 10px #000;
}

CSSで指定できる値は、以下のような種類です。

  • キーワード
  • 長さのサイズ値
  • パーセント値
  • 数値
  • 角度
  • 時間
  • URL

プロパティによって、指定できる値は違います。CSSのリファレンスで確認して使用しましょう。

装飾を確認してみよう

CANIT先生
CANIT先生

では、今まで書いてきたCSSを、Webブラウザで確認してみましょう。 簡単に表示確認できるツールを紹介しますね

以下のURL「CODEPEN」にアクセスし、HTMLとCSSをコピーアンドペーストしましょう。

Attention Required! | Cloudflare

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コードの確認は、Webブラウザからも簡単に確認できます。Webページ上で右クリックし、コンテキストメニューから、「検証」を選択。デベロップツールが開きます。(Google Chrome / macの場合)

CSSの基礎知識:まとめ

パソコン 猫
CANIT先生
CANIT先生

さて……というわけで、CSSの基礎知識を今回は学びました

牛山くん
牛山くん

本格的になってきましたね

猫田さん
猫田さん

なってきた! なってきた!

CSSは事前知識がなくても書けますが、冒頭に解説した「HTMLとCSS」の役割を正しく理解しないまま記述してしまうと、HTMLが見通しの悪いコードになってしまいます。

見通しの悪いコードは修正コストや運用コストの負担になり、他の作業者からも嫌がられるので、Web制作者であれば理解は必須です。

CSSでWebページの装飾ができるようになると、Web制作が楽しくなります。楽しみながらCSSを学んでくださいね。

猫田さん
猫田さん

よーし、次いってみよー

❤内容は役に立ちましたか?皆さまのご意見が励みになります☺
YesNo
手に職をつけてプログラマー転職

そろそろ本気で将来のことを考えなくちゃ……手に職をつけてプログラマーやエンジニアに転職したいなぁ。でも、プログラミングスクールってものすごくたくさんあるし、なんか敷居が高いのよね

これからプログラマーやエンジニアへの転身を目指すあなたに、どのスクールがもっとも適しているのかを紹介します。

CSS入門
【この記事を書いた人】
CANIT 先生

あらゆるプログラミング言語をあやつるフリーの凄腕講師。温和な性格で「わかるまで教えます」がモットー。たまに時間ができると動物の仲間達に、プログラミングを教えることもある。現在の生徒は牛山くんと猫田さん。

CANIT
タイトルとURLをコピーしました