スタイルシート(CSS)とは

2012年5月4日：CSS

ホームページを作る際、HTMLファイルとCSSファイルを使用します。

もちろん、HTMLファイルだけで作成可能なのですが、たいていCSSも同時に使います。

というのもCSSがないとサイトのデザインが味気ないものになるからです。

 

HTMLとCSSの違い

HTMLとCSS(Cascading Style Sheets)の違いは

  • HTML：文章の構造の定義(枠組み)
  • CSS：文章の体裁を整える(デザイン)

です。HTMLで文章の基本構造を整えて、CSSでデザインするという流れです。

 なぜHTMLとCSSファイルをわけるのか

でも、なぜHTMLとCSSに分ける必要があるのでしょうか？

HTMLにデザインも埋め込めばいいのでは？

と疑問がでてきます。

 

確かに、ページを見るだけなら、HTMLだけで構成してもかまいません。

しかし、ページを保守する人間や検索エンジンのことを考えてみてください。

 

HTMLファイルを見た際に、タグにデザインがたくさん埋め込まれていたら文章構造を理解するのがたいへんです。

検索エンジンなら、見づらいページの評価はつけないか低めにするでしょう。

ですから、

検索エンジンやわたしたちが理解しやすいように構造(HTML)とデザイン(CSS)を分ける

というのがCSSのコンセプトであると考えてください。

 

ただ最近の傾向として

「はじめに移る画面に関してはHTMLにスタイルを記述する」

という流れになっています。

というのも、すべてのデザインをCSSへ移すと、HTMLとCSSファイルをすべて読み込んでから表示しないといけないからです。

これではモバイルなどの場合、読み込みに時間がかかります。

ですから、はじめに見える部分だけでもHTMLファイルにスタイルを記述しておきます。

こうすれば、素早くはじめの画面を表示することが可能です。

 

CSSの基本構造

CSSの文法には型があります。

CSSの型については以下のようになっています。

スタイル適用の対象{属性:値;}
h1{color:blue;}

「スタイル提要の対象」とは

h1,h2,p,a

などのタグとなり、「属性」は色や文字の大きさなどになります。

そして、「値」で属性の値を決めます。

基本構造は頭に入れておくと、学習がスムーズになります。

著者：安井 真人(やすい　まさと)

TOP