今回ご紹介するサイトは、京都の河原町丸太町で音楽教室をされている
　「ティンカーベルミュージックスクール」様のWebサイトです。

　ティンカーベルミュージックスクール様は先月オープンされたばかりの
　新しい音楽教室です。
　但し、インストラクターの方々は今までも多くの生徒さんを指導されて
　いる経験をお持ちですので安心して受講して頂けます。

　校長はアメリカで数々のミュージカルに出演された経験をお持ちです。
　現在スクールの校長だけではなく、アーティストとしてもご活動されて
　います。

　ボーカルレッスンだけではなく、ピアノやギター等も同校で教えられて
　います。

　また、ボーカルレッスンでも、「ショークワイヤーアンサンブル」
　「ミュージカルコース」等多くのコースを学ぶ事ができます。
　詳しいコース説明等はコチラをご覧下さい。
　http://tinkerbell-music.com/course.html

　特徴の一つとして、不登校の方や精神疾患患者の方等を対象とした
　ミュージックセラピーという、音楽を通じて心身共に健康に導いてくれる
　音楽療法も行われております。
　ご興味があられる方は一度お問い合わせしてみて下さい。
　http://tinkerbell-music.com/contact/index.html

　また、オープニング記念として「初回30分無料体験レッスン」を実施
　されています。
　プロを目指したい方、音楽関係のお仕事を目指される方等は本格的な
　レッスンを受けられるので一度ホームページをご覧になってみて下さい。
http://tinkerbell-music.com/index.html

今回ご紹介するサイトは、千葉県を中心にハワイウォーターの宅配サービスをされ
ている「ハワイウォーター京葉センター」様のWebサイトです。

現在は東京２３区と千葉県を中心に宅配サービスを展開されていますが、埼玉県・
茨城県とサービスエリアを順次拡大されています。

ハワイウォーターとはハワイの大自然で25年もの長い歳月をかけて濾過された地下
水の事でミネラルウォーターとは違い純度99.9％の純水です。

不純物もなくナトリウムも限りなく少ないので、むくみの気になる方や高血圧の方
だけでなく、妊娠中・授乳中・赤ちゃん等におすすめできる人に優しいピュアウォ
ーターです。

サイトの特長としては「新規お申し込み」「追加ご注文」の２つ注文フォームが用
意されています。

新規で必要な項目と2回目以降のお客様の注文フォームを分けることにより、面倒な
住所入力を省略できますので営業時間外の注文も簡単にできるようになっています。

新規のご注文はhttp://hawaii-keiyou.co.jp/order/newly.htmlになります。
追加注文の場合はhttp://hawaii-keiyou.co.jp/order/addition.htmlになります。

注文するに当たりお支払い方法やディスペンサーのメンテナンス・修理等の気になる
事が多いと思いますが、よくある質問に対してはサイト内で回答されていますので注
文をお考えの方は一度ご覧下さい。
http://hawaii-keiyou.co.jp/qa.html

安心して生水を飲みたい方は一度「ハワイウォーター京葉センター」様のWEBサイトを
ご覧ください。
http://hawaii-keiyou.co.jp/index.html

今回はcssのクラスを複数指定する方法です。

タグにクラスを指定しているとき、前出てきたクラスの指定内容と似ているけど、ちょっとだけ変えたい、という時、ありませんか？
たとえば、『.test』というクラスにborder-bottomを指定していたけど、今度使うタグに指定するクラスにはborder-bottomだけでなく、background-colorも指定したい。
そんな時どうしますか？
線（下）だけでなく背景色をつけたクラスをたとえば『.test2』というクラス指定にしたとします。
次、また新たにborder-bottom・background-colorだけでなく、さらにborder-topも指定したい･･･となったとき。
線（bottom）も背景色も線（top）も指定したcssを『.test3』にします・・・

といった具合にするとどんどんcssが増えて複雑になっていきます。
今の時点でのcssを全て書くと



内容を見ると被っている部分が見られます。
次々に新しいcssを足していくと、膨大なソースが書かれたcssになりかねません。
後で見直してもきっと修正しにくいcssになる確率が高いと思われます。
そこで、この技！実はクラスは複数指定してやることが出来るんです。

上記のクラスを参考にソースを書いて見ます。
まずcss。



ではhtmlソースを。
まず一つづつ指定するのは書かなくてもお分かりですね？



こうなります。

この状態に、さらに背景を灰色にしたい、つまりtest2というcssを追加で指定してあげましょう。



いかがでしょうか？
文字の背景が灰色になりました。
このように複数のクラスを指定したいときは、クラス名を空白で区切ると複数指定することが出来ます。
もちろん空白は半角の空白にして下さい。

こうすると.test1と.test3を組み合わせたり、.test1.test2.test3全部組み合わせたりすることも可能です。
慣れるまでは難しいかもしれません。
また、他ページ等で多用する予定があるcssなら、複数指定せず、専用のcssを書いたほうが良い場合もあります。
自分なりのルールを決めて自分のものにしていってくださいね。

ではまた次回！

今回ご紹介するサイトは、兵庫県尼崎市にある透析医療をされている
「黒田泌尿器科」様のWebサイトです。

黒田泌尿器科様のWebサイトの特長はスタッフ様の募集に力を入れられています。

各ページの下部に募集のバナーを設置し、実際に働かれている人の一日を分かり易く
写真とテキストで見せています。
「看護師の一日」として楽しく、明るい職場環境がよく伝わるページになっています。
看護師の方のお写真も元気な表情が、これから応募される方も良いイメージで応募さ
れると思います。
http://www.kurodahd.com/oneday.html

また、人間関係や休暇等も応募される方は不安が多いと思いますが、「看護師Ｑ＆Ａ」
のページでそういった不安も払拭できると思います。
http://www.kurodahd.com/voice.html

もちろん患者様向けに泌尿器科・人工透析の情報も掲載されています。

診察時間や診察案内等一般的な項目以外にも「透析室スタッフインタビュー」という
ページを設けました。

実際に透析室のスタッフ様の声を掲載し、患者様の不安をなくす事ができます。
単純にテキストだけでの説明では患者様も詳しくは読まない事もあり、あまり印象に
残らない事も多いと思います。
しかし、スタッフ様のお写真と共に掲載する事により、より効果的にお客様にはお伝え
できています。

通院が困難な患者様には自宅から病院まで送り迎えもされております。
http://www.kurodahd.com/support.html

また、キレイな院内や施設も掲載されていますのでご覧ください。
http://www.kurodahd.com/sisetu.html

よい職場環境で働きたい方は是非ご覧ください。
http://www.kurodahd.com/index.html

前回はテキストリンクをメニューボタンのように見せる方法を
お伝えしました。
前回→http://www.ryuumu.co.jp/ryuumu/stuffblog/e360.html
今回はさらにもう一工夫！マウスが乗ったら背景色を変更しましょう。
背景色の変更といってもリンクテキストだけではなく、
前回やったリンクが有効になっているブロックの背景を変更します。

今回も分かりやすくする為に、リストの背景は画像ではなく色にします。

まず前回同様、普通にリストを書きます。



このままだと、文字にだけリンクが貼られている状態ですね。

では次にスタイルシートです。



前回と違うところは、a:hoverが追加されたことです。
リストのリンクタグで、hover（マウスがのった時）の動きをどうするか、という指定をしています。
これも普通のリンクと同じように指定できますが、その前のリンクタグにdisplay:blockを指定しているので
リンクタグ内がブロック（長方形の形をした表示領域）になっている為、ブロックの背景色が変化しているのです。
ためしに、li aのdisplay:blockを削除してみてください。
リンクテキスト部分の背景しか色が変化しませんね？
　
いかがでしょうか？
普通のテキストリンクで物足りなくなった場合、このような装飾をすることで、デザインも見やすくなりますね！
　　
ではまた次回！