サイトのタイトルを表示するパーツです。サイトの説明文もあわせて表示することにします。ページの上部に置くことが多いので、邪魔にならないよう、コンパクトなレイアウトを目指します。
<header>
<h1><a href="#">Gadget BLOG</a></h1>
<p>物欲にまみれた管理人が気になるガジェットを紹介しているブログです。</p>
</header>/* サイトタイトル */ header h1 a { color: #444444; text-decoration: none; } header h1 { margin: 0; font-size: 30px; } header p { margin: 0; font-size: 12px; }
完成例上記のようなタイトルが表示できたら完成です。
サイト名は見出しの<h1>で表示し、説明文は段落の<p>で表示しています。全体は<header>タグで１つのグループにまとめ、スタイルシートでデザインを指定しやすいようにしています。
サイト名の部分は、通常はクリックした時にトップページにアクセスできるようにするなど、リンクを設定することが多いので、<a>でリンクを設定しています。その場合、初期状態では、サイト名の部分は青色で下線付きなデザインで表示されます。これは後述するCSSでデザインを変更しています。
今回は練習用のページ１枚しか作らないので、リンク先には仮の値として
#を設定しています。<a href="#">
こうすることで、見た目は普通のリンクですが、クリックしても何も起きないリンクになります。ダミーのリンクを作ることにしたわけです（もし正式にページを作る場合は、#の代わりにxyz.htmlなど別のページにつなげることでしょう）。
スタイルシートを適用する前の状態。
リンクのデザイン変更
サイト名のデザインを整えます。そのために <a> の color を「#444444」にして文字色をグレーにし、text-decoration を「none」に設定してリンクの下線を取り払っています。
/* サイトタイトル */ header h1 a { color: #444444; text-decoration:none; }子孫セレクタ
ここで
header h1 aという書き方のセレクタが登場します。これは「子孫セレクタ」と言って、CSSを適用する対象を「<header>要素の中にある<h1>要素の、さらに中にある<a>」に絞るという意味合いがあります。
つまり、
<header>・・<h1> <a>～</a> </h1>・・</header>のような構造があったときに、その<a>～</a>に対してCSSの設定が適用されることになります。今回制作するページでは、そのような構造に当てはまるのはタイトルロゴのみなので、上記の設定は、タイトルロゴ専用のものだということになります。
このように子孫セレクタを使うと、CSSの効果範囲をある程度絞れます。クラスを使っても同様のことが出来ますが、HTMLへの修正作業が発生します。子孫セレクタを使えばそういったHTMLの修正も不要になるメリットがあるわけですね！
今回の課題では以降、この子孫セレクタが多く登場します。
文字サイズの調整
文字のサイズを整えます。ここでは <h1> と <p> の font-size を、それぞれ30ピクセルと12ピクセルに設定しています。
/* サイトタイトル */ header h1 a { color: #444444; text-decoration:none; } header h1 { font-size:30px; } header p { font-size:12px; }余白の調整
<h1> と <p> の上下には、ブラウザによって大きめの余白が挿入されます。コンパクトなデザインにするために、この余白を削除します。<h1> と <p> の margin を「0」に設定しています。
/* サイトタイトル */ header h1 a { color: #444444; text-decoration:none; } header h1 { margin:0; font-size:30px; } header p { margin:0; font-size:12px; }タイトルロゴ周辺で、余分な余白が無くなり、詰めて表示されるようになります。
