ホームページ作成講座：スタイルシート編

スタイルシートを使うことで、ホームページ作成で様々なデザインが可能となります。 スタイルシートを使うと、ホームページ作成が一段と楽しくなりますよ。

スタイルシートの知識でホームページが見ちがえるほどかっこよくなるので、ぜひスタイルシートを利用しましょう。

スタイルシートを使うにはどうしたらよいのでしょうか。 「ホームページ作成講座：はじめに」でスタイルシートを使ったことを思い出してください。

まずはスタイルシートを記述し、「CSSファイル（index.css）」を作ります。 次に「<link rel="stylesheet" type="txt/css" href="index.css">」でCSSファイルを読み込むとスタイルシートが使えるのです。

「<link rel="stylesheet" type="txt/css" href="index.css">」の部分は、コピペで使えばよいでしょう。 ここでは、CSSファイルの作り方を解説していきます。

「ホームページ作成講座：はじめに」で使った、CSSファイルを見てみましょう。

body{
color: #99ccff;
background-color: #6666cc;
}

h1{
border: 5px outset #6666cc;
padding: 5px;
}

p{
color: #000000;
background-color: #ffffff;
border: 5px ridge #6666cc;
width: 500px;
margin: 20px;
padding: 5px;
}

赤い部分に注目してください。 何か見覚えがありませんか？ そう「HTML」のタグの中と同じものです。

スタイルシートは、タグの命令ごとにデザインを指定出来るものなのです。 そして「{」と「}」に囲まれた部分がスタイルシートの命令でデザインを自由に変えられます。

スタイルシートの形式は「color: #99ccff;」のようになります。 「color」を属性、「#99ccff」を値と呼びます。 属性と値を「:」で結び、「;」で命令が終了したことを示しています。

数式の「x = 1」と似ていますね。 「x」が属性、「=」が「:」、「1」が値です。 式が終わったことを示すために、「;」をつけているのです。

よく忘れがちなのが「;」です。 「;」を忘れると上手くスタイルシートが働かないので、忘れないように気をつけましょう。

「color」と「background-color」の説明をしましょう。 「color」は文字の色、「background-color」は背景の色を指定します。

「#99ccff」が何色かを示しています。 暗号のようですが、「#○○△△□□」の形式になっています。 「○○」、「△△」、「□□」の数字がそれぞれ「赤」、「緑」、「青」を示していて、光の三原則で色が決まります。 数字は「1,2,3,4,5,6,7,8,9,a,b,c,d,f」が入り右の数字ほど明るい色になります。

難しいと感じるかもしれませんが、色のサンプルがあるサイトを参考にしながら自分の好きな色を見つけてください。 （とほほの色入門・色見本）

「border」は枠線を指定します。 値は「5px outset #6666cc」のような形式で、「5px」が線の太さ、「outset」が線の形、「#6666cc」が線の色です。

太さは数字を大きくすれば太くなります。 色々試してみてください。 色は先ほどやりましたね＾＾

線の形ですが、これは色々種類があります。

どのような形状になるかは各自試してみてください。

「padding」と「margin」の説明をしましょう。 「padding」は枠線の内側、「margin」は枠線の外側の余白を設定します。 値は「5px」のように指定します。

枠線を指定していないと違いがよくわかりませんが、枠線を指定して違いを確かめてみましょう。

「padding」と「margin」を指定しないと文章が窮屈になるので、文章を書く場合には指定するようにしましょう。

「width」は幅を指定します。 長い文章を書くと画面全体まで文章が広がってしまいます。 「width」を設定することで、長さを調節でき見やすくなります。

値は「500px」のように指定します。 自分のホームページに合った幅を設定するようにしましょう。

以上でサンプルのスタイルシートの説明は終わりです。 スタイルシートを使うことで様々なデザインのホームページを作ることが出来ます。 自分のオリジナルのホームページを作ってみましょう。

質問・感想は大歓迎なので、質問や感想がありましたら掲示板かメールでお願いします。