【CSS入門ガイド】概要や基本構文について初心者にも分かりやすく解説

【CSS入門ガイド】概要や基本構文について初心者にも分かりやすく解説
CSSはWebサイトを作成する上で必須の技術です。Webデザイナーを目指すうえではもちろん、Webエンジニアを目指すうえでも押さえておくべき知識といえるでしょう。CSSについて学習することで、デザイナーやエンジニアとして活躍できるチャンスも広がります。 この記事では、IT業界への就職を目指している方に向けて、CSSの入門方法について解説します。
無料

まずは登録してみる

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

1.CSSとは

まず、CSSの概要について紹介します。

CSSの概要

CSSはCascading Style Sheetsの略称であり、Webページのスタイルを指定するための言語です。「スタイル」とはWebページの見た目のことで、CSSによってWebページの見栄えを良くすることができます。
例えば、CSSを用いることでWebページに表示される文字の大きさや色を変えたり、背景を指定したりすることができます。

CSSとHTML、JavaScriptの役割の違い

Webページを作成するために利用される言語として、CSS以外にHTMLとJavaScriptが挙げられます。これらの役割の違いはどこにあるのでしょうか。

HTMLはWebページの文章構造を指定するものです。HTMLではタグという仕組みで構造を表現し、例えばtitleタグによってWebページのタイトルを定義したり、h1タグによって見出し文を表示したりすることができます。

また、JavaScriptはWebページを動的に操作する際に利用するものです。例えば、Googleマップにてマップを移動させたり拡大させたりする際に、裏側ではJavaScriptが動作しています。

CSSとHTML、JavaScriptをそれぞれの役割に応じて利用することで、現代的なリッチでデザイン性の良いWebサイトを作成することができます。

関連記事：HTMLを学習したい学生必見！学習方法やおすすめのサイトを紹介
関連記事：JavaScriptとは？できることや将来性・勉強方法を解説

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

2.CSSの2つの開発環境

CSSを開発するためには、特別なソフトウェアや複雑な設定は必要ありません。普段から使っているブラウザやテキストエディタがあれば、すぐに始められます。
ここでは、代表的なCSSの2つの開発環境について、それぞれの特徴や使い方を紹介します。

EdgeやSafariなどのブラウザ

ブラウザは、HTMLとCSSを組み合わせたページを閲覧するためのツールです。たとえば、WindowsならEdge、MacならSafariといったブラウザが最初からインストールされています。その他にも、Google ChromeやFirefoxなどがあり、機能を拡張できたりセキュリティが高いことから、業界内でも多くの人に使われています。
ブラウザはWebページを表示するだけでなく、CSSが正しく適用されているかを確認するための「開発者ツール」が備えてられており、ブラウザを使うことでCSSコードをその場で編集し、即座に結果を画面に反映させられます。例えば、EdgeやSafari、Google Chromeでは、右クリックして「検証」や「開発者ツール」を開くことで、WebページのHTML構造やCSSスタイルを確認できます。

メモ帳などのテキストエディタ

もう一つの代表的な開発環境は、テキストエディタです。Windowsに標準搭載されている「メモ帳」や、Macの「テキストエディット」などを使えば、すぐにCSSコードを書き始めることができます。これらのテキストエディタは機能がシンプルで、余計な設定に迷うことなくコードを書く練習に集中できることがメリットです。
この他にも、無料で使える「Visual Studio Code」や「Atom」などのエディタを利用すれば、コードの色分けや補完機能があり、より快適にCSSを書くことができます。

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

3.CSSの基本構成

CSSのコードには、スタイルを指定するための基本構成があり、以下のようにセレクタ（どこに）に対してプロパティ（何を）と値（どうするか）を指定することでデザインを定義します。なお、このデザインを指定することを「宣言」といいます。

セレクタ {
  プロパティ: 値;
}
一般的な記述のルールは、セレクタの次に半角スペースを入れてから{を記述し、改行します。波括弧（{}）は宣言の始まりと終わりを示し、波括弧内に「プロパティ:値」の形式で記述された内容がそのセレクタに適用されます。セミコロン（;）で区切ることで、複数の宣言を記述できます。
また、各宣言の始めに半角スペースを2つ入れてからプロパティを記述します。次にコロン（:）と半角スペースを入れて値を記述したらセミコロン（;）を書いて最後に改行します。
まずはこの基本構成を知ることで、思い通りのデザインを作るための第一歩を踏み出せます。ここでは、CSSの基本構成であるセレクタ、プロパティ、値について解説します。

セレクタ

セレクタは、「HTMLの文章中のどの箇所に装飾を適用するか」を指定する部分です。たとえば、pと書けば段落タグ（<p>）が、h1と書けば見出しタグ（<h1>）が対象になります。
以下の例では、見出しの段落の文字色を青に設定しています。

さらに、特定の要素だけにスタイルを適用する方法もあります。classやidを使えば、1つのページ内で特定の要素だけを対象にすることもできます。

クラス（class）： 同じスタイルを複数の要素に適用

ID（id）： 特定の1つの要素にだけスタイルを適用

プロパティ・値

プロパティは、「スタイルの種類（何を変更するか）」を指定します。たとえば、文字色や背景色、余白などがプロパティにあたります。値は、そのプロパティにどのようなスタイルを設定するかを表します。

よく使われるプロパティ 意味 プロパティに対する値
color テキストの色 red、blue、greenなど
font-size フォントサイズ 10px、30pxなど
background-color 背景色 lightgray、#d3d3d3など
margin 余白 20px、60pxなど
以下の例では、HTMLの文章中に「emphasis」と指定したクラスに対して、文字色を黄色、フォントサイズを30pxにし、大きな文字で強調するように設定しています。

プロパティと値のセットはコロン（:）で区切り、各セットはセミコロン（;）で終わります。この形式を守れば、複数のスタイルを1つの要素に適用できます。

コメントの書き方

コメントは、コードにメモを残す時に使います。コメント部分はブラウザで表示されないため、コードの意図を説明したり、後で確認するときに役立ちます。
CSSのコメントは、以下のように/*と*/で囲む形で記述します。

h1 {
  color: red; /* 文字色を赤にする */
  font-size: 20px; /* フォントサイズを20pxにする */
}
コメントを活用することで、コードが多くなっても分かりやすく整理できます。たとえば、「この部分はヘッダーのスタイル」「この部分はフッターのスタイル」というように、始めのうちはセクションごとにコメントを入れるとよいでしょう。

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

4.CSSの記述場所

CSSを記述する場所には外部スタイルシート、内部スタイルシート、インラインスタイルの3種類があり、それぞれの特徴や使い分けを理解することが重要です。ここでは、CSSの記述場所について解説します。

外部スタイルシート

外部スタイルシートは、CSSを別のファイル（拡張子が.cssのファイル）に記述し、それをHTMLファイルにリンクして使う方法です。この方法は、特に複数のHTMLページで同じデザインを適用したいときに便利です。例えば、企業のホームページのように複数のページで統一感を持たせたい場合、外部スタイルシートを使えば、1つのCSSファイルを編集するだけで全ページのデザインを一括で変更できます。HTMLファイルでは、<link>タグを使ってCSSファイルを参照する仕組みです。さらに、ファイルを分離することでHTMLとCSSが整理され、保守性も向上します。

内部スタイルシート

内部スタイルシートは、HTMLファイル内に直接CSSを記述する方法です。
具体的には、<head>タグの中に<style>タグを記述し、その中にCSSコードを書きます。この方法は、特定のHTMLファイルだけにデザインを適用したい場合に向いています。例えば、単独のランディングページやテスト用のページを作成する際には、外部ファイルを作る手間を省いて内部スタイルシートで完結することができます。ただし、他のページで再利用が難しいため、複数のページにまたがるサイトの設計にはあまり適していません。試験的にCSSを適用して動作確認を行う場合には手軽な方法です。

インラインスタイル

インラインスタイルは、HTML要素ごとに直接CSSを記述する方法です。各HTMLタグの中にstyle属性を追加し、その中にスタイルを書きます。この方法は、特定の1つの要素だけにスタイルを適用したい場合に便利です。例えば、緊急で文字の色を変えたい、特定の段落だけフォントサイズを調整したい、といった場面で役立ちます。しかし、他の2つの方法と比較するとコードが長くなりやすく、管理も難しくなるため、大規模なサイトやデザインには適していません。加えて、HTMLとCSSが混在することからコードの可読性が下がり、後から修正が必要になった際に作業がスムーズに進まない可能性もあります。

この3種類をうまく使い分けることで、効率的かつ見た目も綺麗なデザインを実現できます。外部スタイルシートは汎用性が高く、内部スタイルシートやインラインスタイルは限定的な状況で有効です。

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

5.まとめ

CSSはWebサイトを作成する上で必須の技術です。Webデザイナーを目指すうえではもちろんですが、エンジニアとなる場合でも学習する価値がある技術です。CSSに加えて、関連するHTML、JavaScriptを学習しておくことで、就職活動において有利に働く可能性が高いです。まずは書籍やWebサイトを活用してCSSに触れてみるところからスタートし、本格的な学習を進める場合はプログラミングスクールの受講なども検討しましょう。

ITエンジニアを目指す新卒学生向け就活エージェントならレバテックルーキー

レバテックルーキーは、レバテックが運営するITエンジニア専門の就活エージェントです。多数のITエンジニアのキャリア支援経験のあるアドバイザーが、あなたのスキルと希望に合わせた企業の紹介から、人事目線での面接対策など、就職までを一貫してサポートします。ES添削、面接対策、ポートフォリオ作成サポートなども実施していますので、まずは一度カウンセリングにお越しください。

就活アドバイザーに相談してみる

関連記事

エンジニア就活ノウハウ記事一覧へ
レバテックカレッジ 就活まで支援するエンジニア志望学生のためのプログラミングスクール