WEBデザインの要はスタイルシート（CSS）

WEBデザインの要はスタイルシート（CSS）：目次

ホームページ制作をしない方のためのCSSの基礎知識

ホームページ制作をしないWEB担当者の方でも、ホームページリニューアルの際にCSSの話になることがあります。その時のために、かんたんにCSSについて解説いたします。

スタイルシート（CSS）とは

CSSは Cascading Style Sheets の略で、文章構造（コンテンツ）とデザイン要素を分離させる為に提唱されました。文章構造（コンテンツ）とデザイン要素の分離と聞いても中々イメージ沸かない方のほうが多いかと思いますのでかんたんにご説明いたします。

文章構造（コンテンツ）はHTML

タイトルタグや見出しタグ、リストタグなどがあり、ページ内に記述される文章にマークアップ（文章を意味付け）して文章を構造化します。どこが見出しで、どこが文章なのか？重要記述は何か？などをコンピューター（ブラウザなど）に伝え、表示に優劣を付けます。また、Google などの検索エンジンのクローラーにもページ内の構造を伝える重要な役割を持っています。SEO対策につきましては『SEO対策におけるHTML5』も合わせてご覧ください。

また、HTMLについてもう少し詳しくご覧になりたい方、またはHTMLをご存じない方は、はじめに『ホームページ制作に必須！15分でわかるHTML基礎』を是非ご覧ください。

デザイン要素はスタイルシート（CSS）

ホームページは一般的にデザイン要素はスタイルシート（CSS）で定義・設定します。例えば文章構造（コンテンツ）で定義した見出しの表示デザインはブラウザ毎に異なります。デザイナーが意図したデザインに表示されるように見え方を統一化させ、場合によっては装飾を加えていきます。

また、コンテンツの要素が右なのか？左なのか？幅はどのくらいか？などレイアウト要素もスタイルシート（CSS）で設定します。背景に色を敷いたり、画像を表示させたりするのもスタイルシート（CSS）です。

このように、HTMLはコンテンツの意味付けをして、スタイルシート（CSS）はコンテンツの見え方を定義・設定する役割を持っています。

セレクタとプロパティ

CSSを設定するためにはセレクタとプロパティを記述します。セレクタとはどの要素（HTMLタグ）に設定するかを記述し、プロパティにはどんな特性をタグに付与するかを設定します。プロパティには値があり、特性の詳細を設定することが出来ます。

例えばPタグ内のテキストを赤くしたい場合は、セレクタに「P」を指定して、プロパティにテキストの「色」についてを指定、プロパティーの値を「赤」にするとします。その記述方法は大まかに以下の３パターンです。

  • 特定のHTMLタグに設定
  • HEADタグ内に設定しページ全体を制御
  • 外部ファイルとしてインクルードしてサイト全体または限定的に制御
特定のHTMLタグに設定する場合
<p style="color:red">テキスト</p>

上記は、一番シンプルなスタイルシートの記述例です。直接要素（HTMLタグ）の中にスタイル属性を記述して、その中にプロパティーを記述します。

都度要素（HTMLタグ）内にスタイルシートを記述しなければならないので汎用性が低いですが、その部分のみに適用させたい場合にこの記述をします。また、直接要素（HTMLタグ）に記述されたスタイルシートは優先度が一番高く、優先してスタイルシートを書き換えたいとき（上書き）などに利用します。

HEADタグ内に記載
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
・・省略・・
<style type="text/css">
p{color:red}
</style>
</head>
<body>
・・省略・・
<p>テキスト</p>
・・省略・・
</body>
</html>

HTMLのHEADタグ内に記述することもあります。ページ内の全てのP要素に適用されるので、要素に都度スタイル属性を記述する必要が無いので汎用性があります。

外部スタイルシートファイルに記載
【HTMLファイル】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
・・省略・・
<link rel="stylesheet" href="ｘｘｘ.css（外部ファイルへのパス）">
・・省略・・
</head>
<body>
・・省略・・
</body>
</html>


【外部スタイルシートファイル（ｘｘｘ.css）】
@charset "UTF-8";
p{color:red}

このように外部スタイルシートファイル（ｘｘｘ.css）としてインクルードする場合もあります。

よく使われるプロパティの紹介

フォント・テキスト系

テキストの種類やカラー、大きさなどを設定することが出来ます。

  • [位置]　text-align: left
  • [大きさ]font-size: 12px
  • [色]　　color : red
  • [太字]　font-weight: bold

見出しとテキストの文字サイズの関係や、意味合いごとのカラー設定でデザインにメリハリを付けます。

※フォント・テキスト系という言葉はこの文章の便宜上使っていますが、一般的には使われません。

背景系

背景色や背景画像とその位置や使い方を指定することが出来ます。

  • [背景色]　background-color: red
  • [背景画像]background-color: url(画像へのパス)
  • [位置]　　background-position: left top
  • [繰り返し]background-repeat: none

他にもいくつかのプロパティがありますが、これらを駆使してレイアウトの背景に画像を敷くことで、オリジナリティのあるデザインを実現することが出来ます。

※背景系という言葉はこの文章の便宜上使っていますが、一般的には使われません。

具体的な記述例

CSSとHTMLの関係をシンプルな例で解説いたします。

特定のHTMLタグに設定

下記のHTMLコードをテキストエディターにコピーして、sample1.htmlとして保存してください。こちらの事例では文字コードはutf-8に設定していますが任意でかまいません。

sample1.html
<html>
　<head>
　　<meta charset="utf-8">
　　<title>特定のHTMLタグに設定CSSのサンプルです。</title>
　</head>
　<body>
　　<p>テキスト</p>
　　　<div style="color:red">テキスト</div>
　　</body>
</htme>

上記は、一番シンプルなスタイルシートの記述例です。直接要素（HTMLタグ）の中にスタイル属性を記述して、その中にプロパティーを記述します。

都度要素（HTMLタグ）内にスタイルシートを記述しなければならないので汎用性が低いですが、その部分のみに適用させたい場合にこの記述をします。また、直接要素（HTMLタグ）に記述されたスタイルシートは優先度が一番高く、優先してスタイルシートを書き換えたいとき（上書き）などに利用します。

HEADタグ内に設定

下記のHTMLコードをテキストエディターにコピーして、sample2.htmlとして保存してください。こちらの事例では文字コードはutf-8に設定していますが任意でかまいません。

sample2.html
<html>
　<head>
　　<meta charset="utf-8">
　　<title>HEADタグ内に設定CSSのサンプルです。</title>
　　<style type="text/css">
　　　.sample {
　　　　color:red;
　　　}
　　</style>
　</head>
　<body>
　　<p>テキスト</p>
　　<div class="sample">テキスト</div>
　</body>
</htme>
外部ファイルをインクルード

HTMLファイルsample3.htmlとsample.cssを同じ階層（フォルダー）に作って、それぞれ下記のように記述してください。こちらの事例では文字コードはutf-8に設定していますが任意でかまいません。

sample3.html
<html>
　<head>
　　<meta charset="utf-8">
　　<title>外部ファイルをインクルードCSSのサンプルです。</title>
　　<link rel="stylesheet" type="text/css" href="sample.css">
　</head>
　<body>
　　<p>テキスト</p>
　　<div class="sample">テキスト</div>
　</body>
</htme>

外部CSS sample.css
.sample {
　color:red;
}

それぞれのHTMLファイルをブラウザにドラッグ&ドロップすると、赤いテキスト文字が表示されます。これがCSSの視覚効果です。

WEBデザインの要はスタイルシート（CSS）のまとめ

ホームページのデザインを作るCSSとその効果いかがでしたか？ドキュメント内で文章構造(HTML)とデザイン要素(CSS)が分離されていることを一番シンプルな形でご紹介しました。このように役割を切り離すことで汎用性のあるHTML／CSSのデータ活用が出来ます。また、HTML内には文章構造のみが残るので、検索エンジンに対してもより正しい情報を提供することが出来ます。

ケイツー・インタラクティブでは企業様のホームぺージリニューアルを承っています。ご不明な点やご要望などございましたらお気軽にお問い合わせください。

※本情報はページ公開時のものです。情報は常に更新され掲載内容と異なる場合がございます。