まんぷく::はてなガイド草稿

 | 

スタイルシートとは

Webページの見栄えは、スタイルシートで調整できる

「はてなダイアリー」では、ユーザーが日記の見栄えを調整するにはスタイルシート(CSS)を使います。

スタイルシートは、Webページ(いわゆる「ホームページ」)の見栄えを調整するための言語です。

といっても難しいものではありません。HTMLを少しでも使ったことがある人ならすぐに、そうでない人も少し勉強すれば、スタイルシートの使い方を理解できるでしょう。

このコーナーでは、「スタイルシート」はCSSのことを指します。

HTMLとスタイルシートの関係

Webページとして公開される文書は、具体的な内容と、その見栄えという2つの要素で作られています。

ブラウザに文字として表示されるのが、ここでいう内容です。一方、「見出しを太字で表示する」などといった指定が、内容の見栄えにあたります。

かつては、内容と見栄えの両方をHTMLで指定していました。<body>タグにbgcolor属性を指定して、ページの背景色を変える、などといった方法です。このころは、サイト内の全ページに「<body bgcolor="#330000">」などと書いていました。

その後、内容はHTMLファイルに書き、その見栄えはスタイルシートとして別に指定する、という方法が作られました。

内容とその見栄えを別々に指定することによって、いくつかのメリットが生まれました。

スタイルシートを使うメリット

スタイルシートを使うと、こんな点が便利です。

よりきめ細かく見栄えを調整できます
HTMLでは、文字の行間を調整できません。そのほか、枠線で囲んだり、段落の1文字めだけを1字下げたりするといった装飾は、すべてスタイルシートでのみ可能です。
一度スタイルを指定すれば、ページ内や複数のページにある同じ要素に、同じスタイルを適用できます
スタイルシートでは、特定のタグの範囲(「要素」といいます)のすべてに、まとめて同じ見栄えをさせることができます。「<p>タグから</p>タグの範囲(p要素)は、枠線で囲って表示する」というスタイルシートを書けば、そのスタイルシートを読み込むすべてのページのすべてのp要素は、枠線で囲まれて表示されます。枠線の色や太さを変えたくなったら、先ほどのスタイルシートの指定を書き換えます。そうすれば、すべてのp要素にその変更が適用されます。

※ここに説明図を入れます

 |