Secret 009 緑のアーチ

 Secret 009 緑のアーチ


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


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


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


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


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


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


「分かりました」


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


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


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


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


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


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


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


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


「ぐぬぬ……」


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


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


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

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

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

 ================

 ■ □ ■ ■


 ================

 参照

(http://uhi.sa-suke.com/md023.jpg)


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


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


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


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

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

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

 ・

 ・

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

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

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

 }

 #menu li a:hover {

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

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

 }


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

 ================

 ■ □ ■ ■


 ================

 参照

(http://uhi.sa-suke.com/md024.jpg)

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


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


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


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

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

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


 }

 #menu li a:hover {

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

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

 }


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

 参照

(http://uhi.sa-suke.com/md025.jpg)


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


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


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


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


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


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

 @charset "UTF-8";

 body {

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

 }

 p{

 font-size:20px; /*段落の文字を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); /*背景画像に白25%草を指定*/

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


 }

 #menu li a:hover {

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

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

 }

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

参照

(http://uhi.sa-suke.com/md026.jpg)


 ここまでのまとめよ。

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


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

  • Twitterで共有
  • Facebookで共有
  • はてなブックマークでブックマーク

作者を応援しよう!

ハートをクリックで、簡単に応援の気持ちを伝えられます。(ログインが必要です)

応援したユーザー

応援すると応援コメントも書けます