この記事では、Webサイト制作の基本となる「CSS」の書き方を学んでいきます。
以前解説したHTMLと併せて使用する言語になるので、HTML,CSSそれぞれの役割や書き方を覚えていきましょう。
- CSSの役割
- CSSの書き方
- CSSファイルの読み込み方法
目次
CSSの基礎知識を学ぼう
まずは、 簡単にCSSのイメージを掴んでいきましょう。
CSSとは
CSSは、HTML同様にWebサイト作成に用いる言語です。
正式名称は「Cascading Style Sheets」と言います。
CSSの役割
CSSの役割は、簡単に言うとWebサイトの見た目を整えることです。
Webサイトの見た目（スタイル）を整える言語になるので、スタイルシート言語と呼ばれます。
HTMLとCSSの役割
以前紹介したHTMLはWebサイトの構造を記述するための言語でした。
今回、紹介するCSSはWebサイトの見た目を記述するための言語になります。
HTMLだけで作成されたサイトの例
上記の例は、HTMLのみで作成されたWebサイトになります。
HTMLは、あくまでWebサイトの構造を記述するだけなので、文字や画像が配置されているだけの状態になっています。
HTMLとCSSで作成されたサイトの例
次の例では、HTMLで作成した要素に対してCSSで見た目を整えます。
CSSで見た目を整える例
- 要素の大きさ
- 要素の並び方
- 余白
- 色
上記のように、CSSを用いることでWebサイトの見た目を調節しています。
HTMLとCSSが合わさることによって、皆さんが普段目にしているWebサイトの形になるのです。
CSSの基礎文法
ここまでで、CSSについての基礎知識について解説してきました。
次は、CSSの書き方を確認していきましょう。
HTMLとCSSで作成されたサイトの例
CSSの書き方の基本は「セレクタ」と「プロパティ」と「値」の３つです。
値の後は「;（セミコロン）」を記述することを忘れないようにしてください。
CSSでスタイルを適用する
セレクタは、スタイルを適用したい要素を選択します。
プロパティと値で、どのようにスタイルを変えていくのかを記述します。
- セレクタ：どこの要素に対して
- プロパティ：何のプロパティを
- 値：どのように変えるか
上記の流れで覚えておけば大丈夫です。
CSSの書き方のまとめ
ここまでで、CSSの基本文法を説明しました。
- CSSの基本は「セレクタ」と「プロパティ」と「値」の３つ
- 値の後は「;（セミコロン）」を記述する
以上のことを覚えていれば大丈夫です。
CSSのセレクタの種類
次に、CSSのセレクタについて確認していきましょう。
ここでは、Webサイト制作で最低限使えるべきものを中心に解説していきます。
classセレクタ
classセレクタは、HTMLのタグの「class属性の値」で要素を選択します。
スタイルを適用する際は、基本的に「classセレクタ」で要素を選択します。
まずは、この方法をマスターしましょう。
classセレクタの例
<p class="sample-text">サンプルテキスト</p>上記の例では、class属性に「sample-class」という値を記述しています。
このようなclass属性の値を「クラス名」とも呼ぶので、覚えておきましょう。
/* 「sample-text」というクラス名を持つ要素にスタイルを当てる */
.sample-text {
color: red;
}上記のHTMLに書かれている要素を選択したい場合は、上記のように記述します。
「.クラス名」となるようにセレクタを記述してあげましょう。
HTMLにクラス名を付けておく
<!-- どこの -->
<header class="header">
<!-- どこの、何か -->
<h1 class="header-logo">ZeroPlus</h1>
</header>Webサイトのスタイルを整えるために、HTMLの要素にクラス名をつける必要があります。
好き勝手に名前をつけるのではなく、「どこの-何か」となるようにクラス名を付けてあげるとわかりやすいクラス名になります。
要素型セレクタ
要素型セレクタは、HTMLの「タグの名前」で要素を選択します。
主に「リセットCSS」を作成する際に使用されるセレクタになります。
リセットCSSに関しては、後の記事で学習します。
今は名前だけでも覚えておきましょう。
要素型セレクタの例
/* 全てのaタグにスタイルを当てる */
a {
text-decoration: none;
color: inherit;
}この要素型セレクタは、「該当する全てのタグ」にスタイルが適用されます。
要素型セレクタばかり使用していると、意図せぬところでスタイルが変更されてしまう場合が出てきてしまうのです。
なので、HTMLの要素のスタイルを適用させたい時は、最初に説明した「classセレクタ」で記述を行うようにしましょう。
idセレクタ
まずは、この方法をマスターしましょう。
idセレクタは、HTMLのタグの「id属性の値」で要素を選択します。
idセレクタの例
<p id="sample-id">サンプルテキスト</p>上記の例では、id属性に「sample-id」という値を記述しています。
/* 「sample-id」というID名を持つ要素にスタイルを当てる */
#sample-id {
color: red;
}idセレクタは、「詳細度」という関係からスタイルの管理には不向きです。
なので、スタイルを指定するために使用する頻度としてはかなり稀なケースになります。
基本的には最初に説明した「classセレクタ」で指定を行うようにしましょう。
CSSのセレクタのまとめ
ここまでで、CSSのセレクタについて説明しました。
- 基本的に「classセレクタ」を使用する
この１点を覚えていれば大丈夫です。
CSSの読み込み方法
さいごに、CSSファイルの読み込み方法を解説していきます。
CSSファイルを読み込む
CSSを読み込む方法は複数パターンありますが、まずは「CSSファイル」を読み込む方法を覚えましょう。
CSSファイルをHTMLファイルに読み込む
<head>
<!-- cssファイルを読み込む -->
<link rel="stylesheet" href="css/style.css">
</head>HTMLファイルにCSSを適用する際は、「linkタグ」を使ってファイルを読み込みます。
「href属性（エイチレフ属性）」の中に、読み込みたいcssファイルのパスを記述すれば大丈夫です。
HTMLとCSSの役割
HTMLの中に直接スタイルを記述する方法もありますが、方法としては非推奨です。
「HTMLは構造、CSSは見た目」というように明確に役割を分担させましょう。
分担させていることにより、Webサイトの制作・修正の負担を減らすことができます。
まとめ
今回は、Webサイトの見た目を整えるCSSという言語について簡単に解説しました。
記事の内容として、以下の内容が押さえられていれば次の記事に進んで大丈夫です。
- CSSの役割：Webサイトの見た目を整える
- CSSの書き方：「セレクタ」と「プロパティ」と「値」を記述する
- CSSファイルの読み込み方法：HTMLの「linkタグ」で読み込む
CSSも理解はWebサイトの構造を作る上で必要不可欠なものです。
次は、「CSSのプロパティ」について詳しく学び、どのように見た目を変更できるかの知識を蓄えていきましょう！
