小学館IDをお持ちの方はこちらから
ログイン
初めてご利用の方
小学館IDにご登録いただくと限定イベントへの参加や読者プレゼントにお申し込み頂くことができます。また、定期にメールマガジンでお気に入りジャンルの最新情報をお届け致します。
新規登録
人気のタグ
おすすめのサイト
企業ニュース

Webサイトのスタイルを担う言語「CSS」の基本と特徴

2022.06.02

CSSはWebサイトのデザインを担う言語で、HTMLの要素を装飾する役割を持っています。Webサイトの制作には必須となる言語なので、基本をしっかりと押さえておきましょう。CSSの特徴や記述方法、効率的に学ぶためのポイントを解説します。

CSSの基本知識

CSS(Cascading Style Sheets)はWebサイトの装飾部分(スタイル)を担当する言語として、Web制作には欠かせない存在です。まずはCSSの概要から解説します。

そもそもCSSって?

Webページのスタイルを指定する言語がCSSです。いわゆるプログラミング言語ではなく『スタイルシート言語』の一種に該当します。

HTMLで作成したWebページの基本構造に対して、テキストの色や大きさ、ページ内の要素の位置などを指定するのがCSSの役割です。

CSSはいわば、Webページのデザインを決めるための言語です。ページの見た目はユーザビリティを決める要因となるので、Web制作に携わるなら習得は必須といえるでしょう。

HTMLとの関係

CSSはWebページの基本構成を決めるHTMLと、必ずセットで利用されます。HTMLはWebページのコンテンツの構造を設定する役割を持っており、どのような構成でベースとなるテキストを記載するかを決める言語です。

HTMLがWebページの土台を作る言語、その装飾部分を担当するのがCSSという位置付けになります。

HTMLとCSSを使用してWebページを制作するのが基本となるため、Web制作をするなら両方とも習得しなければなりません。なお、Webページに動的な要素を加えるには、JavaScriptやPHPなどのプログラミング言語も必要になってきます。

記述場所は3種類

CSSを記述する場所は次の三つです。

  • HTMLの任意のタグ内に直接記述する
  • HTMLの『<head>タグ』内にまとめて記述する
  • 外部のスタイルシートに内容を記述し、そのファイルをHTML内で読み込む

いずれかの方法で、CSSで施した装飾をページに反映させます。

最も一般的になっているのは、外部にスタイルシートを作成し、HTMLに読み込ませる方法です。スタイル部分だけを切り離せるので、コードが読みやすいだけでなく、同じスタイルを複数のページに反映できるようになります。

もちろんHTML内に組み込んでも意図通りの装飾はできますが、別のファイルを作った方が効率的に編集・更新ができるでしょう。

CSSの代表的な特徴

プログラミングをしている男性の後姿

(出典) pexels.com

CSSの概要が分かったところで、どのような言語なのかも深掘りしてみましょう。できる装飾の種類や言語の特徴を大まかに知っていれば、これから学ぶ上で理解がしやすくなるはずです。

あらゆる要素にスタイルを設定できる

Webページのデザインや装飾部分を担うCSSは、HTMLで表される要素の全てにスタイルを設定できます。ページ内のテキストの色や大きさを変える、左寄せや中央寄せなどコンテンツの位置を変更するといった装飾が例です。

ページ全体のレイアウトはもちろん、色やサイズ・行間や行のそろえ方を一部分だけ変えることもできます。

ただ、いずれもページの見た目に大きく影響するので、CSSの使い方はもちろん基本的なデザインスキルが求められるでしょう。Webデザイナーを目指すなら、どちらも習得しておく必要があります。

近年はWordPressをはじめとしたCMSが数多く登場しています。簡単なWebサイトやブログを立ち上げるだけであれば、CSSが分からなくても整ったページを作ることは可能です。

とはいえ、「一部だけテンプレートのデザインから変更したい」というように、自由にカスタマイズしたい場合はCSSの知識が必要になってきます。本格的なWebサイトを作りたいなら、各要素を指定して装飾できるCSSの習得は必須といえるでしょう。

スタイルの適用順を明確に決められる

テキストや画像などWebページ内の要素に対して、異なるスタイルを適用できるのがCSSの特徴です。どのスタイルを適用するのか、優先順位を明確に定めることが可能で、何度でも上書きができます。

具体的には、対象となるタグに近いところで指定されたものや、後から読み込まれたスタイルが優先される仕組みです。さらに対象とする要素(セレクタ)によっても適用順位が変わるなど、複数のルールをもとに優先して適用されるスタイルが決まります。

バージョンでタグや記述方法が変わらない

HTMLの場合、バージョンによっては一部のタグが使用できなくなったり、細かい書き方に変更が加えられたりするケースがあります。一方、CSSはバージョンアップを繰り返しても、基本的に使えるタグや記述方法に変更はありません。

CSSもバージョンアップを重ねるごとに改良が加えられており、アニメーションや背景のグラデーションなど、よりスタイリッシュなWebページにするための機能が実装されてきました。

しかし、基本的なタグや書き方が変わらないため、一度記述方法を覚えればどのバージョンでもスタイルを反映させられます。

記述方法の基礎を覚えよう

タイピングしている手元

(出典) unsplash.com

CSSを使って実際にWebページを装飾するには、ベースとなる書式や用語の意味も知っておかなければなりません。書き方の基礎を覚えて、習得の足掛かりにしましょう。

基本となる書式

CSSの基本となる書式は『セレクタ{プロパティ:値;}』です。この書式でWebページ内のどの要素に対して、どのような変更を加えるのかを指定します。

『h1{font-size: 25px;}』と記述すれば、h1(見出し)タグのフォントサイズを25ピクセルに設定できます。

CSSの書式におけるセレクタとは、スタイルの適用部分を指定するものです。『h1(見出し)』『p(段落)』『img(画像)』などのタグや、属性を示す『id』や『class』などもセレクタとして使われます。

セレクタによって、どの見出しやテキスト・画像などにスタイルを適用するのか決めるのです。

次に、プロパティとは適用するスタイルの種類を指します。例えば、テキストのサイズを変更する場合は『font-size』、色を設定する場合は『color』です。

CSSには数多くのプロパティが用意されており、その中から適切なものを選ばなければ思い通りの装飾ができません。

セレクタの種類

CSSの記述で用いられるセレクタは、『h1』や『p』などの要素名で指定するセレクタ(要素型セレクタ)以外に、次のような種類があります。

  • 全称セレクタ:『*』で全てのタグを指定するセレクタ。『*{font-size: 10px;}』と指定すれば、ページの全ての文字サイズが10ピクセルになる。
  • classセレクタ:HTMLのタグにclass属性を付与することで、CSS側で指定できるセレクタ。『.sample』のように『.』を付けて指定する。
  • idセレクタ:任意のタグにスタイル指定をしたい場合に利用するセレクタ。『#id名』で指定する。

ほかにも『疑似クラス』や『疑似要素』など、さまざまなセレクタがあります。詳しくは実際にCSSを学習しながら覚えていくとよいでしょう。

代表的なプロパティ

CSSで頻繁に使われるプロパティとして、次のようなものが挙げられます。

  • font-size:テキストのサイズ
  • font-weight:テキストの太さ
  • font-family:フォントの種類
  • text-align:テキストの位置(ブロック要素内)
  • line-height:テキストの行間
  • letter-spacing:テキストの間隔
  • margin:余白(HTML要素外)の指定
  • padding:余白(HTML要素内)の指定
  • background-color:背景色
  • background-image:背景の画像

上に挙げた以外にも、数多くのプロパティがあります。レイアウトの設定やデザインに欠かせない要素なので、こちらも実際にCSSを学びながら覚えていきましょう。

CSSを効率的に学ぶポイント

プログラミングしている画面

(出典) photo-ac.com

より効率的にCSSを学ぶには、どのような工夫をすればよいのでしょうか? 自分に合う学習法は人それぞれですが、以下のポイントを意識することでスキルの習得が早まるでしょう。

まずHTMLの基本を理解する

Webページの構造や枠組みを決めるのはHTMLであり、CSSはそれにデザイン的な要素を加える言語です。HTMLの要素が分からなければ、セレクタを指定できません。まずはHTMLの基本から学んでいきましょう。

また、HTMLとともにCSSを学習することで、実際にどうWebページを制作していくのか分かりやすくなるはずです。HTMLの基本を押さえ、どのようにCSSを適用させるのかを理解してから、具体的な記述方法を覚えていくとよいでしょう。

実際にWebページを作成してみる

HTMLとCSSの基本を理解したら、実際に簡易的なWebページを作ってみることで、CSSがどのように反映されるのか直感的に理解できるようになります。既存のWebページのコードを模倣してみるのもおすすめです。

また、近年はブラウザ上でコードを記述し、簡単に動作を確認できるサービスもあります。実際にCSSを記述しながら覚えていくのが効率的なので、積極的に活用してみましょう。

構成/編集部


@DIME公式通販人気ランキング


興味のあるジャンルを登録して@DIMEをもっと便利に!Amazonギフト券が当たるキャンペーン実施中

@DIMEのSNSアカウントをフォローしよう!

DIME最新号

最新号
2022年9月15日(木) 発売

DIME最新号の特別付録は「ドラえもん DRY BAG」! 特集は「攻める節約、守る投資」「eスポーツ観戦ガイド」!

人気のタグ

おすすめのサイト

ページトップへ

ABJマークは、この電子書店・電子書籍配信サービスが、著作権者からコンテンツ使用許諾を得た正規版配信サービスであることを示す登録商標(登録番号 10401024号)です。詳しくは[ABJマーク]または[電子出版制作・流通協議会]で検索してください。