ホームページのデザインを作るCSSとその効果【WEB担当者の相談室】

HOME
>
WEB担当者の相談室
>
WEBサイトをリニューアルしたい企業担当者向け制作のあれこれ
>
ホームページのデザインを作るCSSとその効果

WEB担当者の相談室

WEBサイト制作のことなら、私たち台東区上野のWEB制作会社
株式会社ケイツー・インタラクティブにお気軽にご相談ください。

ホームページのデザインを作るCSSとその効果

ホームぺージのリニューアルの提案でCSSと制作会社がよく言うのですが、CSSって何ですか？

CSSは Cascading Style Sheets の略で、HTMLのタグに紐づけることで、レイアウトやカラーなど視覚的な（デザイン）情報を指定することが出来る言語です。

制作しない方のためのCSSの基礎知識

制作をしない企業のWEB担当者でも、WEBサイトのリニューアルの際にCSSの話が出てくることがあると思います。そのような方のために、かんたんにCSSについて解説いたします。

また、HTMLについてご覧になりたい方、またはHTMLをご存じない方は、はじめに『ホームページ制作に必ず使う言語HTMLのおさらい』をご覧ください。

スタイルシートとは

CSSは Cascading Style Sheets の略で、文章構造(HTML)とデザイン要素を分離させる為に提唱されたスタイルシートの一つです。利用方法は大まかに以下の３パターンです。

特定のHTMLタグに設定
HEADタグ内に設定しページ全体を制御
外部ファイルとしてインクルードしてサイト全体または限定的に制御

セレクタとプロパティ

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

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

特定のHTMLタグに設定する場合
<p style="color:red">テキスト</p>

それ以外の場合
HEADタグ内に記載
p{color:red}
・・省略・・
<p>テキスト</p>

このようなイメージです。HTMLのHEADタグ内に記述することもあれば、外部ファイル(xxx.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>

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の視覚効果です。

ホームページのデザインを作るCSSとその効果のまとめ

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

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

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

ホームページリニューアルはお気軽にお問い合わせ下さい