今回ご紹介するサイトは、京都で観光を専門にガイドされている
　「福田タクシー」様のWEBサイトです。

　30年もガイドの経験がおありの、ベテラン運転手様がされている
　観光タクシーです。

　Webサイト内で使用させて頂いているお写真のほとんどは
　京都の名所で撮影させて頂いたお写真になります。
　また、サイトデザインをするにあたり、深い緑であったり、
　桜の画像をうっすら配置したりなど全体をみて京都らしさを
　感じていただけるように致しました。

　京都に観光で来られる方はもちろん、
　地元の京都をもっとよく知りたいという方も是非ご利用下さい。
　どこが今見どころなのか等知らなくても、福田様に四季折々の見どころを
　ご提案していただけますので計画を立てなくても安心です。

　京都市内の観光地を知り尽くしていらっしゃるので、
　メジャーな京都だけではなく、色々な京都の楽しみ方が体験できます。

　ドライバーの福田宏様はとても朗らかな性格で毎日元気にお客様を
　ご案内されている方ですので、退屈することなく京都観光が楽しめます。
　福田様のご紹介と車両紹介はこちらです。
　http://www.fukudataxi.com/car.html

　また、料金も市内を一日観光してもリーズナブルな料金になっています。
　普通のタクシーで観光するよりも断然楽しめ、限られた時間でも無駄なく
　有意義な時間で観光して頂けます。
　http://www.fukudataxi.com/price.html

　これからの京都は各所で夏祭りが開かれ、来月には大文字の送り火もあります。
　是非、慌ただしい日々にお疲れの方は京都観光にいらして下さい。
　有名観光神社、仏閣等で人混みに揉まれて疲れるよりも福田タクシー様で
　京都の穴場を巡るのもいいですね。

　福田タクシー様のWebサイトはこちらです。
　http://www.fukudataxi.com/

さて、今回もcssを短縮で書く技です。
背景に関する内容を一括で指定してみましょう。

backgrounに関するcssは

background-color
background-image
background-repeat
background-position
background-attachment

等があります。
これを一つ一つ指定すると、5行も書かなくてはいけませんね。
これもborder等と同じく、一括指定することが可能です。

background: #ffffff url(bg.png) repeat-y right top fixed;

と書いてやります。
これで完了です。
どうでしょうか？1行にまとめられましたね。
今回の例は、color・image・repeat・position・attachment
の順番で書いていますが、必要のない指定は省略することもできて、
並べる順番も特に決まりはありません。

これでソースがだいぶ簡単になります。


いかがでしたでしょうか？
今まで沢山のcssの技をご紹介してきました。
floatやlist、border等、基本的なことはほぼ出来たのではないかと思います。
あとはこれらの技を駆使して、様々なデザインに挑戦していってください。
何度も申し上げていますが、慣れることがとても大切なので
たくさん使って慣れて、自分のものにしていって下さいね。

では！

　今回ご紹介するサイトは、京都で老舗の寝具メーカーである
　「ロマンス小杉」様の夏期限定の特設WEBサイトです。

　昨年大ヒットした商品を今年も販売されるにあたり、制作を依頼されました。

　商品名は「アイス眠」！！

　エコが叫ばれる昨今、電気代が家計を苦しめる時代ということもあり、
　就寝時はクーラーを付けず、汗をかいて寝ている人が多いと思います。
　大事な睡眠をきちんと取らないと疲れが取れず、夏バテになる人が
　多いと思います。

　節電を求められる夏場、熱帯夜でお困りの方に最適な商品になっています。

　アイス眠の特長としては、熱をためにくく、素早く放熱する涼感素材を
　使用しているため、ヒンヤリと気持ちよく、寝返りするとすぐに冷たさが
　戻ります。

　枕だけでなく、敷きパッド・掛布団にパジャマ等ラインナップを
　多数用意されています。
　どの商品もひんやりとした感触が気持よく夏の眠りに最適です

　「アイス眠」だけではなく、消臭機能が追加された「アイス眠EX」の
　2種類ご用意されています。
　http://www.romance.co.jp/icemin/iceminex.html

　購入したいけど、どこで売っているのかわからないという方はこちらを
　ご覧下さい。
　http://www.romance.co.jp/icemin/chainlist.html
　取扱店舗が掲載されていますので、お近くの販売店まで
　お立ち寄りください。


　今年の夏を乗り切る涼感寝具です。ご興味を持たれた方は
　一度ご覧下さい。
　http://www.romance.co.jp/icemin/index.html

さて、前回の続きです。
前回→http://www.ryuumu.co.jp/ryuumu/stuffblog/e368.html

前回の例では、ボーダーの色も線種も太さも上下左右バラバラに指定することが出来ます。
では、上下左右同じ色、太さ、線種にしたい場合は･･･？



このように値を一つ指定した場合、上下左右が3px、というように一括指定できます。
値を二つ指定した場合は、記述した順に上下、左右、の太さになります。
では値を三つ指定した場合は？
記述した順に、上、左右、下、の太さになります。
これはborder-colorもborder-styleにも言えることなので
、同じように上記のような書き方が出来ます。

でも、もっと簡単な書き方があります！
それが、border！です。
borderはボーダーのスタイル・太さ・色を指定することが出来ます。
つまり、



としてやることで、3行が1行になりました！
上下左右同じ線を指定するときしか使えませんが、簡単にかけて覚えやすく便利！です。

もちろん、ボーダーを下にしか引きたくない場合は
border-bottom:1px solid #f00;
とすることも可能です。

これで沢山の可能性が広がりますね！
ボーダーは、変わった線種で画像を囲ったり、文章の一部を囲ってみたりすることで
簡単にデザインを変えることが出来る、便利なスタイルシートです。
是非慣れてみてくださいね！

では、また次回！