CSS05 背景画像、ナビゲーション（ブロック）、ナビゲーション（CSS Sprite）

背景画像

• background-repeat: repeat;画像を繰り返し並べて表示。ブラウザの初期設定。
• background-repeat: repeat-x;横方向に繰り返し表示。
• background-repeat: repeat-y;縦方向に繰り返し表示。
• background-repeat: no-repeat;繰り返さずに１枚だけ表示。
• h1に背景画像を表示し、border-radiusで角を丸くトリミング。

ナビゲーション（ブロック）

• list-style-type:はlist-style:でもＯＫ。
• 縦並びのナビゲーションボタンのborderは、
  • ulでborder-top、border-right、border-left
  • liでborder-bottom　をそれぞれ指定する。
• li a{display:block;}を指定することで、ボタンとして押せるようになる。
• さらにpaddingを指定すれば、ボタンを大きくできる。
• ボタンなので、linkとvisited、hoverとactiveは同じ色でよい。

ナビゲーション（CSS Sprite）

• 外部CSSファイルでの表記
  • 最初の行は@charset "utf-8";　コメントアウトで日本語使ったときの文字化けを防ぐ。
  • １行あけてから各要素への指定を書く。
• CSS Spriteは、ナビゲーションで表示するボタンを個別の画像にするとデータ量が多くなるため、各項目の通常時・マウスオーバー時を含めて１枚の画像にしたものを、項目ごとに必要な個所だけを表示させる手法。
• 具体的には、各項目にbackground-imageとしてボタン画像を指定し、background-positionで画像の中の表示したい項目の位置に合わせる。
• imgにvertical-align:bottom;を指定するのは、文字のディセンダ分のすき間を詰めるため。
• backgroundで画像を表示しているため、liに書いた文字はspanで囲み、a span{visibility: hidden;}を指定して表示しない。

文字の隠し方

• spanをemでもいい。
• ほかに、text-indentでマイナス指定する方法もあるにはある。
• visibility:hiddenとマイナスインデントは混合して使わない。
• 文字を、背景色と同じ色にしたり、極小サイズにしたりすると検索エンジンにスパムと判断され、検索結果に表示されなくなる。

時間と頭を上手に使う

• 帰り道でその日やったことを順を追って思い出すと覚える。
• やらないで寝たら忘れる。
• できないと思えばできない。

連休の課題

• サイトのデッサン。Ａ４。
• BOSSメールにて指示あり（HTMLとCSSの復習）。