CSSとは？HTMLとの違いと基本の書き方を初心者向けに解説

Webサイトを作成する際に欠かせない技術として、HTMLとCSSがあります。HTMLだけでは文字と画像が並ぶだけの味気ないページになってしまいますが、CSSを使うことで色鮮やかで美しいデザインのWebサイトに変身させることができます。本記事では、CSSとは何か、HTMLとの違いや役割分担、基本的な書き方から実際に使える具体例まで、初心者の方にもわかりやすく解説します。これからWebサイト制作を始める方や、CSSの基礎を改めて学び直したい方に向けて、つまずきやすいポイントも含めて丁寧に説明していきます。

CSSとは？

CSS（Cascading Style Sheets）は、Webページの見た目を定義するスタイルシート言語です。HTMLで記述された文書構造に対して、文字の色やサイズ、背景色、レイアウトなどの装飾を指定することができます。「シーエスエス」または「スタイルシート」と呼ばれ、現代のWeb制作において欠かせない技術となっています。

CSSの最大の特徴は、HTMLから装飾に関する記述を分離できることです。これにより、文書の構造（HTML）と見た目（CSS）を別々に管理でき、メンテナンス性が大幅に向上します。例えば、100ページあるWebサイトの見出しの色を変更したい場合、CSSファイル1つを修正するだけで全ページに反映されるため、作業効率が格段に上がります。

また、CSSは「カスケーディング（段階的な継承）」という仕組みを持っています。これは、複数のスタイルが重なった場合に、特定のルールに従って優先順位が決まることを意味します。この特性により、基本的なスタイルを定義しつつ、必要に応じて個別の要素に特別なスタイルを適用することが可能になります。

HTMLとCSSの役割と違い

Webページを構築する際、HTMLとCSSは車の両輪のような関係にあります。しかし、それぞれが担う役割は明確に異なり、この違いを理解することがWeb制作の第一歩となります。HTMLが建物の骨組みだとすれば、CSSは内装や外装にあたります。両者がどのように連携し、どのような仕組みでWebページを形作っているのか、この章では具体的な例を交えながら、HTMLとCSSの役割分担と連携方法について詳しく見ていきます。

HTMLとCSSは、それぞれ明確に異なる役割を持っています。HTMLは「Hyper Text Markup Language」の略で、Webページの骨格となる構造を定義します。見出し、段落、リスト、画像の配置など、コンテンツの意味づけを行うのがHTMLの役割です。一方、CSSはその骨格に対して視覚的な装飾を加える役割を担います。

具体的な例で説明すると、HTMLで「<h1>重要なお知らせ</h1>」と記述した場合、これは「最も重要な見出し」という意味を持ちます。しかし、HTMLだけでは文字が黒色で表示されるだけです。ここにCSSで「color: red; font-size: 32px;」と指定することで、赤色の32ピクセルの文字として表示されるようになります。

このような役割分担により、同じHTMLファイルに異なるCSSを適用することで、まったく違うデザインのWebページを作ることができます。例えば、パソコン用とスマートフォン用で異なるCSSを用意し、デバイスに応じて最適なデザインを表示させることも可能です。HTMLが内容の意味を定義し、CSSがその見た目を整えるという分業体制が確立されています。

HTMLとCSSを連携させる方法は主に3つあります。最も一般的な方法は、外部スタイルシートを使う方法です。CSSを別ファイルとして作成し、HTMLのhead要素内でlink要素を使って読み込みます。「<link rel=”stylesheet” href=”style.css”>」のように記述することで、HTMLファイルとCSSファイルを関連付けることができます。

2つ目は内部スタイルシートで、HTMLのhead要素内にstyle要素を記述する方法です。「<style>h1{color:blue;}</style>」のように、HTMLファイル内に直接CSSを書き込みます。特定のページだけに適用したいスタイルがある場合に有効ですが、複数ページで同じスタイルを使う場合は管理が煩雑になるデメリットがあります。

3つ目はインラインスタイルで、HTMLタグに直接style属性を追加する方法です。「<p style=”color:green;”>緑色の文字</p>」のように記述します。手軽に使える反面、HTMLとCSSが混在してメンテナンス性が低下するため、特別な理由がない限り推奨されません。これらの方法は併用も可能で、優先順位に従って適用されます。

CSSの基本的な書き方

CSSを使いこなすためには、まずその基本的な文法を理解する必要があります。CSSの記述は「セレクタ」「プロパティ」「値」という3つの要素で構成されており、これらを正しく組み合わせることで、意図したデザインを実現できます。一見複雑に見えるCSSも、この基本構造を押さえれば、誰でも書けるようになります。この章では、CSSの基本的な書式と、それぞれの要素が持つ役割について、初心者にもわかりやすく解説していきます。

セレクタは、CSSのスタイルを適用する対象を指定する部分です。最も基本的なセレクタは要素セレクタで、「h1」「p」「div」などのHTMLタグ名をそのまま記述します。例えば「h1 { color: blue; }」と書けば、すべてのh1要素の文字色が青になります。

より詳細な指定には、クラスセレクタとIDセレクタを使います。クラスセレクタは「.」（ドット）で始まり、複数の要素に同じスタイルを適用したい場合に便利です。「.highlight { background-color: yellow; }」と定義し、HTMLで「<span class=”highlight”>重要</span>」と記述すれば、黄色の背景が適用されます。

IDセレクタは「#」（シャープ）で始まり、ページ内で一意の要素を指定する際に使用します。「#header { height: 100px; }」のように定義し、「<div id=”header”>」に対してスタイルを適用します。また、複数のセレクタを組み合わせる子孫セレクタ（「div p」）や、複数の要素に同じスタイルを適用するグループセレクタ（「h1, h2, h3」）など、より高度な指定方法も存在します。

プロパティは、セレクタで指定した要素に対して、具体的にどのようなスタイルを適用するかを定義する部分です。文字に関するプロパティには「color」（文字色）、「font-size」（文字サイズ）、「font-family」（フォント種類）、「font-weight」（文字の太さ）などがあります。これらを組み合わせることで、テキストの見た目を細かく調整できます。

レイアウトに関するプロパティも重要です。「width」（幅）、「height」（高さ）、「margin」（外側の余白）、「padding」（内側の余白）を使って、要素の大きさや配置を制御します。「display」プロパティでは、要素の表示形式を「block」（ブロック要素）、「inline」（インライン要素）、「flex」（フレックスボックス）などに変更できます。

背景に関するプロパティには「background-color」（背景色）、「background-image」（背景画像）、「background-repeat」（背景の繰り返し）などがあります。また、「border」プロパティで枠線を追加したり、「box-shadow」で影を付けたりすることも可能です。これらのプロパティを適切に組み合わせることで、洗練されたデザインを実現できます。

値は、プロパティに対して具体的な設定内容を指定する部分です。色の指定には、カラーネーム（「red」「blue」）、16進数表記（「#ff0000」）、RGB値（「rgb(255, 0, 0)」）、RGBA値（「rgba(255, 0, 0, 0.5)」）などの方法があります。透明度を含むRGBA値は、要素を半透明にしたい場合に便利です。

サイズの指定にはさまざまな単位が使用できます。「px」（ピクセル）は絶対的な単位で、画面の解像度に関係なく固定サイズを指定します。「%」（パーセント）は親要素に対する相対的なサイズ、「em」は現在のフォントサイズに対する相対値、「rem」はルート要素のフォントサイズに対する相対値です。レスポンシブデザインでは、相対的な単位の使用が推奨されています。

その他の値として、「auto」（自動計算）、「inherit」（親要素から継承）、「initial」（初期値）などの特殊な値もあります。また、複数の値を組み合わせる場合は、スペースやカンマで区切ります。例えば「margin: 10px 20px 10px 20px;」のように、上右下左の順番で値を指定することができます。

CSSを記述する3つの方法

CSSをHTMLに適用する方法は、大きく分けて3つあります。それぞれにメリット・デメリットがあり、用途や規模に応じて使い分けることが重要です。小規模なテストから大規模なWebサイト制作まで、状況に応じて最適な方法を選択することで、効率的な開発が可能になります。この章では、インラインスタイル、内部スタイルシート、外部スタイルシートという3つの記述方法について、それぞれの特徴と使いどころを詳しく解説します。

インラインスタイルは、HTMLタグのstyle属性に直接CSSを記述する方法です。「<p style=”color: red; font-size: 18px;”>赤い文字</p>」のように、タグ内にスタイルを埋め込みます。この方法は、特定の要素だけに一時的なスタイルを適用したい場合や、メールテンプレートなど外部CSSが使えない環境で使用されます。

インラインスタイルの利点は、その要素にのみ確実にスタイルが適用されることです。また、外部ファイルを読み込む必要がないため、単純なページやテスト時には手軽に使えます。優先順位も最も高いため、他のCSSルールを上書きしたい場合にも有効です。

しかし、デメリットも多く存在します。HTMLとCSSが混在することで可読性が低下し、同じスタイルを複数の要素に適用したい場合は、すべてのタグに同じ記述を繰り返す必要があります。また、スタイルの一括変更が困難になるため、大規模なサイトでは推奨されません。保守性を考慮すると、他の方法を優先的に検討すべきでしょう。

内部スタイルシートは、HTMLのhead要素内にstyle要素を作成し、その中にCSSを記述する方法です。「<style>h1 { color: navy; } p { line-height: 1.5; }</style>」のように、HTMLファイル内でスタイルをまとめて管理します。単一のHTMLページで完結するランディングページなどに適しています。

この方法の利点は、外部ファイルを必要としないため、ファイル管理がシンプルになることです。また、そのページ固有のスタイルを定義する際に便利で、外部スタイルシートと組み合わせて使用することもできます。ページの読み込み時にCSSファイルを別途ダウンロードする必要がないため、小規模なページでは表示速度の向上も期待できます。

一方で、複数のページで同じスタイルを使用する場合、各ページに同じCSSを記述する必要があり、メンテナンスが煩雑になります。また、HTMLファイルのサイズが大きくなり、コンテンツとデザインの分離という観点からも理想的ではありません。そのため、特定のページにのみ適用する特殊なスタイルがある場合に限定して使用することが推奨されます。

外部スタイルシートは、CSSを独立したファイル（通常は.css拡張子）として作成し、HTMLからリンクする方法です。HTMLのhead要素内で「<link rel=”stylesheet” href=”styles.css”>」と記述することで、CSSファイルを読み込みます。これは現在のWeb制作において最も推奨される方法です。

外部スタイルシートの最大の利点は、複数のHTMLページから同じCSSファイルを参照できることです。サイト全体のデザインを統一でき、スタイルの変更も1つのファイルを修正するだけで全ページに反映されます。また、ブラウザがCSSファイルをキャッシュするため、2回目以降のページ表示が高速になります。

さらに、HTMLとCSSを完全に分離できるため、それぞれの役割が明確になり、チーム開発においても作業分担がしやすくなります。CSSファイルを複数作成し、用途に応じて使い分けることも可能です。例えば、基本スタイル用、レイアウト用、モバイル対応用など、機能別にファイルを分割することで、より効率的な管理が実現できます。

覚えておきたいCSSプロパティの例

CSSには数百種類のプロパティが存在しますが、実際によく使用するものは限られています。まずは基本的なプロパティをマスターすることで、多くのデザイン要求に対応できるようになります。文字の装飾、背景の設定、要素のサイズ指定など、日常的に使用する重要なプロパティを理解することが、CSSスキル向上への近道です。この章では、初心者が最初に覚えるべき基本的なプロパティについて、具体的な使用例とともに紹介します。

colorプロパティは、テキストの色を指定する最も基本的なプロパティです。「h1 { color: #ff6b6b; }」のように記述すると、h1要素の文字色が指定した色に変わります。色の指定方法は複数あり、用途に応じて使い分けることが重要です。カラーネーム（「red」「blue」など）は直感的ですが、選択肢が限られています。

16進数表記（#rrggbb形式）は最も一般的な方法で、赤・緑・青の各色を00からffまでの16進数で表現します。「#ff0000」は純粋な赤、「#00ff00」は純粋な緑を表します。省略形として「#f00」のように3桁で記述することも可能です。より細かい色調整が必要な場合は、この方法が適しています。

RGB値やRGBA値での指定も可能です。「color: rgb(255, 107, 107);」のように、各色を0から255の数値で指定します。RGBA値では4番目のパラメータで透明度を指定でき、「color: rgba(255, 107, 107, 0.8);」とすれば80%の不透明度になります。最近ではHSL値での指定も増えており、色相・彩度・明度で直感的に色を調整できます。

background-colorプロパティは、要素の背景色を指定します。「div { background-color: #f0f0f0; }」と記述すれば、div要素の背景が薄いグレーになります。このプロパティは、要素を視覚的に区別したり、重要な情報を強調したりする際に頻繁に使用されます。透明度を含むRGBA値を使えば、背景を半透明にすることも可能です。

背景色は要素のコンテンツ領域とパディング領域に適用されますが、マージン領域には適用されません。そのため、要素間の余白を背景色で埋めたい場合は、パディングを使用する必要があります。また、「background-color: transparent;」と指定すれば、背景を透明にできます。

グラデーション背景も作成可能です。「background: linear-gradient(to right, #ff6b6b, #4ecdc4);」のように記述すると、左から右へのグラデーションが適用されます。radial-gradient（円形グラデーション）やrepeating-linear-gradient（繰り返しグラデーション）など、さまざまなグラデーション効果も利用できます。これらの機能により、画像を使わずにリッチな背景デザインを実現できます。

font-sizeプロパティは、テキストのサイズを制御する重要なプロパティです。「p { font-size: 16px; }」のように指定すると、段落の文字サイズが16ピクセルになります。適切な文字サイズの設定は、読みやすさとデザインのバランスを保つ上で欠かせません。単位の選択によって、固定サイズまたは相対サイズでの指定が可能です。

ピクセル（px）での指定は最も直感的ですが、ユーザーのブラウザ設定を無視する可能性があります。相対単位のem（親要素のフォントサイズに対する倍率）やrem（ルート要素のフォントサイズに対する倍率）を使用すると、より柔軟なデザインが可能になります。「font-size: 1.2rem;」とすれば、基準サイズの1.2倍になります。

レスポンシブデザインでは、ビューポート単位（vw、vh）も活用されます。「font-size: 4vw;」とすると、画面幅の4%のサイズになり、デバイスのサイズに応じて自動的に調整されます。また、メディアクエリと組み合わせることで、画面サイズごとに異なるフォントサイズを設定することも可能です。

widthとheightプロパティは、要素の幅と高さを指定します。「div { width: 300px; height: 200px; }」と記述すれば、300×200ピクセルのボックスが作成されます。これらのプロパティは、レイアウトの基本となる要素のサイズを制御する際に不可欠です。固定値だけでなく、相対値での指定も可能で、柔軟なレイアウト設計ができます。

パーセント指定は親要素に対する相対値で、「width: 50%;」とすれば親要素の半分の幅になります。また、「width: auto;」と指定すると、コンテンツに応じて自動的に幅が調整されます。「max-width」や「min-width」を使えば、最大幅や最小幅を設定でき、レスポンシブデザインに対応できます。

高さの指定には注意が必要です。「height: 100%;」と指定しても、親要素の高さが明確でない場合は期待通りに動作しません。また、「height: 100vh;」とすれば、ビューポートの高さいっぱいに要素を広げることができます。box-sizingプロパティと組み合わせることで、パディングやボーダーを含めたサイズ計算も制御できます。

CSS初心者がつまずくポイントQ&A

CSSを学習する過程で、多くの初心者が同じような問題に直面します。「書いたはずのスタイルが反映されない」「セレクタの記号の意味がわからない」など、つまずきやすいポイントは共通しています。これらの問題を事前に知っておくことで、学習の効率が大幅に向上します。この章では、CSS初心者がよく遭遇する問題とその解決方法、さらに効率的な学習方法について、Q&A形式でわかりやすく解説していきます。

CSSが意図通りに適用されない場合、まず確認すべきはファイルパスの記述ミスです。外部スタイルシートのリンクで、href属性のパスが間違っていることがよくあります。相対パスで記述している場合は、HTMLファイルからCSSファイルまでの正しいパスを確認しましょう。また、ファイル名の大文字小文字の違いも、サーバーによってはエラーの原因になります。

次に、セレクタの記述ミスを確認します。クラス名の前の「.」やID名の前の「#」を忘れていないか、スペルミスがないかを確認しましょう。また、HTMLタグのclass属性やid属性の値と、CSSのセレクタが一致しているかも重要です。タイポは初心者に限らず、経験者でもよくあるミスです。

最後に、CSSの優先順位を確認します。同じ要素に複数のスタイルが適用されている場合、詳細度の高いセレクタや、後から記述されたスタイルが優先されます。ブラウザの開発者ツールを使って、どのスタイルが適用されているかを確認すると、問題の原因を特定しやすくなります。

「#」はIDセレクタ、「.」はクラスセレクタを表します。IDセレクタは、HTML内で一意の要素を指定する際に使用します。例えば、「#header」というセレクタは、「id=”header”」という属性を持つ要素にのみ適用されます。1つのページ内で同じIDを複数の要素に付けることはできません。これは、そのページ内で唯一無二の要素を表すためです。

一方、クラスセレクタは複数の要素に同じスタイルを適用したい場合に使用します。「.highlight」というセレクタは、「class=”highlight”」という属性を持つすべての要素に適用されます。1つの要素に複数のクラスを指定することも可能で、「class=”highlight bold”」のように半角スペースで区切って記述します。

優先順位の観点では、IDセレクタの方がクラスセレクタよりも詳細度が高くなります。つまり、同じ要素に対してIDセレクタとクラスセレクタの両方でスタイルが指定されている場合、IDセレクタのスタイルが優先的に適用されます。この特性を理解して、適切に使い分けることが重要です。

CSSを効率的に学ぶには、まず基本的なプロパティから始めることが大切です。color、font-size、background-color、margin、paddingなど、頻繁に使用するプロパティを実際に手を動かして覚えましょう。オンラインのコードエディタやブラウザの開発者ツールを使って、リアルタイムで変更を確認しながら学習すると理解が深まります。

次に、レイアウト技術を学びます。従来のfloatやpositionに加えて、現代的なFlexboxやGrid Layoutの基本を押さえることが重要です。これらの技術により、複雑なレイアウトも簡単に実現できるようになります。実際のWebサイトを模写することで、実践的なスキルが身に付きます。

最後に、レスポンシブデザインとアニメーションを学習します。メディアクエリを使った画面サイズごとのスタイル調整や、transitionやanimationプロパティを使った動きのある表現を習得しましょう。また、CSSの命名規則やファイル構成など、実務で必要な知識も並行して学ぶことで、現場で通用するスキルが身に付きます。

まとめ

本記事では、CSSの基本的な概念から実践的な書き方まで、初心者の方にもわかりやすく解説してきました。HTMLとCSSの役割の違いを理解し、基本的な記述方法とよく使うプロパティを身につけることで、自分の思い描くWebデザインを実現できるようになります。最初は難しく感じるかもしれませんが、実際に手を動かしながら一つずつ理解していけば、必ずCSSを使いこなせるようになるでしょう。

Webサイト制作でお困りの企業様は、DYMのWEB事業にご相談ください。HTMLやCSSの基礎から、レスポンシブデザイン、SEO対策まで、お客様のニーズに合わせた最適なWebソリューションをご提供いたします。経験豊富な専門チームが、企画から制作、運用まで一貫してサポートし、成果につながるWebサイトを実現します。まずはお気軽にお問い合わせください。

DYMの「WEB事業」サービスページはこちら