派遣・静香のホムペ更新曲

Secret 008 魔法ご令嬢しずか

　Secret 008　魔法ご令嬢しずか

「画像が出ないときもあるわよね。下に色を重ねてあげましょう」

　画像をダウンロードして消すのではなくて、ＣＳＳ上での手術にして差し上げるわ。

　――――――――――――――――

　#menu li a {

　background-color:#66cdaa; /*背景色をミディアムアクアマリーンにする*/

　color:#ffffff; /*文字色を白にする*/

　display:block; /*リンク部分をブロック表示にする*/

　width:240px; height:50px; /*幅と高さ*/

　}

　――――――――――――――――

　参照

（http://uhi.sa-suke.com/md019.jpg）

　この、ミディアムアクアマリーンという色、綺麗だわ。基調にしたいわね。

　えーと、予想通りの課題が判明だわ。

　左に寄っているのが気になりますね。『text-align:center;』にすることで、それぞれが持っている２４０ｐｘの幅の真ん中に揃います。

　下線は、リンクしていますっていい目印だけれども、分かると思うので、ここは消しましょう。『text-decoration:none;』で各メニューページにリンクしているのを示す、下線を消します。

　面倒なのは、パディング値の指定よね。

「んー。私って昔から面倒なことを後回しにし過ぎだわ」

　内側余白を上１５、右０、下０、左０、各ｐｘで、どうかな？

「魔法ご令嬢しずかのアップロードだぞ。しーちゃんぷりん！」

　ふああああん。

　――――――――――――――――

　width:240px; height:35px; /*幅と高さ*/

　padding:15px 0px 0px 0px; /*上パディング*/

　text-align:center; /*テキストをセンター揃えにする*/

　text-decoration:none; /*リンク部分を下線無しにする*/

　}

　――――――――――――――――

　参照

（http://uhi.sa-suke.com/md020.jpg）

「はい、ぱちぱちー。ただ、アップロードにしかこの魔法が使えないのが残念だわ。って、どういう設定かな？」

　それで、よくあるカーソルが乗ったら色が変わって、ここからリンク先へ行けますよというのね。『#menu li a:hover {

　background-color:色; }』 で、文字色が白のまま、背景色を変えます。周りに合わせると、ペールグリーンがいいみたい。このホームページを見る人のことを考えると、分かりやすさ、見やすさが大切だと思うわ。

　――――――――――――――――

　text-decoration:none; /*リンク部分を下線無しにする*/

　}

　#menu li a:hover {

　background-color:#98fb98; /*リンクにカーソルが乗ったら背景色をペールグリーンに変更する*/

　}

　――――――――――――――――

　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

　■　□　■　■

　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

　参照

（http://uhi.sa-suke.com/md021.jpg）

　――――――――――――――――

　text-decoration:none; /*リンク部分を下線無しにする*/

　background-image:url(mn1.png); /*背景画像濃い草を指定*/

　background-repeat:no-repeat; /*背景画像を繰り返さない*/

　}

　#menu li a:hover {

　background-color:#98fb98; /*リンクにカーソルが乗ったら背景色をペールグリーンに変更する*/

　background-image:url(mn3.png); /*リンクにカーソルが乗ったら背景画像を薄い草に変更する*/

　}

　――――――――――――――――

　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

　■　□　■　■

　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

　参照

（http://uhi.sa-suke.com/md022.jpg）

「ズガーン。配色に失敗。背景画像に白が溶け込んじゃっているわ。アップロードの前に、ブラウザで確認してみようっと。何色かみてみないとね」

　――――――――――――――――

　color:#0000cd; /*文字色をにミディアムブルーにする*/

　――――――――――――――――

　グリーンと同じ寒色系で力強いミディアムブルーにした。埋もれている。

　――――――――――――――――

　 color:#800000; /*文字色をにマロンにする*/

　――――――――――――――――

　グリーンの反対色は赤よね。ちょっとギトギトした感じが拭えないから、明度を落してマカロンはどうかな？　ああ、地味な上効果的ではないわね。

　――――――――――――――――

　 color:#000000; /*文字色をに黒にする*/

　――――――――――――――――

　思い切って黒にしたら、彩度がない無彩色だから、何かと合いそうだと思ったけど、自己主張がない上、社風に合うか問われるところだわ。

　――――――――――――――――

　color:#808080; /*文字色をに灰色にする*/

　――――――――――――――――

　うーん、薄い。けれども育てたらどうだろうか？　例えばそう――。

「太字！」

　何色でも文字が際立たなかったから、『index.html』で、太字にしてみよう。『<b>』から『</b>』の間が太字になるわ。

　――――――――――――――――＜index.html＞

　<!-- メインメニュー -->

　<ul id="menu">

　<b>

　<li><a href="index.html">ホーム</a></li>

　<li><a href="product.html">製品紹介</a></li>

　<li><a href="profile.html">会社案内</a></li>

　<li><a href="contact.html">お問合せ</a></li>

　</b>

　</ul>

　――――――――――――――――

　――――――――――――――――<style.css>

　color:#808080; /*文字色をに灰色にする*/

　――――――――――――――――

　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

　■　□　■　■

　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

　参照

（http://uhi.sa-suke.com/md023.jpg）

　これがメニューにカーソルを置いたときに背景画像が明るく変化するものね。その文字色は灰色で、文字を太字にしましたよっと。

「いくらか、見やすいわ。しーちゃん、がんば！」

　――――――――――――――――

　color:red; /*文字色をに赤にする*/

　――――――――――――――――

　ためしに文字色を赤にしてみよう。うわっと、ギラギラしてキワドイ感じですね。想定外です。

　――――――――――――――――

　 color:#0000cd; /*文字色をミディアムブルーにする*/

　――――――――――――――――

　明るいし、彩度は高いのですが、こちらもギトギトするなあ。

「もしかして、灰色も悪くはなかった？　灯台下暗しだわ」

　某テレビ漫画で幸せをもたらすと言われているモノを探しに旅立ったら、家の近くにあったという話もあったわね。あら、ちょいおばさんオタクが出てぢまいました。

「蕾音さんもまだいらっしゃらないし、次の作業に移ろう！」

「あら、呼びました？」

　私は、素早く振り向いた。