ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >CSSの記述方法

スタイルシートの記述方法

スタイルシートとはホームページの見栄えを良くするためのものです。
英名はCSS(Cascading Style Sheets)で、HTML文書が 論理的な言語を記述するのに対しCSSはレイアウトなどデザインに関連する言語を記述します。

スタイルシートを使うと複数のページのタイトルの文字の色や壁紙を 一変に変更することができるのでホームページのデザインを変更するのがHTMLタグだけを 使うより非常に楽になります。 また、ソースに記述する量もHTMLよりスタイルシート の方が少ないので更新作業も簡単にできます。

■スタイルシートを記述する

スタイルシートの記述の仕方は以下のようにします。

セレクタ{プロパティ:値;}
セレクタ(タグ名)の後に{ }でくくり、その中にプロパティ(属性)、コロン、値、セミコロン という順番で記述します。

p { color: blue; }
又は
p{color:blue;}
のように半角スペースを入れずに記述 することもできます。

上の例で説明するとpがセレクタ、colorがプロパティ、goldが値ということに なります。 尚、上の例は<p>〜</p>で囲まれた文字の色を金色にする という意味です。

■ プロパティの値を複数記述する

プロパティの値の部分は半角スペースで区切って{プロパティ:値 値 値;}の ように複数記述することもできます。
CSS

form{margin:5px 5px 5px 5px;}


上の例はフォームの上下左右の余白を5pxにするという 意味です。

■ 一つのセレクタに複数のスタイルを指定する

セレクタ{プロパティ:値; プロパティ:値;}の ように一つのセレクタに複数のスタイルを指定することもできます。

CSS

div{font-size:25px; color:blue; line-height:5;}


CSSはjavascriptのように改行して複数行に記述することもできます。
CSS

div{
font-size:25px;
color:blue;
line-height:5;
}

■ HTMLタグに直接スタイルを指定する

HTMLタグに直接スタイルを指定することもできます。 要素の後に半角スペースを入れてstyle="プロパティ:値;"と記述します。 こちらの場合も前項と同様にstyle="プロパティ:値; プロパティ:値;"のように 複数のスタイルを指定できます。
ソース

<p style="color:green;">文字</p>
<div style="color:blue;">文字</div>
<span style="color:green;">文字</span>

■ その他の項目

スタイルシートの記述場所
個別にCSSを指定する
複数のセレクタで指定
@importでCSSファイルを読み込む
外部ファイルのコメント

スタイルシート一覧のページに行く


HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.