Web制作に欠かせない｢CSS｣。言葉は知っていても、どのようなものか知らない人も多いのではないでしょうか。

この記事ではCSSの基礎知識やHTMLとの違いに加えて、CSSの書き方や学習方法などをわかりやすく紹介します。

プログラミングやWebデザインに興味がある方、理想的なWebサイトを作りたい方はぜひ参考にしてみてください。

CSSとは

CSSとは、Webページのデザインを設定するスタイルシート言語のことで、「サイトのどの部分に、どんな装飾をするか」を指定する際に使います。

HTMLとセットで扱われ、HTMLで記述したサイトの構造に、デザインを施す役割を担っています。

つまり、Webページの見た目はCSSによって整えられていると言えるのです。

なお、CSSは、Cascading Style Sheets（カスケーディングスタイルシート）の略で、「シーエスエス」や「スタイルシート」とも呼ばれます。

CSSでできること

CSSでできることは以下の通りです。

上記は一例で、CSSを使えば他にもさまざまなデザインを実装できます。

理想的なWebサイトを作るときはもちろん、ユーザーにとって見やすいWebページを作るときにもCSSの存在は欠かせないでしょう。

そんなCSSは一からデザインするときだけでなく、既存Webページのデザインを変更するときにも使います。

CSSとHTMLの違い

基本的に、CSSはHTMLとセットで使います。それぞれの役割をしっかりと確認しておきましょう。

HTML（エイチティーエムエル）とは、Hyper Text Markup Language（ハイパー・テキスト・マークアップ・ランゲージ）の略で、Webページを制作するためのマークアップ言語のこと。

タイトル・見出し・テキスト・画像・リンクといった、Webページを構成する要素を指定する際に使います。

CSSとHTMLの関係性としては、HTMLの各要素（ヘッダー、見出し、文字など）に対し、CSSを使ってどんな装飾を施すか指示をすることで、さまざまなデザインを実装するといった感じです。

ちなみに、CSSを指定せず、HTMLのみでWebブラウザに表示した場合、タイトルや見出しは説明文と見分けがつかず、画像や動画も元のサイズのまま表示されてしまいます。

さらに、テキストも画像もすべて画面の左側に寄せられた状態で配置されてしまうため、非常に見づらくなってしまうのです。

HTMLについてはこちらの記事で詳しく説明しているので、ぜひ参考にしてみてください。

あわせて読みたい

HTMLとは？初心者でもわかるHTMLの基礎知識やよく使うタグを紹介！ Webプログラミングを学ぶ上で基本となるのが、｢HTML｣と呼ばれる言語。私たちが普段目にしているWebサイトも、このHTMLによって作られています。 しかし、HTMLという言葉…

CSSが必要な理由

CSSはWebサイトをデザインするためのものだということは分かりましたが、具体的にはどのような理由から必要とされているのでしょうか。ここでは、CSSが必要な理由を3つ紹介します。

作業の効率化のため

CSSを使ってHTMLに共通の指示を追加すことで、Webサイトのデザインを一括管理できます。

つまり、一つのCSSファイルを編集すれば、複数あるWebページのデザインを一気に変更・修正することが可能なのです。

例えば、サイト内に複数あるボタンのデザインを変更する場合で考えてみましょう。

この場合、CSSファイルを利用していれば、CSSファイル内の該当部分を変更するだけで、CSSファイルを設定している全てのHTMLファイルに変更内容が自動反映されます。

もしCSSファイルがなければ、デザインを変更したいボタンがあるHTMLファイルを個別に編集する必要があり、非常に作業効率が悪いと言えるでしょう。また、HTMLファイルが多くなればなるほど、変更漏れといったミスなども発生しやすくなります。

だからこそCSSは、Web制作の作業効率を向上させるために必要不可欠なのです。

レスポンシブに対応させるため

2つ目は、各デバイスで閲覧したときに表示スタイルを維持するためです。これをレスポンシブ対応と言います。

レスポンシブ対応をしていなければ、「PCでは見やすいデザインなのに、スマホだと文字が小さすぎたり、画像が見切れる」といった表示崩れが生じてしまうかもしれません。

そこでCSSを使って、PC・スマホ・タブレットといった、各デバイスに応じて表示スタイルを設定し、Webページのレイアウトを崩さず表示する必要があるのです。

そして、どのデバイスでも見やすいデザインにすることは、サイトを訪れるユーザーの滞在時間を長くしたり、問い合わせや商品購入などの成果にも繋がります。

レスポンシブについて詳しく知りたい方はこちらの記事をご覧ください。

あわせて読みたい

【初心者向け】レスポンシブデザインとは？基礎知識から実装方法まで詳しく解説 「レスポンシブ」とは、どんな端末からも見やすいようにWebページのレイアウトを最適化すること。 「レスポンシブって必要なの？」「レスポンシブを実装するときの注意…

間接的なSEO効果を狙うため

はじめに伝えておきますが、CSSが直接SEOに影響することはほぼありません。

しかし、CSSのコードが極端に複雑で冗長だとWebページの読み込み速度が遅くなってしまい、SEO評価に悪影響を及ぼす可能性があります。

一方で、CSSを適切に使っていればコードの量が軽くなり、Webページの読み込み速度がアップします。すると、ユーザビリティが向上することでGoogleからの評価も良くなり、検索結果の上位に表示されやすくなるのです。

なお、SEO（Search Engine Optimization）とは、検索エンジンで上位表示を狙い、流入数やCV数を増やすWebマーケティング戦略のひとつです。

CSSの構成要素

CSSを実装する際には、CSSの構成要素である「セレクタ」「プロパティ」「値」を記述して、HTMLの各要素にデザインを指定していきます。

CSSの基本的な文法は、セレクタ{プロパティ:値}です。

以下に、それぞれの役割を簡単にまとめてみました。

• セレクタ「要素のどこを変えるか」
• プロパティ「デザインの何を変えるか」
• 値「デザインをどのように変えるか」

ここからは、セレクタ・プロパティ・値の特徴や記述例を確認していきましょう。

CSSの構成要素「セレクタ」

セレクタは、HTML要素のどの部分にCSSを適用させたい（デザインを変える）のかを指定するものです。

例えば、見出し（h1）、段落（p）などが対象となります。

CSS記述の際は、「セレクタ{プロパティ:値}」のセレクタ部分に、該当のタグ名（h1、p、bodyなど）や属性名（idやclass）を記入します。

以下、セレクタを指定する記述例です。

例：見出しのデザインを変える

h1{プロパティ:値}

例：段落のデザインを変える

p{プロパティ:値}

CSSの構成要素「プロパティ」

プロパティは、デザインの種類（文字色や文字サイズ、背景色など）を指定するもの。つまり、セレクタで指定した部分をどんなデザインにするか決める要素です。

CSS記述の際は、「セレクタ{プロパティ:値}」のプロパティ部分にデザインの種類を記述し、波括弧「｛ ｝」で囲むと指示が実行されます。

以下、プロパティを指定する記述例です。

例：文字の色を指定する

セレクタ{color:色名}

例：文字のサイズを指定する

セレクタ{font-size:サイズ}

上記のような、文字の色を指定する「color」やサイズを指定する「font-size」以外にも、プロパティにはさまざまな種類があります。ここで少しだけ見てみましょう。

あわせて読みたい

よく使うCSSのプロパティ一覧！初心者向けに現役デザイナーが厳選して紹介 「ホームページを作りたい！」 「Wordpressやブログをカスタマイズしたい！」 そんな時に欠かせないのが文字や要素をカスタマイズするCSSプロパティです。 しかし、いき…

CSSの構成要素「値」

値は、指定したデザインをどのように効かせるかを指定するもの。

例えば、セレクタとプロパティで「見出しの文字色を変える」と指定した場合、値では「何色に変えるのか」を決めるわけです。

CSS記述の際は、「セレクタ{プロパティ:値}」の値部分に色名や数値を記述します。値はプロパティと一緒に{ }で囲みましょう。

以下、値を指定する記述例です。

例：見出しの文字を赤文字にする

h1{color:red}

例：段落の文字サイズを40pxにする

p{font-size:40px}

色を指定するプロパティなら「色名（例：white）」や「カラーコード（例：#FFFFFF）」を記述し、文字サイズを指定するプロパティなら「px」や「%」などの単位や数値を記述する感じです。

繰り返しになりますが、値の内容はプロパティで指定したデザインの種類によって異なります。記述が間違っていると指定した内容もうまく反映されないので注意してください。

CSSの基本的な書き方とポイント

上でも説明しましたが、CSSの基本的な書き方は、セレクタ{プロパティ:値}です。

この形を頭に入れた上で、CCSの書き方のポイントを記述例を見ながら確認していきましょう。

以下、文字の｢色｣と｢サイズ｣を指定する場合の記述例です。

例：見出しを青色、文字サイズを60pxにする

h1{color:blue ; font-size:60px}

プロパティと値は「｛｝」で囲い、プロパティと値の間にはコロン「 : 」を入れます。

文字の色やサイズなど、複数のプロパティを指定するときはセミコロン「 ; 」で区切り、｛｝内にすべての指示を記述しましょう。その場合、セレクタ {プロパティ1 : 値 ; プロパティ2 : 値 ; ・・・}となります。

ちなみに、セミコロン（ ; ）はプロパティが1つだけの時でも記述して問題ありません。というのも、CSSはあとから追記するケースがほとんどなので、はじめからセミコロンを記述しておいた方が楽に編集できます。セミコロンを記述する習慣をつけると良いでしょう。

また、複数のセレクタに同じデザインを適用させることも可能です。その場合は、○○,○○,○○,{プロパティ:値}のように、適用させたいセレクタ（タグ・class名・id名）をカンマ（ , ）で区切って記述します。

ちなみに、CSSでは複数のプロパティを指定することが多いため、コードの間に半角スペース・tab・改行などを入れて、｛｝内を見やすくしておくのもポイント。

CSSの書き方の注意点

一つ目の注意点は、CSSコードは基本的に半角文字で記入することです。

全角文字や全角スペースを使うと指示が適用されないので気をつけましょう。

次に、「 {} 」「 : 」「 ; 」などの記号も記述漏れがあると、CSSが動かなくなる原因となるので注意してください。

CSSの記述場所

CSSを書く場所は、「外部スタイルシート」「内部スタイルシート」「インラインスタイルシート」の3つです。

ここからは、それぞれの記述方法について説明していきます。

外部スタイルシート（CSSファイル読込形式）

外部スタイルシートは、CSSファイルを外部に設置しHTMLファイルで読み込む方法です。

最大のメリットは、デザインを変更する際にCSSファイルのみ編集すれば、複数のHTMLファイルを一括で変更できること。また、CSSファイルが独立しているため管理しやすい点もメリットの一つと言えます。

この方法は後ほど紹介する2つとは違い、HTMLファイル内にCSSを書き込みません。そのため、凝ったデザインにした際にHTMLコードが複雑になったり、デバイスによってはレイアウトが崩れて表示されたりといった欠点も解消できます。

ただし、１ページ（１つのHTMLファイル）だけ別のデザインにしたい場合は、他のページに不要なスタイルが反映されないよう気を付けなければならず、構造化が複雑になる可能性もあるでしょう。

また、CSSのファイルサイズが大きくなると、HTMLファイル内での読み込みに時間がかかり、ページの表示速度が遅くなるデメリットもあります。

とはいえ、コードの追加・修正が楽なので、一般的にはこの記述方法が用いられることがほとんどです。

外部スタイルシートの読み込み方法

まず、任意の名前を付けたCSSファイル（拡張子が「.css」）を作成し、そこにCSSを記述していきます。

次に、HTMLファイル側では作成したCSSファイルを読み込む設定をします。

設定方法は、HTMLの<head>タグ内に、下記のコード記述すればOKです。

<link rel="stylesheet" href="ファイル名.css" >

実際に、外部スタイルシートをHTMLファイルに読み込む際の記述例を見てみましょう。CSSファイル名は「sample」とします。

<head>
<link rel="stylesheet"href="sample.css" >
</head>

上記のコードを解読すると、relは「hrefで指定したファイルはスタイルシートです」という意味になり、hrefは「読み込んでほしいリンク先のURLはsample.cssです」という意味になります。

このように、HTMLファイルの<head>タグ内に<link>タグを追加することで、作成したCSSファイルの記述内容がHTMLに適用できるようになります。

内部スタイルシート（ヘッダー埋め込み形式）

内部スタイルシートは、HTMLの<head>タグにCSSを書き込む方法です。

具体的には、<head>タグ部分に<style>タグを作成し、その中にCSSを記述するのが内部スタイルシートです。

この方法を使えば、1ページ内の同じタグにデザインをまとめて指定できます。ただし、デザインが反映されるのはCSSを記述したページのみです。

インラインスタイルシート

インラインスタイルシートは、HTMLタグにstyle属性を付けて直接CSS（プロパティと値）を書き込む方法です。

コードを書き込む際は、デザインを適用させたい部分のHTMLタグ内に「style=””」と追加します。

HTMLタグに直接書き込むため、CSSファイルを別に用意する必要がない・各タグに個別の指示が出せる・理解しやすいコードになるのがメリット。

一方で、複数のタグやシートに同じデザインをまとめて反映できないため、コードの追加や修正の手間がかかるのがデメリットです。

CSS適用の優先順位

CSSで指定したデザインが重複している場合、基本的には最後に読み込まれるデザインが優先的に適用されます。

例：フォントサイズが重複

h1 { font-size:15px ;
font-size:10px ;
font-size:20px ; }

上の例のようにフォントサイズが重複して指定されている場合、適用されるのは一番最後に記載されている「font-size:20px」です。

また、適用されるCSSの優先順位は記述場所によっても異なります。

最も優先順位が高いのがインラインスタイルシートに記述した内容です。内部・外部スタイルシートは同等の順位となり、最後に読み込まれるデザインが適用されます。

ただし、セレクタに詳細度の高いものがあれば、そちらが優先されるので注意。詳細度は以下の順に評価されます。

さらに例外もあり、｢!important指定｣された部分は上記のルールをすべて無視して、強制的に最優先されるので覚えておきましょう。書き方は、最優先させたいCSSの値の後ろに半角スペースと「!important」を記述すればOK。

しかし、!important指定を多用するとコードが長く複雑になります。その結果、管理が面倒になる・更新の手間がかかるなどの問題が発生するため、!important指定の使用は控えるのが一般的です。

つまり、プロパティの優先度をまとめると以下のようになります。

CSSの学習方法3選

CSSの基礎知識を見てきて、｢CSSについてもっと詳しく知りたい！｣と思った方もいるのではないでしょうか。

そんな方に向けて、おすすめのCSS学習方法を紹介します。

学習サイトで勉強する

｢CSSの勉強を手軽に始めたい｣｢なるべくお金をかけたくない｣という方には、学習サイトの利用がおすすめ。

カリキュラムは初心者から中級者くらいのレベルが中心です。基礎的な部分だけなら無料で学べるサイトも多く、有料サイトの場合も月額1,000円ほど。

学習サイトを利用すればテキストエディタを準備する必要もなく、テキストや動画を参考にしてブラウザ上に自分でCSSコードを記述して学べます。実際に手を動かしながら勉強するため、プログラミング体験としてもおすすめです。

また、スマホやタブレットを使えば、移動中や休憩中などの隙間時間に勉強することも可能。忙しくてプログラミングスクールに通う時間のない方や、自分のペースで学びたい方にもマッチするでしょう。

本で勉強する

｢何から勉強すればいいかわからない｣という方には、本を使った勉強がおすすめです。

本ならCSSについて体系的に順序だてて学べるでしょう。さらに、初心者から上級者向けまでさまざまな書籍が販売されているため、自分のレベルに合わせて購入できます。

ただし、古い本だと現在使われている機能の説明がない場合があるので、なるべく出版日の新しい本を選びましょう。

それから、プログラミングの参考書は2,000円前後のものが多く決して安くはありません。よって、最後までやり遂げられそうな本を選ぶのもポイントです。

また、電子書籍の方が持ち運びには便利ですが、図が小さくて見にくかったりコードの体裁が崩れてしまったりすることもあります。よって、紙の本を購入するのがおすすめです。

プログラミングスクールを受講する

「CSSを効率よく学びたい」｢時間や費用に余裕がある｣という方には、プログラミングスクールを受講するのがおすすめです。

プログラミングスクールでは、初心者向けコースやプログラミング言語別のコースなど、受講者のニーズに合わせたコースがそろっています。

また、現役Webエンジニアや経験者が教えてくれるスクールが多いのも特徴。提出課題に対してフィードバックしてくれるため、実践に活かせるスキルが身につきます。

プログラミングスクールを選ぶ際は、受講料やカリキュラムの内容だけでなく、スクールの実績や評判、カウンセリングや体験授業の印象などもあわせて決めるといいでしょう。

なお、一般的な受講期間は1〜6ヶ月で、受講料は10〜80万円ほどです。

人材紹介会社と提携しているところや人材紹介会社直営のスクールだと、年齢制限などの受講条件をクリアすれば無料で受講できるケースもあります。ちなみに、無料で受講できる理由は転職を成功させることで収益を上げているからです。

プログラミングスクールは都心部に多く開校しています。しかし、オンライン学習に対応しているところもあるので、近くにスクールがなくても大丈夫ですよ。

CSSを学習する際のポイント

ここからはCSSを学習する際のポイントを紹介します。

まず、知識を増やすだけではなく、実際に手を動かしてスキルを身につけるトレーニングをすることが大切。

CSSの知識を暗記するだけでは実践的スキルが身につきません。基礎的な文法や組み方が把握できたら、実際に手を動かしながら自分で考えてコードを書くことで、CSSへの理解もより高まるはずです。

ある程度自分でコードが書けるようになったら簡単なWebページを作ってみましょう。オリジナルで作るのが難しければ、実際にあるサイトを見本にしてみるのもおすすめです。

将来コーダーなどの仕事に就きたい場合は、制作物が企業に提出するポートフォリオにもなります。ポートフォリオとは、自分の作品集のようなものです。複数パターンの制作物を用意して、提出先に応じて使い分けられるようにしておくと就職や転職で有利になるでしょう。

CSSのお悩みはI-SEEDにご相談ください

このような課題は、「更新方法がマニュアル化されていない」「社内にHTML/CSSを理解できる人材がいない」場合に起きやすく、解決には外部のWebパートナーに長期的に伴走してもらう体制を築くことが必要になってきます。

I-SEEDでは、システム開発やWebデザイン、Webマーケティングそれぞれの分野で幅広いスキルと経験を持ったスタッフが、お客様のお悩みをひとつひとつ細かくヒアリング。「使いやすく分かりやすいWebサイト」をモットーに、最適な解決策をご提案します。

メールフォームでのご相談も可能ですので、お気軽にご相談ください。