【ホームページ作成】スタイルシートの書き方入門

スタイルシート（CSS）を使った様々なテクニックは、「文字や文章の配置・装飾方法」、「入力フォームの活用・装飾方法」などのカテゴリ別に、さまざまな記事でご紹介しています（※このページの左端にあるメニューから選んで覗いてみて下さい）。

下記では、それらの記事でご紹介している「スタイルシートの編集方法」を実践するために必要な、スタイルシート記述方法の基礎について簡単にご紹介しています。

スタイルシート（CSS）で書くこと

スタイルシートは、HTMLで作成した文章にデザインを加えるための言語です。文字色・背景色を加えたり、表示位置を調整したり、余白量を調節したりできます。スクリプトと組み合わせることで、マウスの動きに合わせて装飾を変更させたり、表示・非表示が切り替わるタブ機能などを実現させたりもできます。

 

スタイルシートの記述場所

スタイルシートは、以下の3つの方法で記述できます。

1. HTMLタグの中に「style」属性を使って記述
2. HTMLファイルのhead要素内に「style」要素を使って記述
3. 独立したファイルに記述しておき、「link」要素を使って読み込ませる

一時的に装飾を試したい場合は、1や2の方法が楽なこともあります。しかしずっとそのスタイルシートを使用する場合は、3の方法がお勧めです。特に複数のページで同じデザインを使用したい場合（サイト内でデザインを統一したい場合）には、独立したファイルにしておくことで修正などが一度ですむ3の方法を使う方が遙かに省力化・効率化できます。

スタイルシートを記述する位置に関しては、「入門！スタイルシートを使う3つの方法」で詳しく解説していますので、ご参照下さい。

スタイルシート（CSS）ソースの編集方法

スタイルシートソースを編集、記述するには、HTMLファイル（またはスタイルシートファイル）を「テキストエディタ」に読み込ませるか、「ホームページ作成ソフト」のスタイルシート編集機能を使います。詳しくは「HTML・スタイルシートのソースを編集する方法」を参照してください。

スタイルシートの書き方

スタイルシートは、「セレクタ」「プロパティ」「値」という3つの単語を使って、以下のように記述します。

セレクタ { プロパティ : 値 }

この意味は、

装飾対象 { 装飾の種類 : 装飾内容 }
どこの   { 何を　　　 : どうする }

です。例えば、

h1 { color: red }

と記述すると、

見出しの { 色を : 赤色にする }

という意味になります。

※「h1」は、装飾対象となる要素名です。h1要素は「見出し」を表します
※「color」プロパティは、文字色を指定するプロパティです
※「red」は、赤色を表します