スタイルシート（CSS）基礎講座
スタイルシート(CSS)ファイルを作成しよう
初めてのホームページ制作例をこれからデザインしていきましょう。まずはフォルダやファイルの構成が以下のようになっていますか？ブラウザで見るとこんな風になっているはずです。
スタイルシートのファイルを作ろう
まずはメモ帳を起動します。そして何も記入しないで「style」という名前で「index.html」のあるフォルダと同じフォルダに保存します。そのまま保存すると拡張子が「.txt」になっていると思いますので、HTMLファイルを作成したときと同様に拡張子の変更を行います。変更する拡張子は「.css」つまり、「style.css」というファイルを作成します。
CSSファイルをリンクさせよう
それでは続いて、このCSSファイルをHTMLファイルにリンクさせます。そうすることによって外部のスタイルシートファイルで指定されたデザインがHTMLに反映されるというわけです。
その記述法は、HTMLファイルの<head> ～ </head>に以下のように書くだけです。
<link href="CSSファイルアドレス" rel="stylesheet" type="text/css">
ですからこの場合は、<head> ～ </head>を以下のように書きます。
<head>
<title>札幌市の和食洋食レストラン「さんぷる」</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
スタイルシートのファイルにはまだ何も書かれていませんのでブラウザで見てもなんら変わりはありません。
スタイルシート(CSS）ファイルは使いまわせる
今回はスタイルシート(CSS)ファイルと同じフォルダのHTMLファイルですが、別のフォルダのHTMLファイルも同じスタイルシートファイルを使うことが出来ます。それによってサイト全体のデザインを統一させることが出来ますし、またスタイルシートの一部を変更しただけでサイト全体を変更させることが出来るわけです。ただし、リンクを作成したときや、画像を貼り付けたときと同じようにフォルダの階層に注意してリンクさせましょう。
それでは早速CSSファイルに何か書いてみましょう。
