その１４ ページのレイアウト設定に必須のスタイルシートとは？
いよいよホームページ作成も終盤になってきました。次はスタイルシートを理解しましょう。
スタイルシートとはホームページのレイアウトや文字デザイン等を指定するものである
前回のセクションまでで、ｈｔｍｌのページ作成はとりあえず終了したのですが、何か物足りなくないですか？
そうです、レイアウトや配色が足りないですよね☆彡ではレイアウトや配色の設定はどうやって行うのでしょうか？
レイアウトや配色の設定にはCSSを使う
レイアウトや配色等の設定には、ｈｔｍｌファイルの他にcss（Cascading Style Sheets,カスケーディングスタイルシート）ファイルという別のファイルを作成することになります。そしてそのcssファイルに「ここの部分は文字の大きさをこうしよう」、とか「レイアウトの配置はこうしよう」とか「サイドバーはここで、幅はこれぐらいにしよう」というような設定をコーディングしていくのです。これによりなんの装飾もなかったhtmlファイルはいろいろな飾りを加えられ、見栄えの良いホームページへと変身するのです。この変わる瞬間がホームページを作成していてなんとも言えない感動になります。ホームページはコンテンツの内容が全てだとは思いますが、そうは言いつつもある程度の見た目や使いやすさも重要になります。あなた本位のページではなく、常にページをみてくれるユーザーの視点にたった分かりやすいサイト構築を目指しましょう。
レイアウトの設定はhtmlファイルで直接も行うことができる
スタイルシートはhtmlファイルで作成したホームページのレイアウトを設定すると言いましたが、直接htmlファイルの中でレイアウトや文字装飾をすることも可能です。ではどうしてわざわざ別ファイルのcssファイルを作ってまでして、レイアウトやサイトの文字装飾等の設定をするのでしょうか？
スタイルシートでレイアウトや装飾を設定するメリット
あなたはサイトのページを例えば１０ページ作ったとします。このhtmlファイルの背景を青色からピンクに全て変えたいと思った場合、htmlファイルから設定する場合は１0ページ全てに設定した背景設定のスタイルを編集しなければなりません。ですがこれがスタイルシートならば、そのスタイルシートの背景の設定分を１行編集することで、１０ページ全てのページの背景を青色からピンクに変えることができます。これがスタイルシートを使う最大のメリットでしょう。もうひとつは編集のしやすさです。htmlファイルに直接スタイルを設定した場合、ｈｔｍｌ内のコードが複雑化し、後々サイトの更新をしたい場合などに見づらいファイルとなってしまいます。その点スタイルシートならば、htmlファイルを一切触ることなく、編集ができるのでこの点もスタイルシートを使うメリットと言えるのではないでしょうか？
スタイルシートで何を設定するのか？
スタイルシートで設定するものは主に以下の通りです。
- 余白の指定
- 罫線の指定
- ページの幅と高さの設定
- 段組みの設定
- 背景や文字の大きさの設定
早速スタイルシートを作成したいところですが、次のセクションではスタイルシートをページに採用するための設定を行います。
次のセクションでは
その１５ スタイルシートの基本設定 です