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

 | 

ページ全体の見栄えを変えてみよう1~背景の色

背景の色を変えてみよう

ではさっそく、スタイルシートを使ってみましょう。まず、ページ全体の背景色をスタイルシートで変えてみます。

HTMLを知っている方なら、ここで<body>タグに「bgcolor=#d5dbff」などといった属性を書くでしょうが、「はてなダイアリー」ではスタイルシートで背景色を指定します。

操作手順

  1. はてなダイアリーのページ最上部にある「設定」をクリック
  2. 「スタイルシート」欄に「body{background-color:#d5dbff}」と入力
  3. [この内容に変更する]ボタンをクリックする
  4. 「最新の日記」をクリックする
  5. 表示結果は次の通りです。ページの背景が、「#d5dbff」という指定の色(薄い水色)に変わりました。

「#d5dbff」という指定をさまざまに書き換えることによって、背景色を任意に変えることができます。色は赤、緑、青の3原色の強さで指定してあり、2桁ずつ区切った「d5」が赤の成分の強さ、「db」が緑の成分の強さ、「ff」が青の成分の強さを示しています。

色指定の書き方について詳しくは、「CSSの主なプロパティ~色の値」や、「CSS2/4.3.6 色」などを参照してください。

一般的には、HTMLと同じ「#RRGGBB」という書き方や、桁数の少ない「#RGB」という書き方がよく使われているようです。また、白や赤など、一部の色については「white」や「red」などといった書き方もできます。

背景色が白いままで変わらない場合は、ブラウザの「更新」や「再読み込み」といった操作をしてみましょう。

スタイルシートの書き方

先ほど指定したスタイルシートは「body{background-color:#d5dbff}」という内容でした。この各部分の名称は、以下の通りです。

セレクタ{プロパティ:}
body{background-color:#d5dbff}

これは、「body要素というセレクタのbackground-colorプロパティに、#d5dbffというを指定している」ということになります。このような、「このセレクタのこのプロパティに、この値を指定する」という書き方が、スタイルシートの指定方法の基本です。

スタイルシートを指定する対象が「セレクタ」で、各セレクタには、背景色や余白、文字の大きさや行間といったプロパティ(属性)が備わっています。そして、プロパティに割り当てる具体的な内容が「」となります。

それぞれの用語の意味は、下の通りです。

スタイルシート関連の用語

要素
HTMLにおける、開始タグから終了タグまでの範囲のことです。たとえば「<p>」タグから「</p>」タグの範囲は、これらのタグも含めた範囲が「段落」という要素で、これは「p要素」と呼ばれます。また、開始タグしかないタグ(<img>タグなど)は、<img>タグそのものが「img要素」ということになります。
セレクタ
スタイルシートを指定する対象のことです。上の例では「セレクタ」は「要素」と同じですが、セレクタの書き方によっては「○○という種類の×要素」というセレクタや、「A要素の中に含まれているB要素」といったセレクタも指定できます。
プロパティ
各要素は、「背景色」「文字の色」「枠線の太さ」「枠線の色」「余白」など、見栄えの情報をいろいろ持っています。スタイルシートの世界では、これらの情報のことをプロパティと呼びます。たとえば背景色の情報は「background-color」プロパティに定義されています。各種のプロパティを皆さんが指定することによって、ページの見栄えを自由に変更できるのです。
プロパティに与える、具体的な指定です。たとえば背景色(background-colorというプロパティ)を灰色(grayという値)にするには、「background-color:gray」という指定になります。

ここで登場したプロパティの文法

要素の背景色を指定するプロパティ
background-color
各種の方法による色指定、または「transparent」(透過)
background-colorプロパティに値を指定しなかったとき
「transparent」を指定したものとして扱われる
 |