ホームページ作成講座★スタイルシートの使い方

初めての方にも分かりやすくホームページ作成方法を解説します♪

ホームページ作成講座 >> HTML・CSSの基礎知識 >> スタイルシートの使い方

スタイルシートの使い方

スタイルシートはHTMLとは、また書き方が違います。ただ、とても簡単な書き方なので、すぐに理解できますよ。

はじめに（準備）

スタイルシートを使うには、HTMLファイルの<head></head>の間で次のように宣言する。
<META http-equiv="Content-Style-Type" content="text/css">

スタイルシートの概念

スタイルシートでは、『プロパティ』と『セレクタ』の二つを用いてデザインを決めていきます。

・プロパティとは、『どう変更するか』を示すものです。
・セレクタとは、『どの部分を変更するか』を示すものです。

つまり、『プロパティで内容』、『セレクタで場所を』を指定します。

そしてこの二つを組み合わせて、以下のようにデザインを指定します。

例えば、HTMLの<p></p>で囲まれた部分の文字の色を青にするときは、
p<color:blue>
『p』がセレクタ、『color:blue』がプロパティです。

だいたい理解できましたでしょうか？次では、もう少し詳しく説明します。

セレクタについて

セレクタは場所を指定するものですが、どのように指定するかを説明していきます。

例）HTMLの<p>で囲まれた段落の中を青文字にする。
p { color: blue}

例）<p class="contents">のようにクラス名をつけた要素の中身を青文字に。
.contents { color:blue}

スタイルシートはどこに書く?

スタイルシートは<head></head>間に以下のように書きます。

<style type="text/css">

</style>

プロパティについては、項目ごとに後のページで説明します。
外部スタイルシートについてはこちらへ>>外部スタイルシート

back >> ホームページ作成講座

HTML・CSSの基礎知識