★ヘッダ部分のスタイリングCSSでヘッダ部分の余白などを調整しましょう。効率良くスタイルを指定していくために、ヘッダ部分にheaderというid名を付けて、その名前をセレクタにすることにします。id="header">~</div>で囲みます。HTMLファイルのindex.htmlに、以下の記述を追加してください。Reserved.</small></div></body></html>CSSファイルのbase.cssには、以下の記述を追加してください。/*リンクにマウスが乗ったら背景画像を変更する*/}index.htmlとbase.cssを保存したら、ブラウザで表示してみましょう。画像の表示位置が調整されて、画像の周囲に付いていたボーダーが消えれば成功です。今回追加したCSSソースの内容を確認しておきましょう。画像のボーダーを0にするようにスタイル指定しています。Explorerなどのブラウザでは、リンクの設定された画像が表示される際にボーダーが付けられるので、このボーダーを消すために指定しています。ヘッダ部分に上10px、右0px、下5px、左20pxの内側余白を入れて、画像の表示位置を調整しています。[左]の順になります。時計回りと覚えると良いでしょう。ハイパーリンクに付けられる下線を消すようにスタイル指定しています。フォントのサイズを18ピクセルに指定しています。sans-serif;は、フォントの種類をゴシック系のヒゲ無しフォントにするように指定しています。今回追加したCSSソースでは、h1要素(ロゴ部分)のフォントのサイズ・種類を指定しました。ロゴ部分は画像にしてしまうのだから、フォントのサイズや種類の指定は必要ないように思われるかもしれません。それでもあえて指定しておくのは、画像が利用できない閲覧環境ではimg要素のalt属性で指定した「ウェブサンプル株式会社」というテキスト内容が表示される場合があるからです。画像が読み込まれないなどの理由でimg要素がテキストとして表示されてしまった場合にも、ある程度見栄え良く表示されるようにフォントのスタイルを指定しておきます。