CSSの記述場所
CSSを記述する方法は3つあり、これらを組み合わせて設定することもできます。
- CSSファイルに記述
CSSを記述したファイルをHTMLファイルとは別に作成し、双方を「link要素」で関連付けます。複数のWebページでデザインを統一でき、CSSファイルでスタイルを指定する分、HTMLファイルの容量が軽くなるなどのメリットがあります。
- 「head要素」内に記述
HTMLファイル内の<head>〜<head>の間に「style要素」を使ってCSSを記述します。そのWebページだけにスタイルが適用されます。
例：ページ全体の「p要素」の文字に赤を指定
<head>
<style type="text/css">
p{color:red}
</style>
</head>
- 要素の属性として記述
スタイルを適用させたい要素にだけ「style属性」としてCSSを記述します。一部分のスタイルを変更に便利です。
例：指定した「p要素」の文字だけに赤を指定
<p style="color:red">〜</p>
CSSファイルの作成
Windowsに付属する「メモ帳」や、MacOSに付属する「SimpleText」などのテキストエディタ（または、単にエディタとも呼ぶ）を使用して、CSSファイルを作成します。
CSSを記述した、またはこれから記述しようとするテキストエディタから「名前をつけて保存」を選択し、拡張子に「CSS」と入力して保存します。
CSSファイルの関連付け
CSSを記述したファイルをHTMLファイルとは別に作成し、双方を「link要素」で関連付ける場合、HTMLファイルには「meta要素」を記述し、「type属性」を指定します。
さらに「head要素」内に「link要素」を記述します。
<head>
<meta〜〜>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="CSSファイル名" type="text/css">
<title>ページタイトル</title>
</head>
スタイルの指定
- font-sizeプロパティ
フォントサイズを指定する。
p{font-size:数値}（※CSSでは大きさや長さを数値で指定する場合、数値の後にpxなどの単位も記述します）
- font-weightプロパティ
フォントの太さを指定する。
p{font-weitht:数値}
- colorプロパティ
文字の色を指定する。
p{color:色}
- background-colorプロパティ
背景の色を指定する。
body{background-color:色}
- background-imageプロパティ
背景画像を指定する。
body{background-image:url(画像ファイル)}
- text-alignプロパティ
行の位置を指定します。
p{text-align:位置}
- line-heightプロパティ
行の高さを指定する。
p{line-height:数値}
クラス名による適用箇所の限定
セレクタに「p」や「h1」のうような要素名を指定すると、同じ要素にはすべて同じスタイルが適用されてしまいます。
特定の限定された段落にだけスタイルを適用するには「クラス名」を記述します。
- クラス名
クラス名は自由につけることができます（半角英数字）が、クラス名の前に「.」を記述します。
例：目次の色を赤に指定
.mokuji{color:red}
- class属性
スタイルを指定したい特定の要素に「class属性」を使ってクラス名を指定します。
<p class="mokuji">目次</p>
- クラス名を活用
要素の幅「widthプロパティ」、高さ「heightプロパティ」などでスタイルを指定します。
例：フッターの幅を150ピクセルに指定
.footer{width:150px}
- div要素
要素をグループ化します。
※紹介したSCCの記述方法は一例です！
戻る
