cssの入門編です！細かくイラストを使っているので、超初心者の方でもcssの基本と書き方がスムーズにわかるようになっています。
cssのセレクタ、プロパティ、値のそれぞれの意味と使い方を実際にコードを書いて覚えることができますよ！
そもそもcssとは？
css（シーエスエス）はwebサイトを作成するためには欠かせないコンピューター言語の一つです。正式名称のCascading Style Sheets（カスケードスタイルシート）の文字が表す通り、webサイトの見た目を整えるために使用します。
例えばこんなおしゃれなサイトの「星柄の背景画像」や「グラデーションのボタン」などもcssを書くことで表現しています。
cssではこんなことができる
「cssってこんなもの」というイメージができるようなサンプルを用意したのでみてみましょう。
<p>cssで文字の色を変える</p>cssで文字の色を変える
このようにシンプルに表示されているテキストの色と太さを変えてみます。
<p>cssで文字の色を変える</p>p {
color : skyblue;
font-weight : bold;
}
cssで文字の色を変える
テキストの色が青色の太字になりました。左に書いてあるのが実際のcssのコードです。このように文字の色や太さ以外にも大きさや位置に関する調整もすることができます。
※書き方はあとで詳しく解説
htmlとの役割の違い
htmlとcssの役割の違いはとてもはっきりしています。見た方が早いので下のイラストでcssを使わなかった場合と、cssを使った場合をそれぞれ比較してみましょう。
左のcssを使わないイラストでは配色が白黒で文字の大きさや位置も単調なものになっていますよね。右のcssを使用したものは見た目がおしゃれに整えられています。
このようにcssは「文字の種類/色/大きさ」「背景色」「ボックスの配置」などなど見た目全般を調整するために欠かせない言語なのです。
まとめると！
- htmlの役割：文書に意味をつけていく
- cssの役割：要素にスタイル（デザイン）をつけていく
htmlとcssはどっちを先に勉強する？
cssはすでに書いてあるhtmlのコードに対して何らかの処理をする形で記述していくので、htmlがないと書くことができません。そのため、cssより先にhtmlを勉強しましょう。htmlの理解に不安のある方は以下のページでhtmlの基本をマスターできるのでこちらを先に読みましょう。
cssはどこに書く？
それではどのようにしてcssをhtmlに反映させるのでしょうか？cssをhtmlに反映させる書き方は3つのパターンがあります。一通り紹介しますが、3番目に紹介する方法が最もオススメな方法なので、1番目、2番目はなんとなくの理解でOKです。
その1 – style属性でタグに直接cssを書く
一つ目はhtmlの属性であるstyle属性を使って直接タグ内に書く方法です。（インラインに書くという言い方もあります）
style="cssのコード"というようにタグの中にcssを直接書きます。
ただ、この書き方は
- 1つの要素にしかcssを書けない
- たくさん書くと見づらくなる
などの理由から一般的なweb制作の現場ではタブーな方法とされています。
その2- styleタグの中にcssを書く
2つ目はstyleタグを使って書く方法です。
htmlファイルの中ではhtmlのタグしか書くことができませんが、styleタグを使えば<style>〜<style>の中にcssを書くことができます。
ただ、この方法だとstyleタグが書いてあるhtmlファイルでしかcssが反映されないため、複数のhtmlファイルで共通のcssを適用させたい時にいちいち全てのhtmlファイルにcssのコードをコピーしなければいけません。
よってこちらも非推奨です。
その3 – linkタグによるcssファイルの読み込み
3つ目はlinkタグを使いcssファイルを読み込む方法です。（外部ファイルの読み込みという言い方もする）この方法は実際のweb制作現場でもっとも使われている書き方ですので一緒に使い方を学んでいきましょう！
この後cssファイルの作成方法〜linkタグによるcssファイルの読み込みの一連の流れを解説していくのでまずは、linkタグの使い方をざっくり理解しましょう。
linkタグの概要
htmlにはファイルの読み込みを行うために使用する「linkタグ」というものがあります。
linkタグを使う場合には
- cssを適用させたいhtmlファイル
- 適用させたいcssが書かれたcssファイル
の2つが必要です。
linkタグの書き方
linkタグはheadの中に1行で記述し、閉じタグがありません。
そしてlinkタグには2つの情報（属性）を書きます。
<link rel="ファイルの種類" href="ファイルの場所">1つ目はhref属性のファイルパスです。ここには作成したcssファイルの場所を書きます。
2つ目はrel属性のソースの種類です。ここにはhref属性で読み込むファイルの種類が何かを記述します。cssを読み込む場合は必ず「stylesheet」と書くので特に覚えなくても大丈夫です。
「パス」がわからない方はこちらでわかりやすく解説しているので参考にしてください。
cssファイルの作成方法〜読み込みの手順
それではcssファイルの作成〜読み込みの手順を詳しく解説していきます。一つ一つステップ形式で画像使いながら丁寧に解説していくので安心して取り組みましょう！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サイトタイトル</title>
<meta name="description" content="説明文">
</head>
<body>
<p>文字の色を変えてみよう<p>
</body>
</html>まずはhtmlファイルを作成します。
テキストエディタを開いたら左のコードを全てコピーして貼り付けましょう。
- Ctrl + S（Command + S）で保存
- ファイル名を「index.html」に
- 保存先はデスクトップを選択する
- デスクトップの中に「sample」というフォルダを新規作成
- 「sampleフォルダ」の中にindex.htmlを保存
@charset "utf-8";
p{
color : red;
}続いてcssファイルの作成です。
左の「pの中の文字を赤色に変える」というcssが書かれたコードを新しく開いたテキストエディタに貼り付けます。
charasetとは？
@charasetはcssファイルの一番最初の行に1つだけ書く「文字化けを防ぐためのおまじない」です。書いて損はないコードなので必ず書きましょう。
コードを貼り付けたら
- Ctrl + S（Command + S）で保存
- ファイル名を「style.css」に
- index.htmlが入っている「sampleフォルダ」の中にstyle.cssを保存
ファイルの拡張子がstyle.cssになっていることでcssファイルを作成できます。
ファイル作成ができたら以下の2点を確認します。
- sampleフォルダの中に「index.html」と「style.css」があるか
- 「index.html」と「style.css」の中のコードが左の画像のようになっているか
OKであれば次へ進みます。
ここまででindex.htmlをブラウザで表示してみましょう。
sampleフォルダのindex.htmlをwebブラウザにドラッグ&ドロップします。
するとhtmlのpの中身が表示されました。
ですが文字は黒色のままで、先ほど書いた文字の色を赤色に変えるcssが反映されていませんよね。
これはなぜでしょうか？
そう、htmlファイルにlinkタグが書かれていないからです！
それでは「index.html」を開いて
<link rel="stylesheet" href="style.css">をコピーして追記します。（スクロールできます）
先ほど説明した通り<head>〜</head>の中に書きましょう。
開いていたページを更新してみると…
文字の色が変わりましたね！
p{
color : red;
}無事このcssが反映されています。
一連の流れをざっくりとまとめると
- htmlファイルを作成する
- cssファイルを作成する
- htmlファイルのhead内にlinkタグを書いてcssファイルを読み込む
という流れになります。こう見るととっても簡単ですよね！
ファイル読み込みに関する疑問解消
ここまででみなさんが疑問に思いそうなことをまとめてみました。
ファイル名はstyle.cssじゃないとダメ？
上の例ではファイル名を「style.css」としましたがこれは決まりごとではありません。
拡張子（.〇〇）が「〇〇.css」であればなんでもOKです。ただ一般的に多く使われるファイル名が「style.css」なだけです。
なぜlinkタグのファイル読み込みがポピュラー？
cssを反映させる3つのパターンのうち、1つ目のstyle属性でcssを書く方法と2つ目のstyleタグを書く方法は複数のhtmlで共通のcssを反映させたい時にいちいちコピーしなくてはならないので不便です。
しかしlinkタグのcssファイルの読み込みであれば、それぞれのhtmlファイルにlinkタグを書けばいいだけなので、用意するcssは1つでOKですよね。
cssを修正する時もその1つのcssファイルを修正すればいいので最も効率的というわけです。
続いてcssの書き方のルールを勉強していきます！
