デザイン・コーディング

CSSの記述方法と基本的なプロパティをわかりやすく解説!

CSSでWebサイトのスタイルを記述するには、セレクタやプロパティに関する知識が必要となります。コーディングの際に頻出のセレクタやプロパティは、頭に入れておくと便利です。CSSの特徴を理解した上で、セレクタやプロパティの種類を1つでも多く知っていれば、デザインの幅は格段に広がります。

今回は、CSSのコーディングの構造や記述方法、セレクタの種類について解説してから、スタイルを指定しているさまざまなプロパティを1つずつ紹介していきます。

CSS

目次

CSSの書き方の基本

CSSは、HTML内のタグをセレクタで指定して、指定したタグごとにプロパティでスタイルを適用します。では、実際にどのような決まりのもとでCSSが記述されているかを見てみましょう。

たとえば、h1を赤色で表示する場合は

  1. h1 {color: red;}

このように記述します。
h1を赤色で表示する場合を例に、以下のコーディングの基本構造の全体像を見てください。
ルールセット_729x610

上の図のようにセレクタとプロパティ、値を決められた順番に記述することで、スタイルが反映されます。
以下は、ルールセットや宣言ブロック、宣言に関するルールです。

・ルールセット
セレクタと宣言ブロックの2つで構成されます。

・宣言ブロック
中括弧開「{」から始まり、中括弧閉「}」で終わります。

・宣言
CSSプロパティとその値の組で構成され、コロン「:」でつなげて記述します。宣言の終わりを表すには、セミコロン「;」が必要です。複数の宣言がある場合は「;」で区切りますが、複数サルうちの最後の宣言、または1つしか宣言がない場合は「;」を省略しても構いません。ですが、ミスを減らすためにも「;」を宣言の終わりに書く癖をつけておくことをおすすめします。


スペースや改行など、細かい記述方法は複数あり、どの記述方法を用いてもコーディングは可能です。先ほどは図で説明するために一列で記述しましたが、改行して以下のように記述するのが一般的です。

  1. h1 {
  2. color: red;
  3. }

CSSの特徴

CSSの持つ特徴のうち、スタイルの継承、宣言の複数記述、セレクタのグループ化や子孫セレクタの指定について紹介します。以下のHTMLを例として、実際に表示されるスタイルをお見せしながらCSSの特徴を説明していきます。

  1. <body>
  2.  <h1>見出し1</h1>
  3.   <h2>見出し2</h2>
  4.   <p>本文</p>
  5.    <div><p>箱の中の文章</p></div>
  6. </body>

スタイルの継承とは

親要素で指定したスタイルは、設定しなくともその子要素にも適用されることがあります。これがスタイルの継承です。継承ができるプロパティはあらかじめ決められており、代表的な例は文字色や文字サイズのようなプロパティです。

ちなみに子要素とは、HTMLであるタグの中にあるタグのことを指します。今回のHTMLの例を用いると、「箱の中の文章」と書いてあるpタグはdivタグの子要素となり、反対に、pタグはdivタグの中にあることから、divタグはpタグの親要素となります。

たとえば、

  1. body {
  2. color: blue;
  3. }

と記述した場合、bodyの子要素であるh1やpなどでスタイル指定しなくても、親要素で指定された「body{color: blue;}」が有効になります。

このようにスタイルを指定すると、以下のように表示されます。
4キャプチャ_449x265

宣言を複数記述する方法

1つのセレクタに対して複数の宣言を行うことも可能です。宣言ブロックの中に宣言を「;」で区切って、セレクタ { プロパティ 1: 値1 ; プロパティ 2: 値2 ; }のように記述します。 次に紹介するグルーピングと併用することも可能です。

たとえば、h2を赤で、font-sizeを小さく表示する以下のスタイル指定をする場合は

  1. h2 {
  2. font-size: small;
  3. color: red;
  4. }

このように記述します。

実際に表示されるスタイルは以下のようになります。
h2 小さく赤く_444x255

セレクタのグループ化の方法

グループ化とは、複数のセレクタに対して共通のスタイルを宣言することです。セレクタを「,」で区切って記述することで同じスタイルを複数のタグに適用できます。 記述方法は、セレクタ1,セレクタ2{ プロパティ : 値 ;}です。セレクタの定義において、間違えている部分がある場合、そのルール全体が無効となります。

たとえば、h1,h2を赤で表示する以下のスタイル指定する場合は

  1. h1, h2 {
  2. color: red;
  3. }

このように記述します。

実際に表示されるスタイルは以下のようになります。

1キャプチャ copy_448x264

また、「,」を付け忘れると次に紹介する子孫セレクタの指定方法になってしまうので、注意が必要です。

子孫セレクタの指定方法

子孫セレクタの指定は、半角スペースで区切って並べることで、セレクタを絞り込んでスタイルを指定する方法です。子要素の中に孫要素がある場合は、孫要素にもスタイルが適用されます。

たとえば、今回のHTML上で「箱の中の文章」と書いてあるpタグにだけスタイルの指定をする場合は、親要素であるdivタグの後に半角スペースを開けてpタグを記述します。この時、divタグの子要素ではない、「本文」と書いてあるpタグにはスタイルの指定が反映されません。

divタグの子要素であるpタグだけを赤で表示したい場合は、

  1. div p {
  2. color: red;
  3. }

このように、親要素と子要素の間に半角スペースを開けて記述することで、以下のようなスタイルが表示されます。
2キャプチャ_453x259

セレクタの基本

セレクタとは、スタイルの指定をどのHTMLのタグに適用させるかを示すものです。たとえば、セレクタが「h1」の場合は「h1タグ」に対してスタイルの指定を適用できます。


セレクタの種類は、以下の5つです。

  • タイプセレクタ
  • 子孫セレクタ
  • 全称セレクタ
  • 子供セレクタ
  • 隣接セレクタ


今回は、上記のうちの全称セレクタと、ページ内のある属性値にスタイルを指定するclassセレクタ、唯一のタグのみにスタイルを指定するidセレクタを解説します。

classセレクタ

HTMLでタグに「class」属性を付けた場合、特定のclass属性値に適用したいスタイルを指定できます。class属性はグループ名のようなもので、同一のclass属性値はページ内で何回も設定することが可能です。クラス名の前に「.」を付けてスタイルを指定します。

たとえば、class名が「test」であるclass属性の文字色を青にしたい場合は

  1. .test {
  2. color: red;
  3. }

このように記述します。

次に紹介するidセレクタとよく混合されることがありますが、idセレクタはclassセレクタと違って、ページ内で一度しか使うことができないので用途が異なります。

idセレクタ

idセレクタとは、ページ内で唯一のタグにスタイルの指定を適用したい場合に使用するセレクタです。同じidセレクタはページ内で記述することができません。「#」の後にid名を書くことで、特定のid属性値にのみスタイルを指定できます。

たとえば、id属性にheadlineを持つタグの文字色を青にしたい場合は

  1. #headline {
  2. color: blue;
  3. }

このように記述します。

プロパティの基本

プロパティとは、指定したセレクタに対して適用させたいスタイルの種類のことを言い、セレクタに対してどのようなスタイルを適用させるかを決定します。プロパティで指定できるスタイルの種類の例は、色やサイズ、位置などです。
では、実際によく使用されるプロパティをいくつか見ていきましょう。

色に関するプロパティ

色の変化は、HTMLの文字自体と背景に対して適用することができます。

color

colorプロパティはHTMLテキストの文字色を指定するプロパティです。colorプロパティを使用する際には、ユーザーの環境によって文字が読みづらくなるのを防ぐために、次に紹介する「background-color」も設定しておくことが必要です。

たとえば、h1の文字色を黒に設定する場合は

  1. h1 {
  2. color: #000000;
  3. }

と記述します。

background-color

background-colorプロパティは背景色を指定するプロパティです。

たとえば、bodyの背景色を赤にしたい場合は

  1. body {
  2. background-color: #FF0000;
  3. }

と記述します。

幅・高さに関するプロパティ

幅や高さを指定するプロパティはwidthとheightの2つです。 これらは、非置換インライン要素、tr要素、thead要素、tfoot要素、tbody要素を除くすべての要素で適用されます。
非置換インライン要素とは、他の値を入力しても、置き換えられることのない要素のことです。たとえばspan要素やa要素などのことで、反対にプロパティで値が変更される置換インライン要素の例としては、img要素やobject要素が挙げられます。

width

widthは横幅を指定するプロパティです。幅の指定には、pxなどの単位をつけて指定したり、親要素のサイズに対する割合を%値で指定したり、autoで状況に応じて自動設定される初期値に指定することができます。widthと次に紹介するheightの値は、余白や境界線などを含まない値です。

たとえば、あるtable(表)の幅を200pxにしたい場合は

  1. table {
  2. width: 200px;
  3. }

このように記述します。

height

heightは高さを指定するプロパティで、指定方法は幅の指定方法と同じです。

たとえば、あるtable(表)の高さを100pxにしたい場合は

  1. table {
  2. height: 100px;
  3. }

このように記述します。

font に関するプロパティ

フォント関連のプロパティで代表的なものは、以下の3つが挙げられます。

font-weight

font-weightプロパティは、フォントの太さを指定するプロパティです。フォントの太さの指定方法は最もよく使われるboldや、9段階の太さを表す100~900、通常の太さに戻すnormalなどがあります。日本語に使用されるフォントでは太さが用意されていないことが多いため、値を変更しても太さが変化しないことがあります。

たとえば、pを太字にする場合は

  1. p {
  2. font-weight: bold;
  3. }

と記述します。

font-size

font-sizeプロパティはフォントのサイズを指定するプロパティです。emやpx、%で指定します。

たとえば、あるdivのフォントサイズを20pxにする場合は

  1. div {
  2. font-size: 20px;
  3. }

と記述します。

font-family

font-familyプロパティはフォントの種類を指定するプロパティです。具体的なフォントファミリー名(MS P明朝など)を指定したり、総称ファミリー名と呼ばれる、フォントの大まかな種類で指定したりします。

フォントファミリー名で指定する場合は、具体的なフォントファミリー名を「”」で挟んで記述します。記述する際には、フォントファミリー名の正式名称を正しく記述することが必要です。総称ファミリー名として指定される代表的なフォントは、ゴシック体系のフォントを表すsans-serifや明朝体系のフォントを表すserifなどです。
指定したフォントで表示できない場合に備えて、複数の候補を設定することが可能です。候補を設定する際には、フォントファミリー名または総称ファミリー名を「,」で区切って記述します。

たとえば、bodyのフォントの種類を「MS P明朝」にして、「メイリオ」を候補に設定する場合は

  1. body {
  2. font-family: ”MS P明朝,メイリオ”;
  3. }

と記述します。

その他の重要なプロパティ

最後に、上記以外で重要なプロパティの中から以下の2つを紹介します。

text-align

text-alignプロパティは水平方向の揃え方を指定するプロパティです。ブロックレベル要素や表のセルに指定すると、そのタグの中に含まれるテキストや画像などのインライン要素を、中央や左右に揃えることができます。

たとえば、h1の中の文章を中央揃えにする場合は

  1. h1 {
  2. text-align: center;
  3. }

このように記述します。

border

borderプロパティは境界線の太さ、色、スタイルを一括で指定するプロパティです。境界線の太さはborder-widthでthickやthin、スタイルはborder-styleで実線を表すsolidや二重線を表すdouble、色はborder-colorで#ff0000などの数値を指定することができます。
また、borderの記述方法は、上記のborder-widthやborder-style、border-colorを1つずつ「;」で区切る方法と、以下のように一括指定する方法の2つあります。

たとえば、liの境界線の太さを太く、スタイルを実線で、色を赤にする場合は

  1. ul li {
  2. border: thick solid #ff0000;
  3. }

このように記述します。

まとめ

今回はCSSの記述方法の基本を紹介しました。CSSの記述には数多くのルールがあるので、一見すると習得するのは大変そうに思えるかもしれませんが、一度覚えてしまえば、経験を重ねるごとにスムーズになっていきます。上記の他にも頻繁に使用されるプロパティや機能があるので、基本的な知識を身に付けてから、様々な記述方法に挑戦してみてください。


WebMediaでは、今回のようなWebサイト制作に関する基礎的な知識だけでなく、作業を簡単にする方法や、よくある疑問への解決法などの情報を数多く紹介しています。他の記事も併せて読んでみてください。

また、Webサイトを制作したいけれど、知識も時間も人材も不足しているという方はいませんか?
WebMediaを運営するITRAではお客様に真摯に向かい、ご要望に沿ったWebサイト制作やリニューアルを行ってきました。お気軽にお問い合わせください。

この記事の著者

itra
ITRA株式会社

官公庁や大手企業を中心とした大規模なWebサイトを総合的にプロデュースするWeb制作会社。デザインからシステム、サーバーまでWebサイトに関わるお客様の悩みを解決します。