今回ご紹介するサイトは、楽天ストアでキッチン用品を販売されている
「くるちかも」様のWebサイトです。

くるちかも様のWebサイトの特長はとにかく取扱い商品の多さです。

料理をあまりしない私でも知っているブランドも多数あり、ル・クルーゼ
やジョゼフ・ジョゼフ等オシャレな調理器具メーカーの商品も取り扱われて
いるので見てるだけでも楽しめるWebサイトです。

また、カテゴリ分けが見やすいのも特徴です。
種類別やメーカー別だけでなく、用途別や金額別等も用意されているので
商品点数が多いですが、探しやすいWebサイトになっています。

お店をされている方だけではなく、一般のお客様でも購入できますので
プロが使用する調理器具をご家庭で使用する事ができます。

個人的に気になった商品を２つご紹介させて頂きます。

【焼鳥器】
http://item.rakuten.co.jp/culticamo/3-0507-0402/
今までフライパンで焼いていた焼き鳥がこれを購入すれば、家庭でも本格的
な香ばしい焼き鳥が食べれます。

【ニューキャベック】
http://item.rakuten.co.jp/culticamo/3-0427-1001/
簡単に誰でもキャベツの千切りを作ることのできる調理器具です。
普段包丁を使い慣れていない人でも怪我の心配はございません。
これで時間短縮できますね。

この他にも魅力的な商品が多数ありますので料理をよくされる方も
されない方も楽しんでお買い物できる「くるちかも」様のWebサイトを是非
一度ご覧ください。
http://www.rakuten.co.jp/culticamo/

さて、今回は前回までのリストをメニューボタンのように見せる方法に一工夫をし、リンクが貼られた文字以外をクリックしてもリンクが貼れるようにします。
・・・この説明で分かりますか？
百聞は一見に如かず！実際やってみましょう。

前回の記事→http://www.ryuumu.co.jp/ryuumu/stuffblog/e357.html
今回は分かりやすくする為に、リストの背景は画像ではなく色にします。


まず普通にリストを書きます。
リンクボタンにしたいので、リンクも今回から追加します。



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

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

　

いかがでしょうか？
色背景がついたリスト部分（文字が無い部分）にマウスをのせてもリンクが有効になっていることが確認できましたでしょうか？
これは、liのaにdisplay:blockというスタイルシートを追加したからです。
リンクタグである、a　はインライン要素と呼ばれるものなので、通常ではリンクタグ内だけにリンクが有効になっています。
このインライン要素をブロック要素にすることで、文字通り、リンクタグ内をブロック（長方形の形をした表示領域）にしてやります。
　
これを利用することで、もっと表現の幅が広がります。
が、少し長くなりそうなので、次回にまわしたいと思います！
　
ではまた次回！