東証スタンダード上場企業のジオコードが運営！

Web制作がまるっと解るWebマガジン

資料ダウンロード

記事を探すメニュー

ジオコードのWeb制作

Web制作マガジン > サイト実装/技術 > 【初心者向け】CSSとは？実際の例を交えて役割・用語・書き方を分かりやすく解説

サイト実装/技術

更新日：2024年 09月 03日

【初心者向け】CSSとは？実際の例を交えて役割・用語・書き方を分かりやすく解説

【監修】株式会社ジオコード Web制作事業責任者
高松建太郎

CSSは、Webサイトのビジュアルとレイアウトを整えるための技術です。CSSを活用すれば、Webサイトのデザイン性を向上させられます。しかし初心者の方はHTMLとの違いや関連性がよく分からないかもしれません。

本記事では、CSSが具体的にどのようなものであるか、HTMLとどのように異なるのか、そして具体的なCSSの記述方法を例を用いて詳しく解説していきます。

CSSとは？

CSSとは、Webサイト上のデザインを設定する技術・言語です。具体的には、Webサイト上にある文字の大きさやフォントの種類、色や画像の配置などをCSSで指定できます。正式にはCascading Style Sheet（カスケーディングスタイルシート）と言い、シーエスエスやスタイルシートと呼ばれることが一般的です。

実際のCSS構造と例

では実際に例を挙げてCSSの構造を見てみましょう。以下の記述は「CSSとは？」という見出し1を、CSSで青色に設定しています。


<html>
～
  <head>
    <style>
    h1 { color: blue; }
    </style>
  </head>
  <body>
    <h1>CSSとは？</h1>
    <p>CSSとは、Webサイト上のデザインを設定することを指す～</p>
  </body>
</html>

上記はHTMLの<head></head> 内にCSSを記述する「内部スタイルシート」という書き方です。<style></style>で括っている範囲がCSSでの指示になります。他の書き方・記述場所は後述にて紹介します。

CSSとHTMLの違いとは？

CSSとHTMLの大きな違いは、役割（担当する範囲）です。Webページの土台を築くのがHTMLで、それらの装飾を担当するのがCSSと考えると分かりやすいでしょう。以下では、CSSとHTMLの役割を交えながら違いを解説していきます。

CSSの役割はWebページの見栄えを整えること

CSSの役割はWebページの見栄えを整えることです。HTMLはWebページの構造やWebページに表示する内容を担当するのに対して、CSSはWebページの装飾を担当します。HTMLの構造要素に対して、文字の大きさを整えたり、色を指定したりします。改行や画像の位置などを指定すれば、HTMLだけではできないレイアウトも可能です。さらにポインタを乗せると色が変わるなど、アクションを加えることもできます。

HTMLの役割はWebページの構成を組むこと

Webページの見栄えを整えるCSSに対し、HTMLはWebページの構造を決定します。「Webサイトのどの辺りに、どのようなことを記述するのか」といったことは、HTMLで記述します。

CSSがなくてもHTML単独でWebページの制作は可能です。しかし、CSSを使用しない場合は簡素なWebページになってしまいます。直線的な配置にしかできなかったり、読み手のブラウザによってはデザインが崩れて見えたりもします。HTMLとCSSはセットで使ってこそ、人の目を惹きつける魅力的なWebページが制作できるようになります。

CSSはなぜ必要？CSSの3つのメリット

CSSはWebページを見やすくするだけでなく、SEO対策やメンテナンス性の向上につながるというメリットもあります。3つのメリットを交えながら、CSSの必要性を確認してみましょう。

デバイスごとのデザインを一括管理できる

CSSが必要とされる理由は、デザインの適応性の高さにあります。HTMLでもページごとに色やフォントを変えれば、異なる雰囲気に仕上げることが可能です。

一方、CSSではスマートフォンやパソコンなど、デバイスごとのデザインを一括管理し、それぞれ反映できます。「同じWebページだけど、デバイスごとの見え方を簡単に変えたい」というときに役立つでしょう。

SEO対策になる

CSSを使用すると間接的にSEO対策になります。SEO（検索エンジン最適化）は、Webサイトを検索結果の上位に表示させるための施策です。

CSSによってWebページの構造とデザインを分離することができます。また、効率的に書かれたCSSを用いることで、ページの読み込み時間を短縮する効果が期待できるため、ユーザー体験の向上につながります。検索エンジンはユーザー体験を重視するため、読み込み速度の向上はSEOの評価を高める要因となり得ます。

さらに、CSSの適切な適用は、視覚障害者を含むさまざまなユーザーに対するアクセシビリティを改善することに間接的に寄与します。具体的には、CSSを使ってコンテンツの表示をカスタマイズし、読みやすくすることができますが、アクセシビリティの向上は主にHTMLの構造やARIAラベルの適切な使用に依存します。

このように、CSSの適切な管理と最適化は、Webサイト全体のパフォーマンス向上に貢献し、間接的にSEO対策を強化します。

メンテナンス性を上げられる

CSSを使用することで構造とデザインを別で管理できるため、Webページのメンテナンスがしやすくなるのも利点です。

HTMLにデザインを組み込むと、コードが複雑化しやすくミスがあっても発見しにくくなります。一つのミスでも気づかなければ構造もろとも崩れてしまいかねません。CSSを活用することで、メンテナンスしやすく、トラブルを引き起こしにくくなります。

CSSを記述する場所は3つ

CSSを記述する場所は「インラインスタイル」「内部スタイルシート」「外部スタイルシート」の3つです。それぞれの特徴とメリット・デメリットを解説していきます。

インラインスタイル

一つ目がHTMLタグにstyle属性を指定して直接書き込む「インラインスタイル」です。HTMLのファイルに記述するため、CSS用のファイルを別途用意する手間を省けるのがメリットです。一方、構造・デザインが一括して保存されるため、デザインのみの保管や適用はできません。複数のページ管理には向かないのがデメリットです。

内部スタイルシート

Webページの大本となるHTMLのうち、headタグ内に書き込む形式を内部スタイルシートと呼びます。インラインスタイルと同様に、CSS用のファイルは必要ありません。複数ページの管理には向かない点はデメリットですが、特定ページのデザインを一括して管理できるのがメリットです。

外部スタイルシート

HTML用とは別にCSS用のファイルを用意して、デザインを指定する形式が外部スタイルシートです。この形式では、同一サイト内または異なるサイトから、外部のCSSファイルをHTMLファイルから読み込んで適用させます。外部スタイルシートの大きなメリットは、Webページのデザインを一括で変更できることです。ファイルが2つ必要なことはデメリットかもしれませんが、構造・デザインと記述を分けるためトラブルも少なく、複数ページの管理にも好適です。

CSSの基本的な構造と書き方

CSSは基本的な構造を例を挙げて見てみましょう。CSSの命令文は、セレクタ・プロパティ・値の3要素で構成されます。以下の例は、HTMLで<h1></h1>タグによって指定されている箇所に青色を装飾するCSSです。

h1 { color: blue; }

上記では、セレクタがh1、プロパティがcolor、値がblueとなります。「どの要素（セレクタ）の、何を（プロパティ）、どのように（値）」という構造です。

セレクタ、プロパティ、値について、もう少し詳しく説明します。

セレクタ

セレクタは、Webページ上で特定のHTML要素にスタイルを適用する際に使用される用語です。h1{ … }のようにHTMLタグに指示を与えるものはタグセレクタといいます。セレクタの種類は他にもあるので、以下に一例を紹介します。

.class { … }：クラスセレクタ
#id { … }：IDセレクタ
[attr]：属性セレクタ

クラスセレクタはclass属性に指定された要素にスタイルを適用するセレクタで、IDセレクタは特定の要素のみにスタイルを適用するセレクタです。また、属性セレクタには、要素にその属性があるかどうかで、より具体的に指定する働きがあります。
HTMLのタグが少し分かるようならタグセレクタを、Webページ内の特定要素のデザインを一括して管理したいならクラスセレクタを覚えておくと便利です。

例えば、画像に上マージンを設定するには、HTML内で特定の画像に.photoクラスを割り当て、CSS内に.photo { margin-top: 15px; }と記述します。これにより、.photoクラスが割り当てられた画像の上に15ピクセル分の余白が生じます。

プロパティ

セレクタで指定した部分の、何にデザインを適用させるかを決めるのがプロパティです。前述の例では「color」というプロパティを使用して文字の色を指定しました。プロパティにもさまざまな種類があるので、以下にその一例を挙げます。

font-size　文字の大きさ
font-weight　文字の太さ
background-color　背景色
text-align　テキストの行揃え
margin　外側の余白
padding　内側の余白
width　表示幅
height　表示高さ

値

プロパティで指定したものを、どのようにするのかを決めるのが値です。値の書き方はプロパティによって異なるため、指定した要素に応じた値を覚えましょう。具体例は以下のようになります。

font-size: 20px;　文字の大きさを20ピクセルに設定
background-color: lightgreen;　背景色ライトグリーンに設定
text-align: center;　テキスト中央揃えに設定

初心者でもできるCSS作成手順

ここでは外部スタイルシート形式のCSSの作成手順について簡単にご紹介します。メモ帳かメモ帳に見合ったツールがあれば作成できるので、CSS初心者の方は練習してみましょう。なお、具体的に記述するコードについては割愛しています。

手順（1）メモ帳を開き、HTMLを記述する
手順（2）「デスクトップ」に.htmlの拡張子で保存する
手順（3）新しくメモ帳を開き、デザイン適用のコードを記述する
手順（4）「デスクトップ」に.cssの拡張子で保存する
手順（5）（2）でデスクトップに保存したブラウザを開き、変更点を確認する

まずメモ帳を開き、Webページの土台となるHTMLを記述してください。記述後は分かりやすい名前を付けてhtmlの拡張子でデスクトップに保存し、ブラウザのアイコンが作成されているかどうか確かめましょう。

次に新しいメモ帳を開き、デザイン変更用のコードを記述します。こちらは.cssの拡張子でデスクトップに保存し、手順（2）で作成されたブラウザアイコンを開いてみましょう。デザインが適用されていれば完成です。

CSSの習得方法とポイント

CSSは上記の方法で作成できますが、Webサイトを運用するために本気で学習したいという方もいるでしょう。主な習得方法は、参考書や学習サイトを使う独学とスクールを利用する方法です。それぞれ気を付けなければならないポイントもあるため、あわせて確認してみましょう。

独学で習得を目指す場合

CSS習得を独学で目指す場合、プログラミングの参考書や学習サイトを使うことになります。無料で学べる学習サイトも珍しくありません。ご自分のペースでコツコツと勉強したい方に向く習得方法です。

参考書を読めば、基本的なCSSやHTMLに関する知識を身に付けられます。手元に一冊置いておけば、Webサイト作成中の辞書代わりとしても活用できるでしょう。参考書選びのポイントとしては、なるべく出版されてから新しい日付の参考書を購入することです。情報が古ければ、時代遅れの知識を習得してしまうかもしれません。また、参考書だけに頼りすぎず、実際に手を動かしながら技術を習得することが大切です。

スクールで習得を目指す場合

プログラミングスクールで習得を目指す場合、実際にサイトを作りながら感覚的に学べます。プログラミングスクールに通うと、随時プロの講師に質問できるため、着実に知識を増やしていけます。いち早くCSSを習得したい方に好適です。

通うスクールを決めるときは、ご自身のレベル・目的に合っているかどうか見極めましょう。独学より費用がかかりやすいため、よく考えて行動することが大切です。基礎や授業だけに縛られず、オリジナルのWebサイト作成を目指すとよりステップアップできるでしょう。

CSSを活用して見やすくおしゃれなWebサイトに！

CSSは文字や色、配置などのWebページの見栄えを整えることができるので、Webデザインの要といえます。HTMLだけではどうしても単調なデザインとなり、ユーザーを惹きつけるWebサイトを制作するのは難しいでしょう。CSSは使い方次第でメンテナンス性を向上させたり、SEO対策になったりするメリットがあります。ただCSSを使いこなしてWebサイト制作をするにはある程度の時間と根気が必要です。

もしこれからWebサイトを立ち上げたい、既存のWebサイトをリニューアルしたいとお考えの場合はプロに依頼するのもおすすめです。株式会社ジオコードは、さまざまな種類の業界・企業に対応したデザインのWebサイト制作や、マーケティングを意識したWebサイト制作を提供しております。Webサイト制作なら、Webマーケティングに強い株式会社ジオコードにぜひご相談ください。

お問い合わせ・無料相談