今回ご紹介するサイトは、楽天ストアでキッチン用品を販売されている
「くるちかも」様の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　はインライン要素と呼ばれるものなので、通常ではリンクタグ内だけにリンクが有効になっています。
このインライン要素をブロック要素にすることで、文字通り、リンクタグ内をブロック（長方形の形をした表示領域）にしてやります。
　
これを利用することで、もっと表現の幅が広がります。
が、少し長くなりそうなので、次回にまわしたいと思います！
　
ではまた次回！

今回ご紹介するサイトは、家庭教師をされている
「ホームティーチャーホップ」様のWebサイトです。

京都・滋賀・奈良・大阪と近畿の2府2県を中心に家庭教師をされて
います。

目先の学力アップだけではなく、未来ある子ども達に楽しく学習して
頂き、勉強を好きになってもらう事を考えられております。

子ども達の内面的なサポートにも力を入れられている為、学校生活
でお悩みの場合にもご相談してみて下さい。
http://www.hop-brothers.com/contact/index.html

お子様一人一人個性があり、どういったカリキュラムで進めるのか等
19年間やられている実績がありますので安心して大切なお子様を任す
事ができますね。

また、ブログを日々更新されており、本当に生徒さんの事を真剣に考え
られているのが伝わってくると思います。
http://www.hop-brothers.com/info/c3.html

受験勉強だけでなく、日常の学習にもご利用頂けますので一度
「ホームティーチャーホップ」様のWebサイトをご覧ください。
http://www.hop-brothers.com/

さて、今回は前回のリストマーカーを画像で表示する方法を少し応用し、リストを画像で作ったメニューボタンのように見せる方法についてです。
前回の記事→http://www.ryuumu.co.jp/ryuumu/stuffblog/e356.html

リストの背景に指定する画像を用意します。
私は、ストライプとかドットとか、うまくつなぎ合わせれば違和感なく見せられるような画像を用意しました。

まず普通にリストを書きます。



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



前回とほぼ同じような書き方ですが、background-repeatが違いますね。
前回は画像を1回だけ表示させる為、リピートしないという指定をしていますが、今回はリストの背景に画像を敷き詰めたように表現したかったのでこのように指定しています。
このあたりは用意する画像によってかわってくると思います。
小さな画像で繰り返したい場合はrepeatで、大きな画像を1枚背景にしたい場合はno-repeatで、
横方向にだけ繰り返したい場合はrepeat-xで、縦方向にだけ繰り返したい場合はrepeat-yです。

こうすることでリストの項目の数だけ画像を作らなくても、背景にしたい画像1枚用意するだけで画像ボタン風のメニューが作れます。
あとで項目を増やしたい場合も、リストタグを増やすだけでいいのでとっても簡単ですね！
ボタンのデザインを変更したい場合も、背景にした画像を修正するだけで簡単に雰囲気を変えられます。

ただ、文字の大きさにあわせてリストが生成されているので、liにpaddingをつかって項目の内側に余白をいれてやると、よりいっそう見やすくそしてメニューボタンに見えます。
また、横幅を調整したり、marginを調整したりと、微調整は必要になってくるので、表示状態を見て変更して下さい。

数値を変えてみたり、画像を変えてみたり、いろいろ試してみてくださいね。
デザインの幅がグッと広がると思います！
　
ではまた次回！

前回、リストマーカーをデザインするお話をしました。
前回→http://www.ryuumu.co.jp/ryuumu/stuffblog/e354.html

リストマーカーに使う画像とテキストを一直線に並べる為には
リストの背景に画像を表示させます。

まず、bodyタグ内に



と書き、スタイルシートの部分に



と書きます。
これでリストの背景に画像が表示されました。
background-repeatをno-repeatと書く事で、文字通り
背景を繰り返さず、マーカーのように1回だけ表示させています。
ですが、このままだと背景が文字にかぶってしまっているので
paddingを使って調整してください。

ここからが本番。
用意した画像によっては、文字と画像が綺麗に一直線に
並ばず、画像がずれて表示されている場合があります。
ここでいじりたいのが、スタイルシートのliに書いた
background-position　です。
これは背景画像の表示開始位置を指定するプロパティになります。
background-position：横方向 縦方向;というように、
半角スペースで区切って指定します。
leftとtopと書いていましたが、これは背景画像を左上に固定する
という意味になります。
もしrightとtopとかけば、背景画像が右上に固定されます。

今回は微妙な調整をしたいので、数値で指定します。

background-position: 5px 10px;

といった感じですね。
5pxが横方向、10pxが縦方向の指定になりますので
この指定だと左端から5px、上端から10pxの位置に背景画像の表示が
開始される位置になる、ということです。
用意した画像によってこの値はかわってくるので、一度背景画像を
表示させてから微調整を行ってみてください。

この方法を応用すると、様々なデザインのメニューボタンを
作れたりするので、是非試してみてくださいね！

ではまた次回！