「CSSってどんな言語？」
「CSSが使えるとどんなメリットがあるの？」
Web制作やプログラミングについて学び始めた人は、このような疑問を感じているかと思います。
実は、CSSはWeb制作に欠かせない大切な言語なのです。
しかもプログラミング初心者にもおすすめな言語なので、ぜひ勉強することをおすすめします。
この記事では、CSSの基本知識や使い方などについて、わかりやすく解説します。
この記事を読んで、CSSの基本を理解していきましょう。
記事のもくじ
CSSとはどんな言語？
CSSとはCascading Style Sheets(カスケーディング・スタイル・シート）の略で、Webページをデザインするための言語です。
プログラミングにおいてはCSSと一緒にHTMLも勉強されることが多いですが、Web制作においてはHTMLとCSSは両方とも欠かせません。
HTMLはWebページの構造を作る言語ですが、CSSはHTMLによって作られた構造の見た目を整える（＝スタイルを整える）役割があります。
ちなみに、厳密に言えばCSSはプログラミング言語ではなく、スタイルシート言語です。
プログラミング言語は計算などの動作処理を行うものですが、CSSはあくまでスタイルを整える言語なので、スタイルシート言語と呼ばれています。
CSSでできることって？
具体的にCSSは、文字の大きさや色の指定、枠線の追加、テキストや画像の配置などができます。
もちろんHTMLだけでもWebページの制作は可能ですが、CSSも用いることによって、よりデザイン性のあるWebページができあがるのです。
ここで、CSSのWebページ制作における重要性を感じていただくためにも、HTMLだけ使ったWebページとHTMLとCSSを使ったWebページの違いを見てみましょう。
まずは、HTMLだけを使ったWebページです。
HTMLだけだと、色や画像の配置ができないので、見栄えに限界があります。
しかし、CSSを適用したら以下のようなデザインになります。
フォントの変更、テキストの拡大、アンダーラインの設定、テキストや画像の配置が行えるので、HTMLだけのページよりも見栄えが良くなりました。
このように、Webページ制作においてはHTMLのみならずCSSも必要なのです。
HTMLとCSSを一通りマスターすれば、デザイン性の高いWebページを作れるようになります。
CSSは外部ファイルに書くのが基本！
CSSを記述する場所は、以下の3通りです。
- styleタグ
- インライン
- 外部ファイル
しかし基本的にCSSは、HTMLとは別の外部ファイルに記述します。
それぞれの書き方はどのように違うのか、どうして外部ファイルに書く方が基本なのかを見ていきましょう。
styleタグに書く場合
styleタグは、HTMLのheadタグの中に記述し、styleタグの中にCSSをどのように適用したいかを記述していきます。
例えば見出しのh2タグの背景色を水色にしたい場合のコードは、以下の通りです。
今回の場合「h2（見出し）タグの背景色を水色にする」というCSSのコードを書きます。
以下のように、見出しの背景色が水色になりました。
しかしstyleタグにCSSを記述する場合、該当するHTMLにその都度コードを書く必要があります。
もし「他のHTMLの見出しも水色の背景にしたい！」という場合、全てのHTMLページに、見出しの背景色を水色にするコードを書かなければなりません。
Webサイトを1ページ分だけ制作するなら、styleタグにCSSを記述する方法でも大丈夫です。
しかし複数のページがあるWebサイトを制作する場合、styleタグに記述する方法は余計な手間がかかってしまいます。
インラインに書く場合
インラインにCSSを書く場合、HTML内の該当するタグの中に直接書き込みます。
では今回はインラインに書くやり方で、見出しの文字の色を赤色にしてみましょう。
インラインにCSSを記述する場合、コードは以下の通りです。
今回の場合「h2（見出し）タグの文字色を赤色にする」というCSSのコードを書きます。
すると、Webページの見た目は以下の通りになります。
見出しの文字色が赤色に変わりました。
しかしインラインにCSSを記述する方法も、CSSを直接書いた箇所にしかCSSが適用されません。
したがって、制作したいWebサイト内に複数のページを用意する場合、インラインに書く方法は不向きです。
外部ファイルに書く場合
外部ファイルに書きたい場合、HTMLファイルとは別のファイルを用意して、そのファイルにCSSのコードを書き込みます。
そしてHTMLファイルのheadタグ内で、CSSファイルを読み込むためのコードを記述します。
上記の画像のように、linkタグを設置し、href内に該当するCSSファイルのパスを指定します。
では今回は、外部ファイルに記述する方法で、本文のテキストを紫色にしてみましょう。
変更前はこの通りですが、外部のCSSファイルに以下のコードを記述します。
すると、本文のテキスト（pタグのテキスト）が紫色に変わりました。
外部ファイルにCSSを記述する方法は「styleタグに書く方法」「インラインに書く方法」とは異なり、複数のページにCSSを同時に適用できるというメリットがあります。
Web制作では同じサイト内に複数のページを用意する場合も多いですが、その際に外部ファイルにCSSを記述する方法を使えば、効率よくWebページを制作できます。
したがって、Web制作においてはCSSを外部ファイルに記述する方法が基本的なのです。
HTMLで外部ファイルを読み込む方法
上で触れた通り、HTMLで外部ファイルを読み込む場合は、headタグ内でlinkタグを用いてCSSファイルを指定する必要があります。
linkタグでCSSファイルを指定する際は、
<link rel=”stylesheet” href=”CSSファイルのパス”>
という書き方で書きましょう。
そしてCSSファイルのパスは、相対パスと呼ばれるパスを書くのが基本です。
現在のファイルから、指定したいファイルまでのルートを指し示したもの。
今回の場合、HTMLファイルからCSSファイルを読み込みたいので「HTMLファイル→CSSファイル」を指し示すパスを記述しましょう。
相対パスを書く際は、以下のルールに基づいて記述します。
1.同じ階層のファイルを指定する場合
→「ファイル名」or「./ファイル名」
2.下の階層のファイルを指定する場合
→「./フォルダ名/ファイル名」
3.上の階層のファイルを指定する場合
→「../ファイル名」
今回は、以下の構造のフォルダ内で「index.html」というHTMLファイルから「style.css」というCSSファイルを読み込んでみます。
フォルダ┳index.html（ファイル）
┣ css（フォルダ）━style.css（ファイル）
┗ img（フォルダ）
この場合index.htmlから見て、style.cssは、同じ階層のcssフォルダ内にあります。
したがって今回は、下の階層のファイルを指定する書き方で書きましょう。
今回の場合だと、書き方は以下の通りになります。
<link rel=”stylesheet” href=”./css/style.css”>
相対パスは、HTMLとCSSの学習で必ず出てくる箇所なので、理解しておきましょう。
CSSの基本的な使い方
ではCSSのコーディングをする場合、どのような書き方をするのかを見ていきましょう。
CSSのコーディングでは、
- セレクタ
- プロパティ
- 値
この3つの部分を指定する形でコーディングします。
それぞれ3つについて見ていきましょう。
セレクタ
セレクタとは、HTMLのどの要素を変えるかを指定する際に使うものです。
例えばpタグを変えたい時はpタグを、h2タグを変えたい時はh2タグを指定します。
セレクタによる要素の指定方法は、以下の通りです。
【タグ（pやh2など）の指定方法】
指定したいタグの名前をそのまま記述します。
【全ての要素への指定方法】
*を記述します。
【特定のクラス（id）への指定方法】
特定のクラスを指定する場合「.クラス名」、特定のidを指定する場合「#id名」と書きます。
【親要素内の子要素への指定方法】
親要素名と子要素名を記述します。
要素名の間には半角スペースを入れましょう。
プロパティ
プロパティとは、指定した要素の「どの部分を変更するか」を決めるものです。
要素を変えたいと言っても、文字の色を変更するか、文字の大きさを変更するかなど、様々あります。
よく使うプロパティは記事の下の方にまとめたので、読んでみてください。
値
値とは「どのように変更するか」を決めるものです。
文字の色を変えたい場合、紫色にしたいのか赤色にしたいのか、様々ありますよね。
値についても下記で紹介していきます。
CSSでよく使うプロパティ（文字編）
ここからはCSSでよく使うプロパティを紹介します。
まずは文字に関するプロパティからです。
今回紹介するプロパティ は、
- font-weight
- font-family
- text-align
- background-color
- color
- line-height
- border
の7つです。
font-weight
font-weightとは、文字の太さを指定するものです。
font-weightを使う場合、値は数値か特定のワードを使って指定します。
- normal…基本の太さ
- bold…太字の太さ
font-family
font-familyとは、文字のフォントを指定するプロパティです。
font-familyは、あらゆるOSに対応するためにも、複数のフォントを指定するのが基本です。
フォントを複数指定しておけば「このフォントはMacに対応していないから表示できない…」という事態を防げます。
font-familyは以下のように書きます。
また、font-familyには以下のルールがあります。
- 左のフォントほど優先順位が高い
- スペースがあるフォント名は「”」か「’」で囲む
- 英語のフォントはなるべく左に書く
- 総称ファミリーフォントを最後に記述する
総称ファミリーフォントとは、指定したフォントがどのOSにも入っていない時に表示させるためのフォントです。
text-align
text-alignとは、文字や画像を横方向に動かすプロパティです。
text-alignで使う主な値は、以下の通りです。
- left…左に寄せる
- center…中央に寄せる
- right…右に寄せる
background-color
background-colorとは、背景色を指定するプロパティです。
background-colorの指定方法は、以下の通りです。
- カラーコード（#6桁の英数字）
- カラーネーム（red、blueなど）
- RGB（rgb（赤色の数値、緑色の数値、青色の数値））
color
colorは、文字の色を指定するプロパティです。
colorも「カラーコード」「カラーネーム」「RGB」のいずれかで指定します。
line-height
line-heightとは、行の高さを指定するプロパティで、値はpxや%で指定します。
例えばline-heightを指定しない場合は、テキストが以下のようになります。
では、line-heightを設定し、値を20pxにしてみましょう。
ご覧の通り、行間に幅が生まれました。
このように、line-heightは行間に余裕を持たせたい時に便利です。
border
borderとは、文字を囲む線を指定するプロパティです。
例えばあるテキストを赤い線で囲む場合、以下の通りになります。
borderの値は、①線の種類②線の太さ③線の色の順番で指定します。
- solid…一本線
- double…二本線
borderに関連する他のプロパティには、アンダーラインを指定するborder-bottomなどがあります。
CSSでよく使うプロパティ（画像編）
Web制作では、画像を挿入することもよくあります。
画像も綺麗に配置できるよう、画像に関するプロパティについても知っておきましょう。
今回紹介するプロパティは以下の通りです。
- background-image
- width、height
それぞれ見ていきましょう。
background-image
background-imageとは、背景の画像を指定するプロパティです。
pタグやh2タグなど、個別のタグにもbackground-imageを設定できます。
このままだと背景がオレンジですが、オレンジ色の背景の代わりにbackground-imageを指定してみます。
今回は、水色のグラデーション写真を背景にしてみます。
background-imageは「background-image:url（画像のパス）;」と書くのが一般的です。
width、height
widthは、画像の横幅を、heightは画像の高さを指定するプロパティです。
widthもheightも、pxか%で指定して調整できます。
CSSでよく使うプロパティ（レイアウト編）
最後に、Webページをより見やすくレイアウトするためのプロパティを紹介します。
今回紹介するプロパティは、paddingとmarginです。
padding、margin
paddingとは要素の内側の余白を、marginは要素の外側の余白を指定するプロパティです。
paddingとmarginの違いをイラストで表すと、以下の通りです。
paddingで余白を作った場合、paddingの余白内に背景色や背景画像、paddingの境界線にborderを書けますが、marginではそれらができません。
paddingとmarginは、値の書き方が複数あります。
- 上下左右の値を全部同じにする場合 →padding（margin）:余白の幅（pxや%）;
- 上下左右の値を個別で設定したい場合 →padding（margin）:上の余白 右の余白 下の余白 左の余白;
また、paddingの上の部分や下の部分だけ設定したい場合は、padding-topやpadding-bottomなどのプロパティで指定します。
まとめ：CSSの基本をマスターしよう！
今回はCSSの基本知識について紹介しました。
今回の記事に書かれていることをしっかりとマスターすれば、Webページの制作もできるようになります。
まずは学んだことを活かして、簡単なWebページ制作からやってみてはいかがでしょうか？
「これからの時代、プログラミングと英語が必要そう…」 それは、間違いではありません。 あと10〜20年の間に、人間が行う仕事の約半分が機械に奪われると言われています。 そのような未来がきたとき、自分自身、そしてあなたの大切な人を守れますか？ セブ島 IT×英語留学の「Kredo」では、 政府公認ITカリキュラム 大学教授レベルのフィリピン人IT教員 スピーキングに特化した英語クラス 日本人スタッフによる学習サポート などによって、 これからの時代に必要なIT×英語のスキルが 初心者からでも最短で身につきます。 KredoのIT留学で人生を変えてみませんか？
Kredo オンラインキャンプなら
プログラミング×英語を身につけてグローバルに活躍しませんか？
当メディアを運営しているKredoでは、プログラミング × 英語が学べる人気オンラインサービス『Kredoオンラインキャンプ』を運営中です。コロナ禍でもオンラインで、プログラミング×英語を身につけた卒業生は海外企業、外資系企業、グローバル企業への就職を果たしています。コロナ禍の今だからこそ、スキルを身につけ転職の準備をしませんか？
