本記事ではサイト制作に必須といわれるCSSを使うことで何ができるのかについて解説し、具体的なコードの記述方法、初心者がCSSを学習する方法をわかりやすく紹介します。
HTMLがサイトの構造を担当するマークアップ言語であるのに対し、CSSはHTMLの要素の色や大きさなどを変化させるために使用するスタイルシート言語です。そのため、HTMLもCSSもWebサイトを作る際に欠かせない言語といえます。
一方で、CSSがサイト制作に欠かせない言語であることは理解しているものの、「どんなことができるかよくわからない」という方もいるのではないでしょうか。本記事ではCSSとは何か、HTMLと合わせることで何ができるのかを解説するとともに、CSSの学習法まで解説します。
目次
CSSとは何？
Webサイトを作成するときに使用される「HTML」だけでは文字の大きさや色、要素のレイアウトの装飾ができません。
しかし、「CSS（Cascading Style Sheets：カスケーディング スタイル シート）」を用いてHTMLの要素にデザインを適用することにより、デザインやレイアウトを整えられます。つまりデザイン性の高い綺麗なWebサイトを構成するには、CSSは必須要素になります。「HTML」と「CSS」の主な違いは、以下のとおりです。
| HTML | CSS | |
|---|---|---|
| 正式名称 | HyperText Markup Language | Cascading Style Sheets |
| 種類 | マークアップ言語 | スタイルシート言語 |
| 役割 | サイトの構造 | サイトの装飾 |
| コードの例 | <div>テキスト</div> |
div {
color: orange;
}
|
CSSでできることは？具体例で解説！
「CSS」を使って「HTML」を装飾すると、次のようなことができます。
- 文字の大きさを変えられる
- 色を変えられる
- 要素同士の間に余白をつけられる
- 簡単なアニメーションが実装できる
サイトのデザインを実装する前に「どのようなコードを書くと何ができるのか」を知っておく必要があります。「CSS（スタイルシート言語）」は一般的なプログラミング言語に比べ、理解しやすいコードです。今回は、「aタグ（HTMLの要素）」に「CSS」を用いるサンプルコードをいくつか紹介します。
文字の大きさを変えられる
Webサイトでは文字の大きさに違いを持たせ、「どの情報が大切か」や「この情報を先に伝えたい」といった工夫ができます。具体的には、「CSS」のフォントプロパティを使用し、文字の大きさの変更が可能です。
「文字を大きくする」
<a style=”font-size: large;”>サンプルテキスト</a>
「数値で設定する」
<a style=”font-size: 20px;”>サンプルテキスト</a>
以上のように文字の大きさ（font-size）の指定だけでもいくつか値を設定可能です。
「CSS」のフォントには、いくつか公式に定義されている値があります。
具体的には以下のとおりです。
| 初期値（規定値） | medium |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | あり |
| パーセント値 | 親要素の font-size に対する相対値 |
| 計算値 | 指定通り。ただし相対的な長さは絶対的な長さに変換される |
| アニメーションの種類 | length |
引用：font-size – CSS: カスケーディングスタイルシート | MDN
たとえば
<a style=”font-size: large;”>サンプルテキスト</a>
というコードを記述したとき、既定の「medium」の1.2倍大きいサイズで表示されます。
色を変えられる
「HTML」のみだと黒色だった文字が、「CSS」のカラープロパティを使うことで色を変更できます。
「英単語での指定」
赤、青といった英単語（カラーネーム）を指定し、要素の色を変更できます。サンプルコードは以下のとおりです。
<a style=”color: red;”>サンプルテキスト</a>
「rgbでの指定」
「rgb」とは「RGBカラーモデル」のことを指し、光の三原色である「赤」、「青」、「黄」の強弱でコンピュータディスプレイ上に色を再現する方法です。
赤に変更するサンプルコードは、以下のとおりです。
<a style=”color: rgb(255, 0, 0);”>サンプルテキスト</a>
緑に変更するサンプルコードは、以下のとおりです。
<a style=”color: rgb(50,205,50);”>サンプルテキスト</a>
複雑にはなりますが、単色の設定だけではなくグラデーションの指定もできます。
「グラデーション指定」
下記は、「サンプルテキスト」というテキストの背景をグラデーションにするコードの例です。
<a>サンプルテキスト</a>
<head>
<style>
a {
background: linear-gradient(45deg, orange 0%, skyblue 72%, blue 100%);
}
</style>
</head>
要素同士の間に余白をつけられる
「CSS」では「padding」や「margin」などのプロパティを記述し、「HTML」の要素の余白が指定可能です。「padding」は要素内部の余白で、「margin」は要素外部の余白になります。
「padding」
<a style=”padding: 8px;”>サンプルテキスト</a>
「padding」は値をいくつ設定するかによって、どの部分の余白に適用するかを指定できます。
具体的には、以下のとおりです。
| 値を1つ設定した場合 | 上下左右のすべての辺に同じ数値のpaddingが適用される |
|---|---|
| 値を2つ設定した場合 | 1つ目の数値は上下、2つ目の数値は左右のpaddingに適用される |
| 値を3つ設定した場合 | 1つ目の数値は上、2つ目の数値は左右、3つ目の数値は下のpaddingに適用される |
| 値を4つ設定した場合 | 上、右、下、左の時計回りの順でpaddingに適用される |
「margin」
<a style=”margin: 8px;”>サンプルテキスト</a>
「margin」も「padding」と同じく、値をいくつ設定するかによって、どの部分の余白に適用するかを指定できます。
具体的には、以下のとおりです。
| 値を1つ設定した場合 | 上下左右のすべての辺に同じ数値のmarginが適用される |
|---|---|
| 値を2つ設定した場合 | 1つ目の数値は上下、2つ目の数値は左右のmarginに適用される |
| 値を3つ設定した場合 | 1つ目の数値は上、2つ目の数値は左右、3つ目の数値は下のmarginに適用される |
| 値を4つ設定した場合 | 上、右、下、左の時計回りの順でmarginに適用される |
「padding」と「margin」は、どちらも余白を作るプロパティです。
しかし「CSS」の仕組みを理解していないと使い分けが難しいでしょう。
「padding」と「margin」の主な使い分けのポイントは、以下のとおりです。
| padding | margin | |
|---|---|---|
| 余白の調整可能箇所 | 要素の内部 | 要素の外部 |
| 背景色 | つけられる | つけられない |
自分で「HTMLファイル」を作成し、実際に「padding」と「margin」を設定して結果を確認してみると、使い分け方を覚えやすくなります。
簡単なアニメーションが実装できる
「CSS3」からは「Transition」や「Animation」というプロパティを使って、要素に簡単なアニメーションが設定可能になりました。そのため、要素に動きをつけられる「JavaScript」というプログラミング言語を使わなくても、簡単なアニメーションであれば「CSS」で実装が可能です。
「文字の色が変わる」
<a>サンプルテキスト</a>
<style>
a {
color: orange;
transition: 0.8s;
}
a:hover {
color: skyblue;
}
a:active {
color: blue;
}
</style>
今回はマウスが要素の上にきたときはskyblueに、そこからクリックすることで0.8秒かけてblue変化する設定を作成しています。コピーして使えるので、ぜひ試してみてください。
CSSの書き方を知ろう！
ここからは、「CSS」の書き方について実際の手順を確認していきます。
- HTMLファイルを作る
- CSSファイルを作る
- CSSの基本構成
- 文字のサイズやフォントを指定する
- 背景を設定する
- 要素の余白を設定する
- レスポンシブ対応をする
工程が多いように見えますが、すべてが必須ではないので、少しずつ読み進めてください。
HTMLファイルを作る
「CSS」単体では使わないため、「HTMLファイル」とあわせて用意する必要があります。テキストファイルを作り、拡張子を「.html」に設定します。今回は、「index.html」というファイル名でデスクトップなどの好きな場所に保存してください。
その後、テキストエディタで「HTMLファイル」を開き、headタグ内で「CSSファイル」の保存場所を指定し「CSS」を読み込めるようにします。今回は、先ほど作成したindex.htmlと同じ場所に「style.css」というファイルをあとから作るとして、読み込みの設定を記述してみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./style.css">
<title>サンプル</title>
</head>
<body>
<a>サンプルテキスト</a>
</body>
</html>
cssの読み込みはlinkタグを使って上記のように記述します。
CSSファイルを作る
テキストファイルを「HTML」のheadタグ内で指定したフォルダ内に作り、拡張子を「.css」に設定します。先ほど作成したindex.htmlと同じ場所に、「style.css」という名前のファイルを作成してください。
テキストエディタでファイルを開いたあとは、実際に適応させたいデザインのプロパティを書いていきます。今回は。index.html内のaタグに対してデザインを設定しましょう。style.cssの中身を、次のコードに書き換えてください。
a {
color: orange;
}
上記のサンプルコードを保存してindex.htmlを開くと、オレンジ色の文字で「サンプルテキスト」と表示されます。以上が、index.htmlで記述したaタグのスタイルをstyle.cssで指定する工程です。
CSSの基本構成
「CSS」はセレクタ・プロパティ・値で構成されています。それぞれの役割は、以下のとおりです。
- セレクタ：どの部分にCSSを適用させるかを指定する
- プロパティ：適用させるスタイルの種類
- 値：設定したいデザイン
たとえば、サンプルコードにもあった
a {
color: orange;
}
においては、
- セレクタ → a
- プロパティ → color
- 値 → orange
になります。
コードを記述するために名前を覚える必要はありません。しかし「CSS」を学習するうえで、簡単に調べられたり人に聞いたりできるようになるためにも、「CSS」の基本構成は覚えましょう。
文字のサイズやフォントを指定する
「CSS」で文字サイズやフォントを変更するには、「fontプロパティ」を使います。
「fontプロパティ」の種類は、以下のとおりです。
| プロパティ名 | 何を設定するか | 値の例 |
|---|---|---|
| font-style | フォントのスタイル | italic |
| font-size | 文字の大きさ | 18px |
| font-family | 文字の字体 | sans-serif |
| font-weight | 文字の太さ | 800 |
| line-height | 行の高さ | 20px |
これらを実際にstyle.css内で使うと、以下のようになります。
「見出しのようなスタイル」
a {
font-size: 2rem;
font-weight: 900;
}
「小さな斜体の文字」
a {
font-size: 10px;
font-style: italic;
}
背景を設定する
「CSS」でWebサイトの背景の色や画像を設定するには、「backgroundプロパティ」を使います。
よく使われる背景プロパティの種類は、以下のとおりです。
| プロパティ名 | 何を設定するか | 値の例 |
|---|---|---|
| background-color | 背景の色 | black |
| background-image | 背景の画像 | ./image.jpg（パス） |
| background-size | 背景画像の大きさ | cover |
| background-repeat | 背景画像の繰り返し | repeat |
| background-position | 背景画像の位置 | center |
| background-attachment | 背景画像の固定やスクロール | scroll |
aタグに「backgroundプロパティ」を利用すると、以下のようなコードになります。
「背景をオレンジ色にする」
a {
background-color: orange;
}
「背景画像を設定する」
a {
background-image: url(./image.jpg);
background-size: cover;
background-position: center;
}
要素の余白を設定する
要素の余白を「CSS」で設定するには、「padding」や「marginプロパティ」を使います。
| プロパティ名 | 何を設定するか | 値の例 |
|---|---|---|
| padding | 要素内部の余白 | 12px |
| margin | 要素外部の余白 | 8px |
「padding」と「margin」を設定するコードの例は、以下のとおりです。
「使い方の例」
a {
padding: 8px;
margin: 16px;
}
「違いを知るために線をつける」
a {
padding: 8px;
margin: 16px;
border: 1px solid black;
}
レスポンシブ対応
Webサイトを閲覧するときは、パソコンだけではなくスマートフォンやタブレットといったほかのデバイスも使用されます。そのためサイトの表示領域を「HTMLファイル」内で設定する必要があり、これを設定するのが「metaタグ」の「viewport（表示領域）」です。
以下のコードが一般的であり、推奨されています。
以下のコードをhead要素内に記述しましょう。
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
設定されている内容は、以下のとおりです。
| 指定値 | 意味 |
|---|---|
| width=device-width | 表示領域をデバイスの幅に合わせる |
| initial-scale=1.0 | ズーム（拡大）率の初期値を1.0に設定 |
あまり細かい内容を覚える必要はありませんが、レスポンシブ対応をすることは非常に重要ですので、「headタグ」内に必ず記述してください。
CSSの基本プロパティを知っておこう！
よく利用する「CSS」のプロパティの種類を確認します。すべてのプロパティを覚える必要はありませんが、何度も使うプロパティだけでも覚えておくことでスムーズなコーディングができるようになるでしょう。
- colorプロパティ
- text-alignプロパティ
- widthプロパティ
- heightプロパティ
- positionプロパティ
今回は、プロパティの指定値についてもわかりやすく解説します。
colorプロパティ
要素に「colorプロパティ」を指定することで、文字の色を指定できます。
aタグに記述されているサンプルテキストの文字の色を変えるコードの例は、以下のとおりです。
<a style=”color: orange;”>サンプルテキスト</a>
ほかにも「カラーコード」（例：#FFFFFF）や「rgb」での指定方法があります。「rgb」は赤（red）緑（green）青（blue）の三色の濃度を0〜255の数値を用いて表現する形式です。
「16進数での指定」
<a style=”color: #FD7E00;”>サンプルテキスト</a>
「rgbでの指定」
<a style=”color: rgb(253, 126, 0);”>サンプルテキスト</a>
以上の3つのサンプルコードはどれも同じ内容です。簡単な指定であればorangeのような英単語で設定し、より細かく指定したい場合は「カラーコード」や「rgb」を用いて設定してみてください。
text-alignプロパティ
「text-align」は、文字の行揃えと均等割り付けを指定するプロパティです。プロパティに設定する値の例は、以下のとおりです。
| 値 | 意味 |
|---|---|
| left | 左に寄せる |
| right | 右に寄せる |
| center | 中央に寄せる |
| justify | 均等に表示する |
ここではbody要素内にあるタグを中央表示させる例を紹介します。
「body内の要素を中央表示」
<body style="text-align: center;"> <a>サンプルテキスト</a> </body>
ファイルを開いて表示すると、サンプルテキストが画面中央に表示されます。ほかにも左寄せや均等表示など、コードを変更して試してみてください。
widthプロパティ
「widthプロパティ」を理解するためには、「ブロック要素」と「インライン要素」の違いを理解する必要があります。「HTML要素」には2種類があり、「ブロック要素」では自動的に改行が行われ、要素の大きさを変更できます。また、一般的に「インライン要素」は大きさの変更はできませんが、「img」や「input」、「button」要素などは大きさの指定が可能です。
ブロック要素である「div」の横幅（width）を指定するコードの例は、以下のとおりです。
「横幅を400pxに設定」
div {
width: 400px;
}
「インライン要素」ではあるものの、大きさの指定ができるbuttonでも同じように横幅を設定できます。
「親要素の横幅の半分に設定」
div {
width: 50%;
}
また、画面サイズの指定も可能です。100vwで画面サイズいっぱいに、1vwで画面サイズの1%を指定できます。
「横幅を画面サイズの半分にする」
div {
width: 50vw;
}
heightプロパティ
「widthプロパティ」と同様に、「heightプロパティ」もブロック要素となります。ブロック要素である「div」の高さ（height）を指定するコードの例は、以下のとおりです。
「高さを60pxにする」
div{
height: 60px;
}
横幅がvwで記述できるのに対し、縦幅はvhで指定できます。
「画面いっぱいの高さに表示する」
div {
height: 100vh;
}
「widthとheightの両方を指定する」
div {
width: 100px;
height: 30px;
}
positionプロパティ
「position」プロパティを使用し、サイトの右上に固定するといった要素の位置指定が可能です。スクロールしても位置が変わらないメニューボタンといった要素には「positionプロパティ」が設定されています。
| 値 | 意味 |
|---|---|
| static | 初期値（指定しない） |
| relative | 相対位置 |
| absolute | relativeが設定されている親要素からの絶対位置 |
| fixed | ウィンドウからの絶対座標 |
| sticky | スクロール前ではstatic、スクロール後ではfixed |
「position」を設定する際にはtop、bottom、right、leftを指定することで具体的な位置の指定が可能です。値はpxや%などで指定します。
「サイト右上付近に固定」
<div>サンプルテキスト</div>
<style>
div {
position: fixed;
top: 10px; right: 10px;
}
</style>
CSSを学習するには？
「CSS」は一般的なプログラミング言語と比べると学習コストの低い言語です。しかし初心者の方は、どのように学習すればよいかわからない方もいることでしょう。
「CSS」を学習するためには、次のような方法があります。
- 書籍で学習する
- スクールに通う
- オンライン学習サービスを使う
どれもメリット・デメリットがあり、自分の目標と状況に応じて適切な学習方法を選択することでスムーズな学習が可能です。ここからは、失敗しない学習方法をいくつか紹介します。
書籍で学習する
「CSS」を書籍で学ぶメリットは、情報が体系的にまとめられておりしっかりと段階的に実践できることです。あまり学習の途中で挫折する心配がなく、調べるために多くのサイトに訪れる必要もないため自分のペースで学習が進められます。
しかし、書籍で学習する際には、「最新情報かどうか」を確認する必要があるでしょう。「CSS」はアップデートされ続けているため、書籍内で紹介されているコードが古いと、最新の環境では非推奨であったり正常に動作しなかったりする場合もあります。なるべく新しい情報が記載されている書籍選びが重要です。
スクールに通う
スクールに通うことの大きなメリットは、工夫されたカリキュラムのもとで集中して学習でき、わからない部分は気軽に相談できる点です。モチベーションを保つ工夫もあり挫折する心配も少ないでしょう。
しかし仕事をしながらスクールに通えない方や、受講料が高いと感じる方には不向きです。自分の状況を確認し、スクールに通うことのメリット・デメリットを比較してみてください。
オンライン学習サービスを使う
オンライン学習サービスはスクールに通う必要がなく、いつでもどこでもプログラミング学習ができます。オンラインで講師に質問や相談できるサービスもあるので、スクールと変わらない環境での学習も可能です。
空いた時間で自分の生活リズムを崩さずに学習でき、質問や相談を通して不安をなくせます。わかりやすい授業動画や教材が用意されているため、モチベーションを保てる方には適している学習方法です。
CSSを学んでWebサイトを作れるようになろう
「HTML」だけでは物足りないサイトが、「CSS」を用いることで綺麗で魅力的なサイトにできます。またさまざまなプロパティを組み合わせることで、オリジナルのサイトを作れるようになるでしょう。
ほかにも、「JavaScript」をプログラミングすることで実装しなければいけない機能も、「CSS」で簡単に実装できます。「HTML」を学習した方は、ぜひCSSを学んでみてください。また、本記事を参考に自分にとって最適な学習方法を選んでみてください。
アクセスランキング 人気のある記事をピックアップ！
コードカキタイがオススメする記事！
2024.06.17
子供におすすめのプログラミングスクール10選！学習メリットや教室選びのコツも紹介
#プログラミングスクール
2022.01.06
【完全版】大学生におすすめのプログラミングスクール13選！選ぶコツも詳しく解説
#プログラミングスクール
2024.01.26
【未経験でも転職可】30代におすすめプログラミングスクール8選！
#プログラミングスクール
2024.01.26
初心者必見！独学のJava学習方法とおすすめ本、アプリを詳しく解説
#JAVA
2024.01.26
忙しい社会人におすすめプログラミングスクール15選！失敗しない選び方も詳しく解説
#プログラミングスクール
2022.01.06
【無料あり】大阪のおすすめプログラミングスクール14選！スクール選びのコツも紹介
#プログラミングスクール
2024.01.26
【目的別】東京のおすすめプログラミングスクール20選！スクール選びのコツも徹底解説
#プログラミングスクール
2024.01.26
【無料あり】福岡のおすすめプログラミングスクール13選！選び方も詳しく解説
#プログラミングスクール
2024.01.26
【徹底比較】名古屋のおすすめプログラミングスクール13選！選び方も詳しく解説
#プログラミングスクール
2024.01.26
【徹底比較】おすすめのプログラミングスクール18選！失敗しない選び方も徹底解説
#プログラミングスクール