- ホームページで広告収入MASTER！ >
- ホームページの作り方 >
-
スタイルシートでビジュアルアップ
スタイルシートでビジュアルアップ
スタイルシートでビジュアルアップ
スタイルシートって何？
スタイルシートとは、HTMLやXHTMLで使われる要素をどのように表示させるかを指定し、見栄えを整えることができる技術のことを言います。
CSS【Cascading Style Sheet】(カスケーディング・スタイルシートの略)とは、スタイルシートを記述するための言語になります。
HTMLやXHTMLの要素とは、「titleタグ」や「pタグ」「aタグ」「imgタグ」など、それ自体が意味を持っているものを指し、CSSを使いこれらの表示方法を指定することができます。
この技術によって、要素と表示方法(装飾)を切り分けて管理することができるようになり、その管理がし易くなるので、現在ではWebサイト制作に標準的に使われています。
少しとっかかりにくいところがありますが、使えるようになるととても便利なので、少しづつ覚えていきましょう。
スタイルシートの作り方
CSSは基本的に次のような書式で記述します。
セレクタ {プロパティ : 値 }
(例) h1 {font-size : 24px }
このように「h1タグ」などの要素タグを指定して、表示方法を指定することができます。
表示方法については、CSS独自のプロパティや値が多数用意されているので、
要素の表示方法を細かく設定することができます。
セレクタの種類
セレクタには種類があり、上のように要素名に対して指定する方法以外に、
任意のID名と任意のクラス名に対してスタイルシートを指定できる「IDセレクタ」と「クラスセレクタ」があります。
IDセレクタは、「#ID名」で表し、クラスセレクタは「.クラス名」で表します。
例えば、
【CSS】
p#01 { font-size : 18px }
【HTML】
<p id="01">スタイルシート指定</p>
とすると、01のIDが指定されたpタグのみ、フォントサイズが18pxで表示されます。
「IDセレクタ」は1ページ内で、1つの要素に対して1つしか使えないのに対し、
「クラスセレクタ」は別要素に何度でも使えるのが特徴です。
CSSの作り方
CSSを作る方法は、HTMLファイルに直接記述する方法と、外部ファイルとしてリンクして読み込む２つの方法があります。
▼HTMLに直接記述する(ヘッダーに記述する)
<style type="text/css">
<!--
p#01 { font-size : 18px }
-->
</style>
上記のコードを<head>～</head>の間に記述します。
</head>の手前がわかりやすくて良いかと思います。
▼HTMLに直接記述する(要素タグに記述する)
<p style="font-size : 18px">スタイルシート指定</p>
「style」で指定することで、要素タグ内に直接記述することもできます。
▼外部ファイル化してリンクする
CSS記述部分の
p#01 { font-size : 18px }
をメモ帳に貼り付け、「ファイル名.css」でindex.htmlファイルがあるフォルダに
保存します。
HTML側には、<head>～</head>の間に
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="ファイル名.css" type="text/css" />
という２文を記述します。
▼対応するHTMLファイルの記述
<p id="01">スタイルシート指定</p>
でOKです。
一般に外部ファイル化してリンクする方法がよく使われます。
これは外部ファイル化するとCSSをまとめて管理でき、１箇所修正するだけでWebサイト全体を 修正できるという利点が大きいです。
効率のいい作業をするためにも、外部ファイル化してCSSを管理する方法を必ず身につけるようにしましょう。
