【初心者向け】CSSの基本知識や使い方を詳しく解説！

「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通りです。

しかし基本的に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ファイルを指定する際は、

という書き方で書きましょう。

そしてCSSファイルのパスは、相対パスと呼ばれるパスを書くのが基本です。

今回の場合、HTMLファイルからCSSファイルを読み込みたいので「HTMLファイル→CSSファイル」を指し示すパスを記述しましょう。

相対パスを書く際は、以下のルールに基づいて記述します。

今回は、以下の構造のフォルダ内で「index.html」というHTMLファイルから「style.css」というCSSファイルを読み込んでみます。

この場合index.htmlから見て、style.cssは、同じ階層のcssフォルダ内にあります。

したがって今回は、下の階層のファイルを指定する書き方で書きましょう。

今回の場合だと、書き方は以下の通りになります。

相対パスは、HTMLとCSSの学習で必ず出てくる箇所なので、理解しておきましょう。

CSSの基本的な使い方

ではCSSのコーディングをする場合、どのような書き方をするのかを見ていきましょう。

CSSのコーディングでは、

この3つの部分を指定する形でコーディングします。

それぞれ3つについて見ていきましょう。

セレクタ

セレクタとは、HTMLのどの要素を変えるかを指定する際に使うものです。

例えばpタグを変えたい時はpタグを、h2タグを変えたい時はh2タグを指定します。

セレクタによる要素の指定方法は、以下の通りです。

【タグ（pやh2など）の指定方法】

指定したいタグの名前をそのまま記述します。

【全ての要素への指定方法】

*を記述します。

【特定のクラス（id）への指定方法】

特定のクラスを指定する場合「.クラス名」、特定のidを指定する場合「#id名」と書きます。

【親要素内の子要素への指定方法】

親要素名と子要素名を記述します。

要素名の間には半角スペースを入れましょう。

プロパティ

プロパティとは、指定した要素の「どの部分を変更するか」を決めるものです。

要素を変えたいと言っても、文字の色を変更するか、文字の大きさを変更するかなど、様々あります。

よく使うプロパティは記事の下の方にまとめたので、読んでみてください。

値

値とは「どのように変更するか」を決めるものです。

文字の色を変えたい場合、紫色にしたいのか赤色にしたいのか、様々ありますよね。

値についても下記で紹介していきます。

CSSでよく使うプロパティ（文字編）

ここからはCSSでよく使うプロパティを紹介します。

まずは文字に関するプロパティからです。

今回紹介するプロパティ は、

の7つです。

font-weight

font-weightとは、文字の太さを指定するものです。

font-weightを使う場合、値は数値か特定のワードを使って指定します。

font-family

font-familyとは、文字のフォントを指定するプロパティです。

font-familyは、あらゆるOSに対応するためにも、複数のフォントを指定するのが基本です。

フォントを複数指定しておけば「このフォントはMacに対応していないから表示できない…」という事態を防げます。

font-familyは以下のように書きます。

また、font-familyには以下のルールがあります。

総称ファミリーフォントとは、指定したフォントがどのOSにも入っていない時に表示させるためのフォントです。

text-align

text-alignとは、文字や画像を横方向に動かすプロパティです。

text-alignで使う主な値は、以下の通りです。

background-color

background-colorとは、背景色を指定するプロパティです。

background-colorの指定方法は、以下の通りです。

color

colorは、文字の色を指定するプロパティです。

colorも「カラーコード」「カラーネーム」「RGB」のいずれかで指定します。

line-height

line-heightとは、行の高さを指定するプロパティで、値はpxや%で指定します。

例えばline-heightを指定しない場合は、テキストが以下のようになります。

では、line-heightを設定し、値を20pxにしてみましょう。

ご覧の通り、行間に幅が生まれました。

このように、line-heightは行間に余裕を持たせたい時に便利です。

border

borderとは、文字を囲む線を指定するプロパティです。

例えばあるテキストを赤い線で囲む場合、以下の通りになります。

borderの値は、①線の種類②線の太さ③線の色の順番で指定します。

borderに関連する他のプロパティには、アンダーラインを指定するborder-bottomなどがあります。

CSSでよく使うプロパティ（画像編）

Web制作では、画像を挿入することもよくあります。

画像も綺麗に配置できるよう、画像に関するプロパティについても知っておきましょう。

今回紹介するプロパティは以下の通りです。

それぞれ見ていきましょう。

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は、値の書き方が複数あります。

まとめ：CSSの基本をマスターしよう！

今回はCSSの基本知識について紹介しました。

今回の記事に書かれていることをしっかりとマスターすれば、Webページの制作もできるようになります。

まずは学んだことを活かして、簡単なWebページ制作からやってみてはいかがでしょうか？

[広告] Kredo オンラインキャンプなら

コロナ禍でこっそりプログラミング×英語を身につけて仕事獲得しませんか？

当メディアを運営しているKredoでは、プログラミング×英語が学べる人気オンラインサービス『Kredoオンラインキャンプ』を運営中です。コロナ禍でも、プログラミング×英語を身につけた卒業生は大企業や人気企業への就職実績も多く、憧れの企業を諦めかけている方にこそ受講して欲しいサービスとなっています。