CSSの基本無料ホームページ作成 CSS（スタイルシート）入門

3-1）CSS（スタイルシート）の基本 CSS（スタイルシート）入門

無料ホームページ作成情報トップ > CSS（スタイルシート）入門 > 3-1）CSS（スタイルシート）の基本

ご自分でホームページを作成・修正される方のために、ホームページ作成のためのコンテンツをご用意しました。すべて無料のコンテンツですのでお役立てください。なお、こちらのコンテンツに関してはサポートを行っていません。ご質問のメールなどはご遠慮いただければと思います。

CSS（スタイルシート）の基本について

CSSとは「Cascading Style Sheets」の略で、一般的に「スタイルシート」と呼ばれるもので、HTMLだけでは設定できない細かな書式も設定できる便利な機能です。

代表的な例は、HTMLでは文字の大きさを6段階で設定できますが、フォントサイズ「pt」では設定できませんが、スタイルシートを使用するとフォントサイズ「pt」で設定できます。

ホームページの書式設定などは、W3Cという国際団体で推奨方法というものがあり、推奨されない設定方法は将来的に使用できなくなると言われています。HTMLはインターネット創成期から、様々な表現ができるように常に進化してきましたが、その進化の結果、HTMLは複雑になり特にデザイン重視のページのHTMLは、ファイルサイズが大きく複雑なものになりやすくなりました。そこで、現在HTMLで設定できる書式設定も、できるだけCSSで設定するように推奨されています。

しかし、CSSは閲覧者のブラウザのソフトウェアやバージョンによってうまく表示されないことがあります。その為、メジャーなブラウザでは共通して使用できない設定は使用しないか、もしくは対応しないブラウザのために特別な追記を行う必要があります。

HTMLのみで書式を設定した例）

各所に設定するため、HTMLが複雑になる。

CSSを使用して書式を設定した例）

同じ書式は一箇所に設定できるので、HTMLがシンプルになる。

また、CSSは独立したファイルとして保存でき、そのファイルを複数のページで共有できます。従って、HTMLがよりシンプルになり、さらに複数のページで共通した書式を設定できるようになります。

CSSを使用しないHTML例とCSSを使用した例を確認します。

それぞれブラウザで表示してソースを表示して確認してください。

（IEの場合は、［表示］メニューから［ソース］で表示できます。）

HTMLのみで記述した例

（サンプル）
書式を設定する箇所ごとに記述されるため、複雑になります。

例）
<html>
<head>
<title>HTMLのみの記述</title>
</head>
<body>
<table width="400" border="0" cellspacing="10" cellpadding="5">
<tr>
<td bgcolor="#FFFFCC"><h1><font color="#FF0000" size="4"><strong>見出し1</strong></font></h1>
<p><img src="../image/spacer.gif" width="12" height="12">説明説明説明説明説明説明説明説明説明説明説明。</p>
<h2><font color="#0000FF" size="3"><strong>見出し2</strong></font></h2>
<p><img src="../image/spacer.gif" width="12" height="12">説明説明説明説明説明説明説明説明説明説明説明。</p>
<h3><font color="#336600" size="3"><em>見出し3</em></font></h3>
<p><img src="../image/spacer.gif" width="12" height="12">説明説明説明説明説明説明説明説明説明説明説明。</p>
・・・

ページ内にCSSで記述した例

（サンプル）
ページの上部に設定した書式があるため、長くなったようにも見えますが、<bpdy>タグ内部はスッキリします。

例）
<html>
<head>
<title>ページ内のCSS</title>
<style type="text/css">

</style>
</head>
<body>
<div class="box1">
<h1>見出し1</h1>
<p>説明説明説明説明キーワード説明説明説明説明説明説明説明。</p>
<h2>見出し2</h2>
<p>説明説明説明説明説明説明説明説明説明説明説明。</p>
<h3>見出し3</h3>
<p>説明説明説明説明説明説明説明説明説明説明説明。</p>
・・・

CSSファイルを外部参照（リンク）した例

（サンプル）
スタイルシート部分を外部リンクにすると、<head>タグ部分も<body>タグ部分もスッキリします。

例）
<html>
<head>
<title>ページ内のCSS</title>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="box1">
<h1>見出し1</h1>
<p>説明説明説明説明説明説明説明説明説明説明説明。</p>
<h2>見出し2</h2>
<p>説明説明説明説明説明説明説明説明説明説明説明。</p>
<h3>見出し3</h3>
<p>説明説明説明説明説明説明説明説明説明説明説明。</p>
・・・

要素に直接設定する

HTMLタグに直接スタイルを設定することもできます。

しかし、この方法ではスタイルを使用する理由である、書式を複数で使用する・HTMLをシンプルにするというメリットが無くなってしまいますのであまり利用することはないと思います。

例）
<p style="color: blue;">説明説明説明説明説明説明説明説明説明説明説明。</p>

説明説明説明説明説明説明説明説明説明説明説明。

CSS（スタイルシート）入門メニュー

格安です！ホームページ制作をご依頼ください！！

ホームページ制作は専門用語も多く、わかりにくいことも多いかと思います。ホームページの制作方法や制作費用、アクセス数アップ（SEO対策）などわかりにくいことがあればお気軽にお問い合わせください。

格安ホームページ制作依頼

メールでご相談

メールでのお問い合わせは365日24時間受付中です。

お電話でのご相談

090-3401-6229（直通）

【対応時間】

平日のみ（土日祝日はお休み）
午前11時～午後7時頃

※留守番電話にメッセージを残して頂ければ、対応時間内にこちらより折り返します。

無料ホームページ作成 CSS（スタイルシート）入門 y-labo - CSS（スタイルシート）の基本