CSSとは？CSSの基本を解説

CSS(Cascadingカスケーディング Styleスタイル Sheetsシート)は、Webページの見た目を指定するものです。

HTMLについては前回解説しましたが、CSSはそのHTMLと組み合わせて使用していきます。
HTMLで骨組みを作り、CSSで外観を作るようなイメージです。

HTMLの勉強をしたらCSSの勉強をすると良いでしょう。

CSSとは

まずCSSって何？って思っている方に向けてCSSとは？といった基本から解説していきます。

CSSとは「Cascadingカスケーディング Styleスタイル Sheetsシート」のことで、スタイルシートとも呼ばれています。

HTMLとは簡単に言うとコンピュータが解るようにマークアップ(文章構成の指示)する為の言語でした。
対してCSSは、HTMLで作られた文書構造にスタイル(デザイン)を加えて見た目を整える為の言語です。

HTMLだけでもブラウザに表示できますが、レイアウトやテキストの装飾などのデザインをしてあげることで、綺麗で、見やすいWebページを作ることができます。

一般的にWebページは、HTMLとCSSを組み合わせ+αで作られています。
+αの部分はまたの機会に詳しく解説させていただきます。

CSSはHTMLファイル内に記述する方法と、外部ファイルを作成して読み込ませる方法があります。
基本的には外部ファイルを作成して読み込ませる方法を使用します。

CSSの作り方

CSSはHTMLと同じくCSSファイルを作成し、HTMLファイルでCSSファイルを読み込んで使用します。

基本的にCSSを記述する時も、HTMLと同様にテキストエディタを使って開発していきます。

おすすめのテキストエディタは、マイクロソフト社が開発した「Visual Studio Code（ヴィジュアル スタジオ コード）」です。

「Visual Studio Code（ヴィジュアル スタジオ コード）」 については下の記事で詳しく解説しています。

HTML・CSSの勉強に必要な準備

Web制作には色々な知識やスキルが必要です。その中でもHTMLやCSSのコーディングスキルは最低限身につけておくべきスキルです。HTMLやCSSの勉強の為に使うツールについて解説していきます。

tomonoriblog.com

2021.12.19

CSSファイルを作ろう

では実際にCSSファイルを作ってみましょう。前回の「HTMLファイルを作ろう」の記事で作成した練習用のフォルダーの中に新しくCSSファイルを作成します。
CSSファイルは拡張子を「.css」にします。ファイル名はわかり易いものにしましょう。
今回は「style.css」を作成します。

この「style.css」にCSSを記述してブラウザに表示されたHTMLファイルの見た目を整えていきます。

CSSを読み込もう

「style.css」が出来たら早速CSSを記述していきたいところですが、ただCSSファイルを作成しただけではCSSファイルにCSSを記述しても反映されません。
まずはHTML側でCSSファイルを読み込む必要があります。

HTMLファイルの中のheadタグ内にCSSファイルを読み込むコードを記述します。

<link rel="stylesheet" href="style.css">

linkタグ内のhrefの値がCSSの読み込み処理ですが、HTMLファイルやCSSファイルの配置場所によって変化するので気をつけてください。
今回はHTMLファイルとCSSファイルが同じディレクトリ(階層)に配置してあるのでhrefの値は「style.css」になります。

例えば、HTMLファイルと同じディレクトリにCSSフォルダを作ってその中に「style.css」を配置した場合は以下のような記述になります。

<link rel="stylesheet" href="css/style.css">

今回はCSSフォルダを使わず、HTMLファイルと同じディレクトリに「style.css」を配置して進めていきます。
hrefの値についてはまた詳しく解説します。

これでCSSを記述する準備が整いました。

CSSの書き方

それでは実際にCSSを記述して、見た目を整えていきましょう。

基本的なCSSの記述方法

まずはCSSの基本的な記述方法です。

記述例として

h1 { font-size: 48px; 

}

これは、セレクタ「h1タグ」に対してプロパティとして{文字の大きさ(font-size)}を48pxに設定しています。

CSSを書いてみよう

では実際に「style.css」にCSSを記述してみましょう。

今回は「h1」と「p」タグに対して文字の大きさと配置を中央に指定してみます。

@charset "utf-8";
h1 {
  font-size: 48px;
  text-align: center;
}
p {
  font-size: 20px;
  text-align: center;
}

先頭の「@charset “utf-8”;」は文字コードの宣言です。

続けて「h1」と「p」タグに対して文字の大きさ(font-size)と配置(text-align)を指定しています。