今回ご紹介するサイトは、家庭教師をされている
「ホームティーチャーホップ」様の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の位置に背景画像の表示が
開始される位置になる、ということです。
用意した画像によってこの値はかわってくるので、一度背景画像を
表示させてから微調整を行ってみてください。

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

ではまた次回！

今回ご紹介するサイトは、三条烏丸でデザイン雑貨やアンティーク商品を
取り扱われる「VEST MODE」様のWebサイトです。

この度2012年4月5日に店舗をオープンされるということで1ヶ月前にお話
を頂き制作させて頂きました。

オーナー様が凄くオシャレな方でその趣向がよく反映された店舗になって
おり、Webサイトではモノトーンを基調としたデザインにさせて頂きました。

TOPページにはオシャレな雑貨のイメージをより多くのお客様にお伝えでき
るようにとFlashを入れさせて頂いてます。

また、ブログではオープン前の様子や店内の写真を掲載されています。
今後は新入荷商品等もブログで紹介してくださるそうなので期待しており
ます。
http://www.vestmode.com/info/

数点ではありますが、取り扱われている商品も載せられております。
店舗ではキッチン雑貨やリビング雑貨等数多く取り扱われております。
http://www.vestmode.com/products.html

女性は特にキッチンに立つ時間が長いのでキレイでオシャレなキッチン雑貨
があれば、料理するのも楽しくなりますね。
形から入りたがる男性にはリビングをオシャレにする雑貨で普段の生活をワ
ンランクアップさせるのもいいですね。

オシャレな輸入雑貨のお店「VEST MODE」様のサイトでした。
http://www.vestmode.com/