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

|

スタイルシートとは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

はてなダイアリーでスタイルシートを使う準備

はてなダイアリーのスタイルシートをいったんOFFにする

はてなダイアリーに登録すると、まず「はてな」が用意してくれた「hatena」というテーマが適用されます。テーマは、さまざまなスタイル指定の集合体です。

このコーナーでは、テーマがまったく適用されていない状態から、あなたのオリジナルスタイルに作り替えていきます。そのために、まず「hatena」テーマの適用を解除しておきましょう。

(以下、スクリーンショットはid:alisatoさん作成の「スタイルシートテスト用HTML」を参考にさせていただきました)

操作手順

  1. 「はてなダイアリー」にログオンし、ページ最上部のヘッダにある「設定」をクリック
  2. 「テーマ」のリストボックスにある[▼]をクリックし、「指定なし」を選択する(「設定」ページにおけるこのほかの設定項目のはたらきについては、「はてなダイアリーヘルプ」をご覧ください)
  3. [この内容に変更する]ボタンをクリックする
  4. 「最新の日記」をクリックする
  5. 表示結果

文字の書体や大きさは、あなたのブラウザでは少し違って見えるかもしれませんが、おおむねこのような見栄えになったことでしょう。

たとえば、日記のタイトル(ここでは、「xxxxxの日記」という文字は太字で、かつやや大きな文字で表示されます。

これは、HTMLやスタイルシートによるさまざまな装飾(背景色、文字の大きさや色など)がまったく指定されていないときに、ブラウザが表示するデフォルトのスタイルです。

もし「最新の日記」をクリックしても当初と同じ見栄えでページが表示されたなら、「hatena」のテーマがまだブラウザの中に残っています。ブラウザの「更新」や「再読み込み」などのボタンをクリックしてみましょう。

|