スタイルシートでビジュアルアップ

スタイルシートでビジュアルアップ

スタイルシートって何?

スタイルシートとは、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ファイルに直接記述する方法と、外部ファイルとしてリンクして読み込む2つの方法があります。

▼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" />

という2文を記述します。

▼対応するHTMLファイルの記述

<p id="01">スタイルシート指定</p>

でOKです。

一般に外部ファイル化してリンクする方法がよく使われます。

これは外部ファイル化するとCSSをまとめて管理でき、1箇所修正するだけでWebサイト全体を 修正できるという利点が大きいです。

効率のいい作業をするためにも、外部ファイル化してCSSを管理する方法を必ず身につけるようにしましょう。

このエントリーをはてなブックマークに追加
Yahoo!ブックマークに登録
Clip to Evernote

メールを送る

ご質問やご意見ご感想はこちらのフォームをお使いください。

SEO [PR] @J[hr ₦΍@ Cu`bg SEO