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

Secret 009 緑のアーチ

　Secret 009　緑のアーチ

「室生蕾音さん。よかったわ。あのまま会えなくなるのかと思っちゃった」

　わー、ライバルだと思っていた、蕾根さんなのに、安心感があるわ。

「ご心配はいらないです」

　あの仰々しさから、何もない訳がないですよね。でも、ツンツン蕾音さんも可愛いかなあ。私よりもしっかりしていそうだけれども。

「あの……。何があったのですか？」

「私の立場からは言えないわ。兄さまに訊いてくださる？」

「分かりました」

　蕾音さんはカタカタとキーを打ち始めた。何か、結べないサクランボを含んでいるように。

「倉橋さん、皆が帰ってきても、ここの話は内緒ですよ」

「皆って？　役員の方々と室生さん達だけじゃないの？」

　特に徒党を組んで歩くタイプではないけれども、疎外感があるわ。便所友達の時代じゃないしな。

「派遣以外の秘密を知り得る者は全て呼び出しです。ここの派遣社員は、倉橋さんだけだから」

「いやー、孤独だわ。疎外感だわ」

　思わず、声にしてしまった。疎外感は、このホームページ作りのお仕事を貰う前からあったのに。ちょっとでも室生兄弟と親しんで、浮足立っていたみたいね。思い上がりだわ。

「その分、責任を免れることも場合によってはあるでしょうね」

「ぐぬぬ……」

　暗くなった顔を見られたくないでしょう。俯き、膝に視線を落とすと、派遣社員の何が足りないのか疑問に思った。膝の上で、拳を握った。だって、反論はできないから。もし、私が社長や課長だったら、今頃、辟易しているに違いない。

　はーい、帰宅するまで、さっきの続きをしましょう。私には、私の道がある。

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

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

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

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

　■　□　■　■

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

　参照

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

　うーん。画像を直しましょう。白を５０％にして、濃いめの凸２０％の薄めの凹み型画像、『mn6.png』、それと同様に２０％にして薄めの型画像『mn5.png』を用意します。スマートフォンのおえかきアプリで十分でした。ちょいちょい。それとカッコよく左側に濃いめの緑を配置しました。

「何か昭和臭漂うなあ。スタイリッシュって何？」

　少し、画像を作り直そうか。まだ、『png』でレイヤーもあるから、やり易いよね。

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

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

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

　・

　・

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

　background-image:url(mn6.png); /*背景画像に白２０％草を指定*/

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

　}

　#menu li a:hover {

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

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

　}

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

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

　■　□　■　■

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

　参照

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

　ださいな。左に深緑を台形で飾って、凹凸ボタンはそのままにしてみたけれども、その色も形もいけないのかな。作り直して、アップロードします。蕾音さんの前では魔法ご令嬢しずかに変身しませんからね。

「ここがおかしい。『display:block; 』が、『displayground:block; 』って、趣味が悪いね。いやあ、かなりの凡ミスだわ。ブロックがつぶれあんまんになってしまった」

　これは、直ぐになおせました。

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

　background-image:url(mn7.png); /*背景画像に白２０％草を指定*/

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

　}

　#menu li a:hover {

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

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

　}

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

　参照

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

　邪魔な凹凸ボタンを消しました。光と影ね。そして、左は青の台形にしました。同じ形でも、カラーをはっきりと変えれば印象も違うかなと思ったのです。でも、なんかしっくりこないな。主張が強いのかな？

「グリーンで優しい円を使ってみよう！」

　ちょっと素敵なアーチを思い付きました。左端に虹がかかるように緑で囲ってみる。昔見た少女漫画、バラ園のアーチのような。さて、アップロードの前に、ブラウザで確認しましょう。

「あら？　背景色が前面にきてしまいましたね。そうか、画像が一つ送れていないのかな？」　

　間違いが見つかったときは嬉しいものです。そして、再確認してっと。何か間違っているのね。調べるべし！　うーん？　送信されているけれどもなあ。接続を切って、フォルダの中をみようか。ありゃ、『mn9.png』のつもりが『mn9.jpg』さんに化けてました！　私がいけないんですけれどもね。もう一度、気を付けて作り、保存し直します。そして、正しいのを送信して、間違ったものは、紛らわしいから削除してしまおう。誰よ、削除やまんばって言ったのは。

　――――――――――――――――<style>

　@charset "UTF-8";

　body {

　color:#808080; /*ボディーの文字色を灰色にする*/

　}

　p{

　font-size:20px; /*段落の文字を２０ｐｘにする*/

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

　}

　/*============================================

　メインメニュー

　============================================*/

　ul#menu {

　width:960px; height:50px; /*メインメニュー部分の幅と高さ*/

　}

　#menu li {

　list-style-type:none; /*リストマーカー無しにする*/

　display:inline; /*リスト項目をインライン表示にする*/

　float:left; /*リスト項目を横に並べる*/

　}

　#menu li a {

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

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

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

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

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

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

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

　background-image:url(mn9.png); /*背景画像に白２５％草を指定*/

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

　}

　#menu li a:hover {

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

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

　}

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

参照

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

　ここまでのまとめよ。

　ＣＳＳは、このようになっているわ。直したいところは後で全体をみて考えましょう。

　蕾音さんは、寡黙だこと……。