今回ご紹介するサイトは、京都で老舗の寝具メーカーである
　「ロマンス小杉」様の夏期限定の特設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;
とすることも可能です。

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

では、また次回！

　今回は前回のborderの書き方の補足です。
　前回→http://www.ryuumu.co.jp/ryuumu/stuffblog/e366.html

　「ボーダーを表示させるには、太さや色だけでなく
　　種類を指定しなければなりません」
　と書きましたね。
　この種類や太さについて少しお話します。

　まず種類について。
　種類の指定はborder-styleになります。
　styleは様々な種類の線種を表示させることができます。
　一部だけあげると、
　solid→1本線　double→2本線　dashed→破線　dotted→点線　等･･･。
　といった具合ですね。一度試してみて下さい。
　ただし、ブラウザによっては思ったような表示にならなかったりするので
　乱用は禁物です！

　次に太さについても、もう少し。
　線の太さはborder-widthになりますが、数値で指定する方法と、
　キーワードで指定する方法とあります。
　数値はたとえば1pxや、1em、などです。例でも使用していますね。
　キーワードで指定するには、
　thin（細い）、midiun（普通）、thick（太い）がありますが、
　実際に表示される太さはブラウザによって異なるので、
　キーワードより数値で指定するほうが良いでしょう。

　と補足が済んだ所で、次は、前回よりもっと簡単に短縮して書く方法ですが・・・
　これを全部書くと長くなりますので、また次回にします！

　では、また次回！

今回ご紹介するサイトは、もつ鍋をネット販売されている「崔家の健
美鍋」様のWEBサイトです。

WEBサイトを見て頂ければお分かりになると思いますが、韓国風の味付
けの一風変わったもつ鍋です。

「崔家の健美鍋」は「サイカのケンビナベ」と読みます。
美味しい食事で身体の中からキレイになるというコンセプトのお鍋です。

健美鍋の特長と致しましては、野菜もホルモンも全部セットになっている
のでお鍋を用意するだけですぐに食べれるようになっていることです。
準備もなく、具材を切ったり、味付けしたりという調理もなく、10分～15分
で美味しいもつ鍋を頂けます。
また、野菜もホルモンも全てセットになっている商品は本来の美味しさを実感
する事ができるのでお勧めです。野菜もホルモンもオーナーが直接足を運んで
厳選した食材を使用しているので、とても甘みと旨みが出ます。
【２～３人前】
http://www.saikanokenbinabe.com/products/detail/2
【４～５人前】
http://www.saikanokenbinabe.com/products/detail/4

野菜は自分で用意するという方にもホルモンとタレの「お試しセット」も
販売されていますのでお試し下さい。
用意する野菜の目安やつくり方はこちらにページを用意していますので
ご覧ください。
http://www.saikanokenbinabe.com/recipe.html

ホルモンやトッポギ等は別途追加注文できますので大勢集まるパーティー
等にも最適です。
http://www.saikanokenbinabe.com/products/list/2

また、WEBでは頻繁にキャンペーンをされていますので、是非一度ご覧下さい。
http://www.saikanokenbinabe.com/user_data/camp.php
現在は韓国スプーンが先着300名様にプレゼントされています。
プレゼント目当てのお客様もおられるそうなのでなくなる前に是非一度、
購入してみて下さい。

夏バテ気味のお父さん・美容を気にするお母さん・食べ盛りのお子さん。
皆喜ぶ崔家の健美鍋を是非一度お試しください。
http://www.saikanokenbinabe.com/

以前とっても便利な、margin指定を短縮して書く方法という
お話をした事があります。
記事→http://www.ryuumu.co.jp/ryuumu/stuffblog/e334.html

そのときにちょっとだけ書いた、
『これはpaddingもborderでもまったく同じように書く事が出来ます。』
という一言。
当時、ボーダーについてはあまり詳しくお話していませんでしたので、今回はボーダーについてです！

ボーダー（線）には線の太さを指定する、border-widthと
線の種類を指定する、border-styleと
線の色を指定する、border-color、があります。

もっというと、線も上下左右に指定できるので、下に線を引きたいのであればborder-bottom、と指定してやるのですが、これをこのまま上下左右全部書くと、指定だけですごいソース量になってしまいます。
そこで　border-width:2px 5px 1px 10px;
と書いてやることで、ボーダーの線の太さを上下左右で変えることができます。
これが、前お話したように、上、右、下、左という時計回りに指定しています。

同様に、border-styleもborder-colorも、時計回りに指定することで、上下左右違う線種を指定したり出来ます。
例でソースを書いて見ましょう。

cssを書いてみると、




次にソースを書くと、



気をつけなければならないのが、ボーダーは太さや色だけを指定しても表示されません。
これは、border-styleの初期値がnoneなので、ボーダーは表示されず、太さが0になります。
よって、ボーダーを表示させるには、太さや色だけでなく、種類を指定しなければなりません。
　
そこで種類や太さについて少し補足をしたいのですが、ちょっと長くなりそうなので、次回にお話しします。

ではまた次回！