スタイルシートって何だろう?

まずはこちらのサイトをご覧ください。私はSOHOで中小企業のウェブサイトを制作してますのでそちらのサイトなのですが、スタイルシートでデザインしています。

もしスタイルシートを使わなかったらどうなるでしょう?こちらのページをご覧ください。(リンク先のページは同じページに戻るようにしています。)あれ?HTML基礎講座で最終的に出来上がったページとあまり変わりありませんね。

うそだぁ」と思った方、こちらのページこちらのページの「ソースの表示」をしてみてください。このサイトはWordPressというブログを使って構築していますのでテキストの内容は異なりますが、構造は同じでしょう。

ただ、決定的に違うのがスタイルシートのファイルにリンクしているか、いないかなのです。たったそれだけのことなのに同じHTMLでもこうも表示が違うのです。

「ねぇ、ちょっと…見たことない文字が入ってるんだけど」と気づいた方もいらっしゃるでしょう。「id=”rap”」、「class=”pagenav”」とかって書かれていますね。そうなんです。この記述が重要なんです。あとで説明しますからこの「id=”~~”」、「class=”~~”」というのを頭の隅に残しておいてくださいね。

スタイルシートを使うことによってこのようにデザインすることが可能なのです。

どうしてHTMLではなくCSSでデザインするの?

ページのデザインはHTMLのみでも出来ますが、なぜわざわざスタイルシート(CSS)を使うのでしょう?それのわけとして以下の点が上げられます。

  • 文法上はCSSを使うことが望ましいとされている。
  • 複数ページの制作が容易に統一できる。
  • HTMLがシンプルで閲覧者に優しい。
  • 検索エンジンにもやさしい。
  • デザインのリニューアルが簡単。
  • HTMLでは不可能なデザインが可能。

などいくつものメリットがあります。

スタイルシート(CSS)ファイルってどんなの?

まずはスタイルシートがどんな風に書かれているか見てみましょう。 うーん、さっぱりわかりませんねぇ。とりあえずこんな風に書かれてるんだということだけ覚えておいてください。それではひとつずつ解説していきましょう。 それでは次のページで、まずスタイルシートのファイルを作りましょう。

なお、これから解説しながら作成するページのスタイルシートは必ずしも適切ではない部分、もっと簡潔に出来る部分もあるかと思いますが、はじめてスタイルシートにふれる方にわかりやすいようにしたつもりですのでご了承ください。

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録