CSS（Cacading Style Sheets）は、Webサイトの見た目や文字サイズ、色といったデザインやレイアウトを指定するために使うプログラミング言語です。
最近ではHTMLを使ったメールやランディングページ、SEO対策記事など幅広い業務で、HTMLやCSSの知識が必須になっているといっても過言ではありません。
このページでは、プログラミング未経験やマーケティング初心者、これからweb制作について学びたい人でもわかるようにCSSの基本をお伝えいたします。
そもそもCSSとは何なのか、HTMLとの違いやCSSの記述方法、学習方法などもわかりやすくご紹介します。最低限のCSS知識を身に着けて、より見やすいデザインをつくっていきましょう。
この記事でわかること
CSS（Cascading Style Sheets）とは
CSS（Cacading Style Sheets）とは、Webページ内の文字（テキスト）、画像や動画の幅、余白を指定したり、それぞれの表示箇所を指定してレイアウトを決めたりするプログラミング言語です。
上記画像のように、CSSによってタイトルや見出しの文字の大きさ、行間の幅、埋め込む画像の幅や位置が設定されています。
CSSを使うことで、Webページを運営者がイメージする、ユーザーが理解しやすい見た目に変えられます。
それではCSSには具体的にどのような役割があるのか、次に解説します。
CSSとHTMLの違いや役割
基本的にWebページは、HTML（Hyper Text Markup Language）で作成されています。そのHTMLと、CSSを組み合わせることでユーザーだけでなく検索エンジンにコンテンツの内容を詳しく伝えられます。
Webページ作成に使用するHTMLとCSSについて詳しく見ていきましょう。
HTMLとCSSの違い
同じWebページを作成するための言語であるHTMLとCSSは何が違うのでしょうか？
HTMLは簡単にいうと、Webページを作成するための言語です。具体的には、タイトルや画像、文章など、どのような要素がどのような構成で、どんな役割を持っているかを指示するものです。
例えば、当ページのタイトルは「CSSとは？初心者にもわかりやすく基本や書き方、用語などを紹介」ですが、この文章がタイトルであることをHTMLタグで指定しなければ、検索エンジンにとって単なるテキストになってしまいます。
HTMLでは、タイトルや見出し、画像、リンクなど、ページを構成する要素を指示するものと覚えておきましょう。
一方、CSSはHTMLタグが「どのように見えるか」を指定する言語です。CSSを使わなくても、HTMLタグが付与されているとタイトルや見出しがどこにあるか、検索エンジンは理解できます。
しかし、上記のようにCSSを使わずHTMLだけにすると、タイトルや見出しは他のテキストと同じように見え、画像や動画も元ファイルのサイズのまま、画面左詰めになってしまい見た目が悪くなります。
検索エンジンに自社サイト内のWebページ情報を正しく理解してもらうため、HTMLタグをつける必要がありますが、何よりWebページを閲覧してもらうユーザーに分かりやすく見た目の良いものを提供するため、CSSに関する知識は必要です。
CSSの役割
Webサイトを運営する上でCSSを用意する意味、役割は大きく分けて2つあります。
1つ目は、Webサイト全体の管理やメンテナンスが楽になることです。
HTMLタグそのものに直接、Styleという形で装飾することもできますが、その場合、Webサイト内にあるすべてのページやその内容となる文字、要素に対して指定しなければなりません。
CSSを作成して一括管理すれば、同じ見出しや装飾をまとめて出来るだけでなく、メンテナンスもしやすくなります。
2つ目は、1つのWebページに記載するコードの量が減り、SEO対策に効果がある点です。
上記のようにHTMLタグへの直接入力だと、コードが複雑で記述内容も増えてしまうため、ページの読み込み速度が遅くなる可能性があります。
表示速度が遅いと、ページを開こうとしているユーザーにはストレスとなってしまうため、SEO評価も下がります。
HTMLとCSSが別ファイルとして分かれていると、ページ読み込み速度の改善が期待できます。
CSSは、Webページの見た目を一括管理でき、SEO効果も期待できるものと覚えておくと良いです。
CSSを記述する場所について
Webページの見た目を変えられるCSSは、3つの記述場所が選択できます。
それぞれの記述方法と一緒にご紹介します。
HTMLページ内に直接記述
1つ目は、HTMLページ内に直接記述する方法で、インラインスタイルシートとも呼ばれます。
HTMLは、タグをつけることで指定した内容がどのようなものかを検索エンジンに伝えられることを説明しました。
例えば、タイトルの場合、以下のようにHTMLタグをつけます。
<title> CSSとは？初心者にもわかりやすく基本や書き方、用語などを紹介</title>
このようなHTMLページ内のタグに、CSSを付与する方法は2つあります。
HTMLタグに直接スタイルを入力する
上記のタイトルタグに、直接CSSを指定するスタイル（style）を入力することで、見た目を変更できます。
<title style="font-weight: bold;"> CSSとは？初心者にもわかりやすく基本や書き方、用語などを紹介</title>
タイトルタグ内の要素を強調、太字に見せるスタイルにする場合は上記の記述になります。
インラインスタイルシートのメリットは、指定した箇所を直接、希望する見せ方に変えられるのですが、反面、全ての要素に都度スタイルを指定する手間がかかります。
Webページのヘッダー内に記述
2つ目のCSSが記述できる場所は、Webページのヘッダー部分です。
Webページは大きく分けてヘッダー、ボディ、フッターの3要素で構成されています。ヘッダーはWebページ上部、フッターは下部に記述する情報を指します。ヘッダー、フッターはサイト内のWebページでは基本的に同じものが表示されます。
ヘッダー部分（<head>～</head>）には、ページタイトルやロゴなどの情報の他に、Webページ内で有効にさせる外部ファイルを指定する記述も出来ます。また、ここにスタイルタグ(<style>～</style>）を入力し、ページ内のタグや指定したセレクタにCSSを効かせることも可能です。
<head>
<style type="text/css">
.text {
font-size: 14px;
font-weight: bold;
}
</style>
</head>
あらかじめCSSを記述しておくことで、ページ内のそれぞれの要素に細かくスタイルを指定する必要がなくなります。一方でデメリットとして、スタイルを変更する際に各ページのスタイルを変更しなければなりません。
CSSシートを外部に設置
3つ目は、外部にCSSシートを設置する方法です。先に記述したヘッダー内に、外部に作成しておいたCSSシートを有効にする内容を記述することで、Webページ内にスタイルを効かせることができます。
ヘッダー内に1文、指定したCSSシートを呼び込む内容を記述するだけなので、サイト内のページにある見た目を一括管理できるメリットがあります。しかし、CSSシートの記述内容が多くなっていくと、読み込みに時間がかかってしまうデメリットもあることを覚えておきましょう。
上記にご紹介した装飾は、最初にご紹介した各ページ内のタグへの入力、次いでヘッダーへの記述、外部CSSファイルの順にシグナルが弱くなります。外部CSSで指定した装飾があっても、ヘッダー内に異なる記述があればそちらが優先され、さらにページ内のHTMLタグに直接入力されたものがあれば、最優先で表示されます。
当サイトでは、Webページ内の装飾は、管理やメンテナンスが容易なことから外部CSSファイルを作成することを推奨しております。しかし、どうしても指定ページのレイアウトを変えたい場合には、ヘッダーへの入力で対応し、HTMLタグへの直接入力は「最終手段」と考えるようにしましょう。
CSSが設置できる場所とそれぞれのシグナルの強さをお伝えしたところで、次に「記述する方法」について解説します。
CSSの基本的な書き方や用語、単位、色の指定
CSS、というワードだけ聞くと専門的で難そうな印象を持ちますが、記述方法に慣れてしまえば自分の思うようにWebページをデザインできます。
まずは基本的な書き方から解説します。
基本的な書き方
サンプルを元にCSSの基本要素を見ていきましょう。
これは、「HTMLのpタグ（段落）内の文字を強調・太字する」というCSSです。
中身は、pが「セレクタ」、font-weightが「プロパティ」、boldが「値」になります。
CSSの基本的な書き方はセレクタを指定したあとすぐに波カッコ（｛）を置いて改行、次にプロパティを選んでコロン（:）、どのような値を与えるかを指定し、終わったらセミコロン（;）で閉じ、最後に波カッコで閉じます。
この基本的な書き方をまず覚えましょう。では、それぞれの要素について説明します。
セレクタ
セレクタとは、「どの要素にスタイルを効かせるか」を決める要素です。
上記サンプルであればpタグになりますし、HTMLタグだけでなく属性を与える「id」や「class」といったセレクタもあります。HTMLタグをセレクタに選ぶ場合は、その要素をそのまま（pタグならpのみ）を記述、idの場合はシャープ（＃）、classを使うならピリオド（.）の後に記述します。
- p（ページ内の段落）
- #titlesample
- .h2sample
idやclassには、任意の名称を英数半角で入力します。idとclassの違いですが、idは同じidを1つのページ内に複数回使えないのに対し、classは何度でも利用できます。
プロパティ
続いてプロパティの役割ですが、「要素にどのようなスタイルを効かせるか」を指定します。
プロパティには様々な種類がありますが、その一例をご紹介します。
- font-size：文字サイズ
- font-weight：文字の太さ
- text-align：水平方向での表示位置の指定
- vertical-algin：垂直方向での表示位置の指定
- color：文字の色
- background-color：haikeisyoku
- width：表示幅の指定
- height：表示高さの指定
- margin：要素の外側の余白を指定
- padding：要素の内側の余白を指定
まだまだ他にもあります。
プロパティを指定する場合、適用となる要素がそれぞれ異なること（ブロックレベル、インラインなど）、それから子要素を入れる際に継承されるかどうか確認しておきましょう。
値
セレクタ、プロパティが決まったら値を指定して、「指定したスタイルをどの程度効かせるか」指定します。
値はプロパティによって記述方法が異なります。使用したいプロパティに対し、どのような値を入力すべきか合わせて確認しておきましょう。
後述する色指定の場合は、色の名前（コード）でも、RGBやRGBAといった色要素の数値を指定することも可能です。
記述方法が間違っていると、指定した装飾内容が反映されないので注意して正しい値を入力しましょう。
単位
値部分には、単位を入力できるプロパティもあります。
| CSSで指定できる単位例 | |
|---|---|
| px | 幅の指定（絶対で親要素の影響を受けません） |
| ％ | 親要素に対し百分率で指定 |
| em | 親要素に対し倍率で指定 |
| rem | HTMLの文字要素を倍率で指定 |
| vw | ビューポート幅の指定 |
| vh | ビューポート高の指定 |
pxは絶対値で、指定した場合にその数値が変わることはありません。一方、その他の単位は親要素に対しての比率で決まるため、親要素の数値の変化で変わる特徴があります。
上記に挙げたもの以外にも、選べる単位はあり、使用する場面によってどれを選ぶべきかは異なります。
色の指定方法
CSSの基本的な記述方法、セレクタやプロパティ、値について理解したところで要素の色を指定する方法を見ていきましょう。
セレクタは任意、プロパティはcolorに関連するものを選びます。
色指定のCSS例
p{
color:black;
}
上記を元に、色指定の「値」をご紹介します。
カラーコード指定
1つ目は、値に希望する色のカラーコードを入力する方法があります。
上記の例では、黒を意味するblackが入力されており、その他にも色ごとのカラーコードが決められています。カラーコードは、blackのように英単語になっているものと、シャープ（#）から始まる数値のものがあります。
「CSSカラーコード一覧」で検索すると、どの色に対し、どのようなカラーコードが割り当てられているか分かるので検索してみましょう。
カラーコードの記述が間違えていると、CSSが反映されないので注意してください。
RGB指定
RGBとは、色の光の三原色である赤（Red）、緑（Green）および青（Blue）の頭文字を取った色の表現方法です。
色の指定にRGBを使う場合、rgb（赤の要素の数値 緑の要素の数値 青の要素の数値）と入力します。
上記の例で黒をrgbで指定する場合、以下の記述に変わります。
カラーコードに比べ、より細かな色指定ができるのがRGB指定のメリットです。カラーコード同様、「CSS RGBカラーコード一覧」で検索し、希望する色の各色数値を確認しましょう。
RGBA指定
もう1つ、色を指定する方法にはRGBAがあります。
RGBの三原色に、透明度（Alpha）を加えた色の選び方で、rgb数値に透化する割合を入力します。
このCSSだと、「半透明（Alpha値が0.5）」な黒となります。RGAの細かな色指定に透明度が加わることで、さらに詳細な色を指定できるようになります。
CSSは、色だけでもプロパティ、値に幅広い選択肢があるため、調べれば調べるほど奥が深いものです。見た目がおしゃれなWebページを作れるようになりたいなら、CSSを基本からしっかり学びましょう。
CSSをマスターするための学習方法
このぺージのように、インターネットでの情報収集でもCSSの基礎を学ぶことは出来ますが、CSSマスターを目指すなら、その他の学習方法も取り入れた方が良いです。
おすすめのCSS勉強方法をご紹介します。
本を読んで学ぶ
1つ目は、本を読んで学ぶ方法です。
インターネットで情報収集する場合、求めている情報は得られるのですが、体系的に順序だてて学んでいるわけではないため、CSSがうまく反映されない場合の原因究明が難しくなります。
本を読み、ステップバイステップでCSSとは何か、記述方法やルールを身に着けておくと、万が一、スタイルが反映されない場合でも迅速に対応できます。
CSS習得におすすめの本を以下、ご紹介します。
スラスラわかるHTML&CSSのきほん 第3版
画像引用元：Amazon
| 書籍名 | スラスラわかるHTML&CSSのきほん 第3版 |
|---|---|
| 著者 | 鈴木 良治 |
| 出版社 | 技術評論社 (2016/4/27) |
| ページ数 | 336ページ |
| 価格 | 単行本：2,420円（税込み） Kindle版：2,178円（税込み） |
Webサイト作成に必要なHTMLおよびCSSの基礎が身に着く本です。これからWebサイト作りに携わる方に必要な知識を丁寧に解説、知識ゼロからでも迷うことなく学べます。CSSが反映されない、などのつまずきポイントや疑問に上がるであろうことを細かく説明。データ作成からサーバーへのアップロード、インターネットでの公開まで丁寧に解説しています。
ほんの一手間で劇的に変わるHTML&CSSとWebデザイン実践講座
画像引用元：Amazon
| 書籍名 | ほんの一手間で劇的に変わるHTML&CSSとWebデザイン実践講座 |
|---|---|
| 著者 | Mana |
| 出版社 | SBクリエイティブ (2021/2/20) |
| ページ数 | 352ページ |
| 価格 | 単行本：2,728円（税込み） Kindle版：2,455円（税込み） |
書店で働くスタッフがおすすめする、HTMLとCSSを分かりやすく学べる本です。既存の5サイトから、使われているテクニックがどのようなものか、実践的に学びます。Webサイト作成に役立つデベロッパーツールやJavaScriptなどの知識も紹介されており、練習問題を解いていくことで実際にWebサイトを作る方法を身に着けます。
通学や通勤の間に、本で知識を得ながら、パソコンに向かって実際にCSSを作成することを繰り返しましょう。
学習サイトやスクールを利用する
2つ目の方法は、学習サイトへの登録やスクールの利用です。
オンラインでHTMLやCSSを身に着けられる学習サイトは多く、本と同じように体系的にCSSとは何かを学べます。CSS習得におすすめの学習サイトを2つ、ご紹介します。
Progate
Progateは、HTMLやCSSだけでなく、会員登録をすれば様々なプログラミング言語を無料で学習できるWebサイトです。
HTML、CSSの役割と使い方に関する説明の後、実際に入力してどのような結果が表示されるか、また間違いがあればその部分を指摘してくれるため、学びやすいです。
コースによっては有料なものもありますが、入門・初級編は無料のものがほとんどなので、自分のレベルに合わせてコースを選び、HTMLやCSSを身に着けられます。
ドットインストール
ドットインストールは、Webサイト作成に必要なHTML、CSSをどのように使うか、動画で解説してくれるWebサイトです。
こちらも会員登録をすることで基礎コースは無料、上級者コースは有料で参加できます。
自社サイトの運営だけならHTMLやCSSでも良いですが、これらの言語を身に着け、さらに難しいphpやpythonなどを使い、自分好みのWebサイトを作りたい方にもおすすめです。
学習サイトだとどうしても疎かになって途中でやめてしまうかも、と思う方には参加必須のプログラミングスクールはいかがでしょうか。
プログラマカレッジ
最短60日間でプログラマーとしての就職を目指すプログラマカレッジは、完全無料でHTMLやCSS、さらにその他の言語まで学習できるオンラインスクールです。Webマーケティング業界に興味を持ち、就職や転職をお考えの方におすすめです。
余暇に本やオンラインスクールを利用してHTMLやCSSをマスターし、自分の価値を高めましょう。
まとめ
Webサイトの見栄えを変えるCSSの基本的な記述方法や、学習方法をご紹介しました。
CSSをマスターできると、Webサイトのデザインだけでなく、レイアウトの変更もできるようになり、Googleが求めるモバイルフレンドリーに沿ったスマホやタブレットでの見え方も思うように変えられるようになります。
自社サイトにアクセスしたユーザーが見やすく使いやすいWebサイトを目指すためにも、CSSを身に着けておきましょう。
文字やリスト、表（テーブル）などの見た目を改善することは、UI/UXの向上にもつながります。SEOにおいて重要度の高い、UI/UXについては以下のページをご参照ください。
