CSSファイルの作り方とHTMLファイル連携方法
CSSファイル（スタイルシート）は、テキストエディタを使用して簡単に作成することができます。
パソコンでCSSファイルを作成するための一般的な手順を解説します。
1. テキストエディタを開く
まず、パソコンでテキストエディタを開きます。
ベーシックなテキストエディタとしては、Windowsであれば「メモ帳」、Macであれば「TextEdit」があります。
ホームページ制作でよく使われるテキストエディタとしては、「Visual Studio Code（VS code）」「Notepad++」「NoEditor」「Sublime Text」「Atom」「サクラエディタ」などがあります。
おすすめは、フリーエディターのVisual Studio Code（VS code）です。無料でダウンロードできるので、Web制作の入門者・初心者でも手軽に使うことができますので、ぜひ試してみてください。
2. 新しいファイルを作成する
テキストエディタで、新しいファイルを作成します。
ファイルは、「ファイル名.css」で保存してください。
末尾の拡張子を.css（ピリオドcss）にすることで、CSS形式のファイルとして識別されます。
ファイル名で使える文字の基本は下記3つです。
- 半角英数
- -（ハイフン）
- _（アンダースコア）
基本的にはアルファベットの小文字で統一することをおすすめします。
スペースや先頭に数字を入れることはNGです。不具合の原因となる場合があるので注意してください。
3. ファイルを保存する
CSSファイルを保存する方法は、テキストエディタによって異なりますが、基本的には、ファイルメニューから「名前を付けて保存」や「保存」を選択します。
ファイル名の拡張子が、必ず「.css」になっていることを確認してください。
これでCSSファイルが作成できました。
作成したCSSファイルをベースに、スタイルのコードを書いてHTMLファイルに紐づけてページを構築していきます。
扱いに慣れてくると、CSSファイルをプロジェクトやWebページによって分けて整理したりすることができます。
CSSファイルのcharset宣言
CSSファイルの最初の1行目に@charset "utf-8";と書くことがあります。
これは、charset宣言と言います。ファイルの文字コードを指定する場合に必要となります。
「このCSSファイルは、utf-8という文字コードで書いています」ということを指示しています。
ブラウザが文字コードを識別できるように、charset宣言で指示をしてあげます。
@charset "utf-8";ファイル全般で言えることですが、ファイルを保存する時に指定する文字コードとcharset宣言の文字コードが一致していることが必須です。
ファイルを開いた際に、文字化けが起きた経験はないでしょうか。
この文字化けの原因のひとつが、保存時の文字コードとcharset宣言の文字コードの不一致です。
たまに、@charset宣言は必須か否かという質問を受けることがありますが、答えとしては、@charset宣言は書いておいたほうが無難です。
特に日本国内で制作するWebサイトにおいては、CSS内に日本語でコードを書くことがありますので、@charset宣言をしておくと安心です。
実は、現代のブラウザでは、HTMLやCSSがどの文字コードで記述されているかを自動識別できるようになってきています。
今後あらゆるブラウザにおいて、さらに機能が向上して安定してくれば、@charset宣言は不要になると思います。
もし、文字化けが起きた際は、charset宣言の有無を思い出してみてください。
4. HTMLファイルにCSSファイルを読み込む方法
作成したCSSファイルが、HTMLファイルに反映できるように紐づけしてみましょう。
読み込み方法は簡単です。HTMLファイルのheadタグ内に、linkタグでCSSファイルを指定して読み込みます。
<link rel="stylesheet" type="text/css" href="リンク先のURL">link要素のhref属性には、CSSファイルのリンク先のURLを指定します。
リンク先のURLは、相対パスと絶対パスが利用できます。
rel属性には、スタイルシートを表すstylesheetを指定します。
type属性は、スタイルシートの場合は指定しなくても構いませんが、指定する場合はtext/cssと書いてください。
例として、index.htmlというHTMLファイルに、style.cssというCSSファイルを紐付します。
ここでは、style.cssとindex,htmlは同じ階層にあるファイルとして、相対パスでリンク先のURLを指定しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タイトル</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
ここにコンテンツが入ります
</body>
</html>これで、HTMLファイルにCSSファイルを紐づけすることができました。
CSSファイルstyle.cssに書いたスタイルが、HTMLファイルindex.htmlに反映されます。
次は、CSSの書き方を学習しましょう。
