19日目

本日は…

■ナビゲーション用のスプライト画像を作る

■spriteが必要な理由

…何度も画像を読み込ませるとその早さは回線の速度に依存

　一枚で済ませればCSS読み込んだ時点で終る

　@importは使わない

　※linkで入れるなら２個までがベスト。大本のcommon.cssと個別にページのcss

　※※４つ以上になると異常に遅くなる

・画像を背景に使うとき、上に文字を載せたくない場合…

　①text-indent: 100%;で

　②visibility: hidden;で

　③text-indent:-999em;で

　→①がお勧め。この場合は同時にwhite-space: nowrap;と、overflow:hidden;を入れること

　②は日本ではあまりはやっていない。③は左に大きく幅を作るので、容量的にあまり。

・SEO的に隠し文字はアウト

　→特に背景と同じ色の文字、6px以下の文字はアウトアウト

・結局強いのは<p>に囲まれた<a>タグ

■ボタンを作るとき、Psを使う場合、プラグインでレイヤーを予め用意することができる

⇒作り方

　・長方形ツール（下方にある方）をクリック（固定サイズ）でレイヤーを選ぶ

　シェイプレイヤーが作られる

　※※ピクセルスナップに☑を入れて作ること！

　シェイプレイヤーを作る時は、新規レイヤーに作ったものを重ねる（コピー生成）で、選択ツールにした状態で、Shift押しつつ方向キーを入れると１０ｐｘずつ動かす事ができる。

　これを繰り返して、ボタンの数だけ作る。

　※シェイプレイヤーを変更するときはグラデーションオプションをクリックなどして変化させ、それをレイヤーのスタイルをコピーで各ボタンにペーストしていくことができる

　・文字を乗せる

　　一番長いところで文字の大きさを決めたら、左から、上記と同じく新規レイヤーを重ねることで作っていく。Shift方向キーで移動させる。

　　中身の文字を変えたい時は、レイヤーをクリックしたあと、文字ツール選択して文字をダブルクリック。

　この構成で作って、それぞれグループにしてやると編集がしやすい。

※ボタンを長く作った時は、選択ツールの長方形ツールで１ｐｘの縦線を作り、中身を塗りつぶす形で境界線を作る

　※レイヤーマスクを作ってグラデーションさせてやると立体感が増す

　※※白黒二本作ってグループにしてやるといい