CSSの書き方
CSSは「Cascading Style Sheet」の略で、これを「スタイルシート」と呼びます。
CSSはHTMLの表示を整える役割があり、必ず必要というわけではありませんがほとんどのWEBサイトで使用されています。
HTMLはコンテンツの構造を担当し、表示を整える部分はCSSが担当します。
まずは基本的な書き方からみていきましょう。
CSSのコード例
body {
background-color: gray;
}CSSは3つのパーツから構成されます。
- セレクタ
- 宣言ブロック
- プロパティ
セレクタ
「セレクタ」はCSSを適用する場所を特定します。
上記のように「body」であればbody要素に適用することができます。
同じようにh1要素なら「h1」と指定したり、p要素なら「p」のようにHTMLの要素名で指定することができます。
これを「タイプセレクタ」と呼びます。
セレクタはいくつか種類があり、全ての要素に適用する「ユニバーサルセレクタ」、id属性で指定する「IDセレクタ」、class名で指定する「クラスセレクタ」、属性で指定する「属性セレクタ」などがあります。
ユニバーサルセレクタ
ユニバーサルセレクタは全ての要素を対象にするセレクタで、次のように「*」を使って指定します。
CSSのコード例
* {
color: blue;
}IDセレクタ
IDセレクタはHTML要素のID属性を対象にするセレクタで、「#属性名」の形式で指定します。
CSSのコード例
#title {
color: blue;
}この場合は、指定したid属性を持つ要素のみにプロパティを適用します。
HTMLのコード例
<body>
<h1 id="title">ページのコンテンツ</h1>
<p class="text">コンテンツのテキスト1</p>
<p class="text">コンテンツのテキスト2</p>
</body>クラスセレクタ
クラスセレクタはHTML要素のclass属性を対象にするセレクタで、「.クラス名」の形式で指定します。
CSSのコード例
.text {
color: blue;
}この場合は、指定したクラス名「text」を持つ要素のみにプロパティを適用します。
HTMLのコード例
<body>
<h1 id="title">ページのコンテンツ</h1>
<p class="text">コンテンツのテキスト1</p>
<p class="text">コンテンツのテキスト2</p>
</body>IDセレクタとクラスセレクタは同じように見えますが、IDセレクタの方が優先度は高くなります。
その代わり同じIDを複数の要素に指定することはできません。
一方で、class名は同じ値を複数の要素に指定できるため、共通したCSSを適用したい場合に便利です。
属性セレクタ
属性セレクタはHTML要素の任意の属性に対してCSSを適用したいときに指定します。
CSSのコード例
inpu[type=text] {
border-radius: 5px;
}この場合は、type属性に「text」が指定されている要素のみにCSSを適用することができます。
HTMLのコード例
<form method="post" action="">
<input type="text" name="your_name" value="">
<input type="email" name="your_email" value="">
<input type="submit" name="button_submit" value="送信">
</form>プロパティ
CSSのプロパティは様々なものが用意されており、宣言ブロックに複数指定することができます。
以下のコード例は、ページ全体の背景色とフォントサイズ、種類を指定しています。
CSSのコード例
body {
font-size: 100%;
font-family: Arial, Helvetica, sans-serif;
background-color: #9ecfff;
}プロパティは色、サイズ、余白などをはじめ、インデントや行間、幅寄せなど細かい設定も指定できるように本当に多くのものが用意されています。
ここでは紹介しませんが、今後コードを書きながら少しずつプロパティを覚えていきましょう。
CSSを書く場所
CSSはHTMLファイルに直接書く方法と、独立したCSSファイルに書く方法があり、さらにHTMLファイルに直接書く場合は「head要素に書く方法」と「HTML要素にstyle属性で書く方法」の2つの方法があります。
どのような形になるか1つずつ確認していきましょう。
head要素に書く方法
head要素の中にstyle要素を書いて、その中にCSSを書いていきます。
HTML コード例
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>トップページ</title>
<style>
body {
font-size: 100%;
font-family: Arial, Helvetica, sans-serif;
background-color: #9ecfff;
}
p {
font-size: 86%;
color: #222;
}
</style>
</head>
<body>
<h1>トップページ</h1>
<p>Hello, HTML!</p>
</body>
</html>style要素に書いたCSSはbody要素の該当する要素にCSSが適用されます。
HTML要素にstyle属性で書く方法
こちらはCSSを適用したい要素にsytle属性を使って指定する方法です。
HTML コード例
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>トップページ</title>
</head>
<body style="font-size: 100%; font-family: Arial, Helvetica, sans-serif; background-color: #9ecfff;">
<h1>トップページ</h1>
<p style="font-size: 86%; color: #222;">Hello, HTML!</p>
</body>
</html>この方法は「インラインスタイル」や「インラインCSS」と呼ばれます。
CSSを適用したい要素に直接書くことができるので便利そうですが、後でどこにCSSを書いたか分かりづらくなってしまうためあまりオススメできません。
CSSファイルに書く方法
「sytle.css」のように拡張子「.css」を付けて、HTMLファイルとは別のテキストファイルとして書く方法です。
CSSファイルはHTMLから読み込むことで適用することができます。
HTMLとCSSを分けて管理できたり、複数のページで1つのCSSを共有できるため一番オススメの方法です。
style.css
body {
font-size: 100%;
font-family: Arial, Helvetica, sans-serif;
background-color: #9ecfff;
}
p {
font-size: 86%;
color: #222;
}HTMLファイルはlink要素で「style.css」を読み込むことができます。
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>トップページ</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>トップページ</h1>
<p>Hello, HTML!</p>
</body>
</html>以上、CSSを書く場所について3つの方法してきました。
最後に、実際にCSSを書いてみましょう。
CSSを書いてみる
前回作成した「index.html」を使って、CSSがどのように適用されるかを確認していきます。
head要素内にstyle要素を追記してください。
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>トップページ</title>
<style>
</style>
</head>
<body>
<h1>トップページ</h1>
<p>Hello, HTML!</p>
</body>
</html>続いて、プロパティを書いていきます。
まずはbackground-colorプロパティでページの背景色を変更してみましょう。
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>トップページ</title>
<style>
body {
background-color: #9ecfff;
}
</style>
</head>
<body>
<h1>トップページ</h1>
<p>Hello, HTML!</p>
</body>
</html>変更を保存し、ブラウザで開いてみてください。
次のように背景の色が白から青に変わったでしょうか。
色の指定「#9ecfff」はカラーコードという16進数の値で指定する方法を使っています。
今は馴染みがないかもしれませんが、WEBサイト制作でよく使われているAdobeのツールではよく使われる方法なので、少しずつ使って慣れていきましょう。
色の指定方法はその他にもキーワード（カラー名）やRGBなどで任意の形式を使って指定することができます。
試しに、h1要素の文字色をキーワードで変更してみましょう。
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>トップページ</title>
<style>
body {
background-color: #9ecfff;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>トップページ</h1>
<p>Hello, HTML!</p>
</body>
</html>ブラウザを更新してみると、次のようにh1要素の色が変わります。
キーワードは「blue」の他にも「red」「black」「white」などが定義されています。
興味がある方は、以下のページも参照してみてください。
CSSでの色の指定方法について
今回はここまでとなります。
次回はWEBサイトの企画や構成の考え方を解説していきます。