ホームページ制作で欠かせないのが、CSSのスキルです。
CSSは、デザインを整えるためのコンピューター言語です。
初心者の使いやすく、すぐに覚えることができます。
本記事ではCSSを適用させるための準備から基本的な使い方などを紹介します。
CSSを使ってみたいと考えている人は、ぜひ参考にしてください。
CSSとは
CSSとは、Cascading Style Sheet(カスケーディング・スタイルシート)の略称になり、WEBサイトのデザインを実装するための言語です。
現在では、ほぼ全てのWEBサイトで見栄えを美しくするために、CSSが使用されています。
また、「スタイルシート」とも呼ばれることもありますが、意味や用途は変わりませsん。
CSSには以下の3つのバージョンが提供されています。
・CSS
・CSS2
・CSS3
現在は、最新バージョンであるCSS3を使用することが推奨されていますが、絶対に使用しなければならないということではありません。
従来のバージョンである、CSSやCSS2を使用することも可能です。
CSSでできることは？
CSSを使用することで、文字色の変更・レイアウトの変更・おしゃれなボタンなどの実装ができます。
反対にCSSを使わなければ、文字や画像が上から下に並んでいるだけの単調で見にくいWEBサイトになります。
実際の使用例を紹介します。
HTMLコード
<p>これはテストの文章です。</p>
CSSのコード
/*文字色を赤色に変える*/
p{
color: #ff0000;
}
このように記述すれば、「これはテストの文章です。」の文字色を赤色に変えることができます。
変えれるのは文字色だけではありません。
下のコードは文字の大きさを変えています。
HTMLコード
<p>これはテストの文章です。</p>
CSSのコード
/*文字色を赤色に変える*/
p{
color: #ff0000;
font-size: 20px;
}
このコードは文字の大きさを20pxに指定しています。
このようにCSSは、色や大きさなどデザインに関することを設定できるのが特徴です。
CSSを書くための下準備
CSSを実装するためには、CSSを読み込ませるための下準備が必要です。
CSSを読み込ませる方法は以下の3つの手順があります。
1.HTMLのファイル内にstyleタグを使って書き込む
2.HTMLのタグ内にCSSを書き込む
3.外部ファイルのCSSを読み込む
3つの方法について順番に説明します。
HTMLのファイル内にstyleタグを使って書き込む
簡単にCSSを読み込めれるのが、この方法です。
具体的な下準備は、HTML内のhead内にstyleを使ってCSSを記述します。
HTMLのコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストです</title>
<style>
p{
color: #ff0000;
font-size: 20px;
}
</style>
</head>
<body>
<p>これはテストの文章です。</p>
</body>
</html>
このように記述することで、CSSを適用することができます。
簡単に素早くCSSを適用できるのがメリットです。
しかし、CSSのコード量が多くなれば、HTMLファイルの容量が大きくなり、見にくくなってしまうのがデメリットになります。
HTMLのタグ内にCSSを書き込む
2つ目の方法は、HTMLのタグ内にCSSを書き込む方法です。
この方法も簡単にCSSを適用できるのがメリット。
実際にこのようなコードを記述します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>テストです</title> </head> <body> <p style="color: #ff0000; font-size: 20px;">これはテストの文章です。</p> </body> </html>
HTMLのタグにCSを書き込むことで、CSSを適用させている箇所がすぐにわかります。
しかし、コードが全体的に冗長化してしまい、保守性に欠けるのがデメリットです。
外部ファイルのCSSを読み込む
ほとんどのWEBサイトは、外部ファイルのCSSを読み込む方法を採用しています。
以下の手順でCSSを適用させます。
1.HTMLファイルのhead~head内に「link rel=”stylesheet” href=”任意のファイル名.css”」と記述します。
2.新しいファイルを作成して、「任意のファイル名.css」で保存します。
これでCSSを適用することができmす。
実際にコードを見てみましょう。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>テストです</title> <!-- スタイルシートの名前は「style.css」にしている --> <link rel="stylesheet" href="style.css"> </head> <body> <p>これはテストの文章です。</p> </body> </html>
ここではスタイルシートとして読み込むファイルの名前を「style.css」にしています。
新しいファイルを作成してファイルの名前を「style.css」として保存します。
新しく作成したスタイルシートにCSSのコードを記述すれば完了です。
CSSコード
p{
color: #ff0000;
font-size: 20px;
}
CSSファイルを外部ファイルとして読み込むことで、コードの冗長化を防ぐことができます。
また、HTMLファイルとCSSファイルを別々にすることで見やすくなり、保守性が高くなります。
CSSの書き方
ここまではCSSの役割やCSSを読み込ませる方法などを紹介しました。
次は、CSSの書き方について説明します。
CSSの書き方はこのようになっています。
セレクタ{
プロパティ: 値;
}
「セレクタ」、「プロパティ」、「値」を順番に説明します。
セレクタ
セレクタはCSSを適用させるHTMLの箇所を指定します。
例えば、「header」、「nav」、「article」、「section」、「p」、「id名」、「class名」などが挙げられます。
「pタグで囲っている文字色を赤色にしたい」という場合にはこのようなコードを記述します。
p{
color: #ff0000;
}
プロパティ
プロパティは、セレクタで指定した部分の何を変化させるかを決める役割があります。
例えば、「pタグで囲っている部分の背景色を赤色にしたい」という場合にはこのようなコードを記述します。
/*pタグで囲っている部分の背景色を赤色にする*/
p{
background: #ff0000;
}
このように記述すれば、pタグで囲っている部分の背景色を赤色にすることが可能です。
また、「pタグで囲っている文字色を赤色にしたい」という場合にはこのようなコードを記述します。
/*pタグで囲っている文字色を赤色にする*/
p{
color: #ff0000;
}
このように赤色にするということは同じでも、赤色にする部分が違います。
・上のコードでは背景部分を赤色に変化させている
・下のコードでは文字色を赤色に変化させている
値
値では、どのように変化させるかを決める役割があります。
下のコードは、pタグで囲っている文字色を様々な色に変化させています。
p{
/*pタグで囲っている文字色を赤色にしている*/
color: #ff0000;
/*pタグで囲っている文字色を黒色にしている*/
color: #000000;
/*pタグで囲っている文字色を灰色にしている*/
color: #808080;
/*pタグで囲っている文字色を白色にしている*/
color: #ffffff;
/*pタグで囲っている文字色を青色にしている*/
color: #0000ff;
/*pタグで囲っている文字色を緑色にしている*/
color: #008000;
/*pタグで囲っている文字色を黄色にしている*/
color: #ffff00;
/*pタグで囲っている文字色をオレンジ色にしている*/
color: #ffa500;
/*pタグで囲っている文字色を茶色にしている*/
color: #a52a2a;
/*pタグで囲っている文字色をピンク色にしている*/
color: #ffc0cb;
}
値でどのように変化するのかを決めることが可能です。
また、プロパティと値の間は:(コロン)を記述、値の終わりには;(セミコロン)を記述するのがルールです。
セレクタの指定方法
先ほど説明したセレクタの指定方法についてより詳しく説明します。
セレクタの指定方法は、大きく分けて以下の7つです。
・タグ名で指定する
・id名で指定する
・class名で指定する
・子孫セレクタで指定する
・子セレクタで指定する
・複数指定する
・擬似クラスを使って指定する
この5つの方法について順番に解説します。
タグ名で指定する
タグ名で指定する方法を説明する前に、タグの説明をします。
タグとは、htmlで使用される制御情報です。
制御情報を簡単に説明すると、タグには名札やラベルの機能があります。
で囲まれた文字がタグとして扱われます。
<!-- よく使用されるタグ一覧 --> <title><head><body><header><article><nav><section><footer><p><div>
タグは、このように記述することで指定できます。
HTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストです</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>これはテストの文章です。</p>
</body>
</html>
CSSコード
/*body部分を青色にしている*/
body{
background: #0000ff;
}
/*pタグで囲っている文字色を赤色にしている*/
p{
color: #ff0000;
}
id名で指定する
idは、下のように記述することで使用できます。
idを使用する上で注意しなければならないのが、同じid名は同じページ内に1回しか使用できません。
また、CSSでid名を指定するときは、id名の前に「#」をつけることが必要です。
#id名{}
上の記述は、CSSでidを指定するときの書き方になります。
idは主にdivタグで使用されることが多いです。
<!-- よく使用されるタグ一覧 --> <title><head><body><header><article><nav><section><footer><p><div>
タグは、このように記述することで指定できます。
HTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストです</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="sample">これはテストの文章です。</div>
</body>
</html>
CSSコード
/*body部分を青色にしている*/
body{
background: #0000ff;
}
/*id名がsampleのdivタグで囲っている文字色を赤色にしている*/
#sample{
color: #ff0000;
}
class名で指定する
classは、下のように記述することで使用できます。
idとclassの違いは、以下の2つです。
・重複して使用できる
・class名の前に.(ドット)をつける
classはidと違い同じclass名を何度も使用することができます。
なので、同じデザインを何度も適用させたい場合は、classを使用するようにしましょう。
また、classは使用するときにclass名の前に.(ドット)をつけるのが決まりです。
.class名{}
HTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストです</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="sample">ここは文字色が赤くなります。</p>
<p>これは文字色が変化しません。</p>
<p class="sample">ここは文字色が赤くなります。</p>
</body>
</html>
CSSコード
/*body部分を青色にしている*/
body{
background: #0000ff;
}
/*class名がsampleのpタグで囲っている文字色を赤色にしている*/
.sample{
color: #ff0000;
}
子孫セレクタで指定する
子孫セレクタとは、指定した要素の中の指定した要素だけにスタイルが適用されます。
言葉で説明しても難しいと思うので、実際にコードを見て理解しましょう。
HTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストです</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<p>これは文字色が変化しません。</p>
</nav>
<main>
<p>ここは文字色が赤くなります。</p>
</main>
</body>
</html>
CSSコード
/*mainの要素の中にあるpタグの文字色を赤色にしている*/
main p{
color: #ff0000;
}
子孫セレクタを使用するときは、セレクタとセレクタの間には半角スペースで区切る必要があります。
子セレクタで指定する
指定した要素の直下にある子要素だけにスタイルを適用する方法です。
セレクタとセレクタの間を>(だいなり)で繋ぐ必要があります。
HTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストです</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="sample">
<p>ここは文字色が赤くなります。</p>
<main>
<p>これは文字色が変化しません。</p>
</main>
</div>
</body>
</html>
CSSコード
/*sampleの直下にあるpタグの文字色を赤色にしている*/
#sample > p{
color: #ff0000;
}
sampleの子要素であるpタグで囲っている文字色は赤くなります。
mainタグの中にあるpタグは、孫要素になるのでスタイルが適用されません。
複数指定する
セレクタは複数指定することができます。
セレクタを複数している場合は、セレクタとセレクタの間を,(コンマ)で区切ることが必要です。
並べる順番や数はいくつあっても大丈夫です。
HTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストです</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>この文章はテストです。</h1>
<h2>この文章はテストです。</h2>
<p>この文章はテストです。</p>
</body>
</html>
CSSコード
/*h1 h2 pタグで囲っている文字色を赤色にしている*/
h1, h2, p{
color: #ff0000;
}
擬似クラスを使って指定する
擬似クラスとは、セレクターに付加するキーワードで、選択された要素の特定の部分を指定できる機能があります。
擬似クラスはセレクタに：(コロン)を加えることで使用できます。
擬似クラスはこのようなモノを使用することが可能です。
・ :link
・:visited
・:hover
・:focus
・:first-child
・:last-child
・:nth-child()
順番に使用方法と意味を説明します。
:link
「:link」の擬似クラスは、まだクリックされていないリンク部分にスタイルを適用します。
HTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストです</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 未訪問の場合はスタイルが適用される -->
<a href="https://kumaweb-d.com/">https://kumaweb-d.com/</a>
</body>
</html>
CSSコード
/* 未訪問リンクは文字色が赤色に変わる */
a:link{
color: #ff0000;
}
:visited
「:visited」の擬似クラスは、すでにクリックされたリンク部分にスタイルを適用します。
HTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストです</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 未訪問の場合はスタイルが適用される -->
<a href="https://kumaweb-d.com/">https://kumaweb-d.com/</a>
</body>
</html>
CSSコード
/* すでに訪問されたリンクは文字色が赤色に変わる */
a:visited{
color: #ff0000;
}
:hover
「:hover」の擬似クラスは、指定した要素にマウスが乗っている間だけスタイルを適用します。
HTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストです</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 未訪問の場合はスタイルが適用される -->
<a href="https://kumaweb-d.com/">https://kumaweb-d.com/</a>
</body>
</html>
CSSコード
/* すでに訪問されたリンクは文字色が赤色に変わる */
a:hover{
color: #ff0000;
}
:active
「:active」の擬似クラスは、要素をクリックして離すまでの間だけスタイルを適用します。
HTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストです</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<input type="button" value="ボタン">
</ul>
</body>
</html>
CSSコード
input:active{
color: #ff0000;
}
:focus
「:focus」の擬似クラスは、指定した要素がフォーカスされている間だけスタイルを適用します。
HTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストです</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input class="sample1" value="フォーカスされている間は背景色が赤色になります"><br>
<input class="sample2" value="フォーカスされている間は背景色が青色になります">
</body>
</html>
CSSコード
.sample1:focus {
background: #ff0000;
}
.sample2:focus {
background: #0000ff;
}
:first-child
「:first-child」の擬似クラスは、最初に当てはまる要素だけスタイルを適用します。
HTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストです</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li>これはテストです</li>
<li>これはテストです</li>
<li>これはテストです</li>
<li>これはテストです</li>
<li>これはテストです</li>
</ul>
</body>
</html>
CSSコード
/*リストタグの最初の要素だけにスタイルを適用させている*/
li:first-child {
color: #ff0000;
}
:last-child
「:last-child」の擬似クラスは、最後に当てはまる要素だけスタイルを適用します。
HTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストです</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li>これはテストです</li>
<li>これはテストです</li>
<li>これはテストです</li>
<li>これはテストです</li>
<li>これはテストです</li>
</ul>
</body>
</html>
CSSコード
/*リストタグの最後の要素だけにスタイルを適用させている*/
li:last-child {
color: #ff0000;
}
:nth-child()
「:nth-child()」の擬似クラスは、任意の要素に当てはまる要素だけスタイルを適用します。
HTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストです</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li>これはテストです</li>
<li>これはテストです</li>
<li>これはテストです</li>
<li>これはテストです</li>
<li>これはテストです</li>
</ul>
</body>
</html>
CSSコード
/*リストタグの2番目の要素だけにスタイルを適用させている*/
li:nth-child(2) {
color: #ff0000;
}
:nth-child()は番号で指定するだけではなく、奇数・偶数などで指定することも可能です。
奇数を指定する場合は「odd」、偶数を指定する場合は「even」を記述します。
HTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストです</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li>これはテストです</li>
<li>これはテストです</li>
<li>これはテストです</li>
<li>これはテストです</li>
<li>これはテストです</li>
</ul>
</body>
</html>
CSSコード
/*リストタグの奇数の要素だけに文字色が赤色になるスタイルを適用させている*/
li:nth-child(odd) {
color: #ff0000;
}
/*リストタグの偶数の要素だけに文字色が青色になるスタイルを適用させている*/
li:nth-child(odd) {
color: #0000ff;
}
プロパティ・値の使い方
プロパティに正しい値を設定することでデザインが適用されます。
例えば、サイズを指定するプロパティであれば、px(ピクセル)、em(エム)、%(パーセント)などを値として設定します。
プロパティと値の記述を説明していきます。
フォントサイズを変更する
フォントサイズを変更するときはfont-sizeプロパティを使います。
フォントサイズを指定する値はpx(ピクセル)、em(エム)などです。
・ピクセル指定。画面サイズや環境によって変化しないのが特徴
・環境によって文字の大きさが変化する相対単位。1emが基準になっている
また、1emは16pxに設定されています。
pxやem変換する場合は、サイズの変換ツールなどを利用するのがおすすめです。
サイトURL:https://coliss.com/articles/build-websites/operation/css/css-unit-conversion.html
下のコードのように「数字＋単位」でフォントサイズを指定しましょう。
HTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストです</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="px">これはテストの文章です。</p>
<p class="em">これはテストの文章です。</p>
</body>
</html>
CSSコード
/*文字サイズは同じです*/
.px{
font-size: 16px;
}
.em{
font-size: 1em;
}
色を変更する
色を変更する場合、値の記述方法は2つあります。
・色名を記述します
・カラーコードを記述する
シンプルで記述しやすいのが、色名をそのまま記述する方法です。
例えば、red・green・blue・pink・orange・brownなどになります。
カラーコードは、色によって決められているコードを使用します。
色名・カラーコードは、たくさんありますが覚える必要はありません。
なぜなら、カラーコード表を参考にすれば、使用できるからです。
おすすめのカラーコード表は、現職大辞典です。
サイトURL:https://www.colordic.org/
また、色を変化させるためによく使用するプロパティは「color」、「background」などです。
HTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストです</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>これはテストの文章です。</p>
</body>
</html>
CSSコード
p{
color: #ff0000;
background: #0000ff;
}
線を引く
CSSで線を引くことも可能です。
線を引くときは「border」プロパティを使用します。
・border-top・・・上にだけ線を引く
・border-bottom・・・下にだけ線を引く
・border-right・・・右にだけ線を引く
・border-left・・・左にだけ線を引く
線の幅・色・スタイルはこのように記述します。
border-style: solid;(線の種類を実線にする)
border-width: 1px;(線の幅を1pxに指定する)
border-color: #ff0000;(線の色を赤色にする)
これら3つを毎回記述するのは少し面倒ですよね。
この3つの記述をまとめる方法があります。
border: solid 1px #ff0000;
このように3つの記述をまとめて記述する方法をショートハンドといいます。
また、線の種類にはこのようなモノが挙げられます。
・solid(実線)
・dotted(点線)
・dashed(破線)
・double(二重線)
「border」プロパティだけで使用すれば、四角で囲むことが可能です。
コメントを記述しよう
コメントは、デザインなどに一切影響を及ぼしません。
ただのメモ書きだと思ってください。
メモ書きを残す理由は、他の人やあとで見たときにわかりやすくするためです。
コメントはこのように記述します。
「 /* この中の文章はデザインに反映されません */」
「/*〜*/」この間に記述した文章がコメントとして扱われます。
まとめ
今回は、CSSの基本的な使い方を紹介しました。
いかがでしたか？
CSSの使い方を覚えれば、自分でホームページのデザインを修正することも可能です。
ぜひ、CSSを使ってみてください。