CSSを使った文字の装飾(その1) ~無料ホームページの作り方~

HOME > 無料で作成講座 > 無料ホームページの作り方 > CSSを使った文字の装飾(その1)

無料ホームページの作り方
弊社では「自分で作成してみたい!」という方も応援しています

4.CSSを使った文字の装飾(その1)

CSSとは

CSS(カスケード・スタイル・シート)とは、ページのレイアウトや文字の装飾などを指定する記述方法です。
ホームページというのは複数のページで同じようなデザイン・レイアウトが使われることが多いため、 各ページでバラバラに指定せずに一箇所にまとめて記述してファイルとして保存しておきます。
なぜ一箇所に記述する必要があるのか?と申しますと、サイトのページが複数に渡り多くなってきた際に全ての共通した箇所を一度で全て変更出来るという利点があります。
もちろんそれだけではありませんが、コンテンツ(文章や画像などのページ内容)と、装飾は別々に分けておくことで整理しやすいというのが主な理由になります。
ですので、ここでは直接文字などに装飾するのではなく、CSSを用いて装飾する手段をご説明していこうと思います。

CSSファイルを作る

CSSはページのHTMLに記載することも出来るのですが、それでは前述したメリットが生かされない為、ここでは別のファイルとして用意しましょう。
まずは「common.css」というファイルを下記のように作成してみて下さい。
ファイル名:common.css
そしてこのCSSファイルをHTMLで読み込ませるための指定をヘッダーで行います。
前回作成したHTMLに、ちょっと追加しましょう。
ファイル名:index.html
linkから始まる一文が追加され、ボディの中の文字の一部を<span>というタグで区切りました
これで外部ファイル「common.css」を読み込んで適用するようになります。

一応解説すると、<span>タグで句切られた文字に対してクラス名「blue-text」という名前を付け、それをCSSで青いカラーに指定しているということです。
なのでこれをブラウザで表示させると「私のホームページ」というところだけ青い文字に変わります。

CSSの書き方

CSSは基本的に「セレクタ { プロパティ : 値; }」という形で指定されます。
例えば前述の「.blue-text { color: #0000ff; }」を例に取ると「.blue-text」がセレクタ、「color」がプロパティ、「#0000ff」が値、となります。
ひとつのセレクタには同時に複数のプロパティの値が指定出来ます。
例えば
このように指定することが可能です。
ちなみに値の後ろにある「;」はそれぞれのプロパティを区切るためのものですが「値の後に;を付ける」とおぼえてしまっても問題ありません。

CLASSとID

上の例ではCSSの指定に「class」というものを使いました。
セレクタには「class」の他に「id」というものもあり、それらは使い分けて指定します。
どちらを使えばいいのか?については色々と複雑な考察もありますが、あまり難しい事を覚えても仕方ないので、「classはページの中に同じものが何度も出てくるもの」であり、「idはページの中で一度しか使わないもの」と覚えておけば良いでしょう。
CSSファイルの中でもclassとidの記述は相違します。
ファイル名:common.css
classの場合は先頭にピリオド、idの場合は先頭にシャープを書いて区別をしています。
また、classは複数指定することも出来ます。
ファイル名:index.html(一部)
この例では「class=”blue-text bold-text”」と2つのclassを指定しています。
このように複数のCSSが適用出来るのもclassの便利な特徴ですね。
ちなみに、書かれた順番で適用されますので、例えば同じ色変更のcolorが重なった場合は後から読まれた方で上書きされて適用されます。