前回はテキストリンクをメニューボタンのように見せる方法を
お伝えしました。
前回→http://www.ryuumu.co.jp/ryuumu/stuffblog/e360.html
今回はさらにもう一工夫！マウスが乗ったら背景色を変更しましょう。
背景色の変更といってもリンクテキストだけではなく、
前回やったリンクが有効になっているブロックの背景を変更します。

今回も分かりやすくする為に、リストの背景は画像ではなく色にします。

まず前回同様、普通にリストを書きます。



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

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



前回と違うところは、a:hoverが追加されたことです。
リストのリンクタグで、hover（マウスがのった時）の動きをどうするか、という指定をしています。
これも普通のリンクと同じように指定できますが、その前のリンクタグにdisplay:blockを指定しているので
リンクタグ内がブロック（長方形の形をした表示領域）になっている為、ブロックの背景色が変化しているのです。
ためしに、li aのdisplay:blockを削除してみてください。
リンクテキスト部分の背景しか色が変化しませんね？
　
いかがでしょうか？
普通のテキストリンクで物足りなくなった場合、このような装飾をすることで、デザインも見やすくなりますね！
　　
ではまた次回！

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

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


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



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

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

　

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

さて、今回は前回のリストマーカーを画像で表示する方法を少し応用し、リストを画像で作ったメニューボタンのように見せる方法についてです。
前回の記事→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の位置に背景画像の表示が
開始される位置になる、ということです。
用意した画像によってこの値はかわってくるので、一度背景画像を
表示させてから微調整を行ってみてください。

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

ではまた次回！

今回はリスト（箇条書き）についてのお話です。
以前にもリストについては少しだけお話しました。
リストを横並びにする方法参照
→http://www.ryuumu.co.jp/ryuumu/stuffblog/e345.html
この時はリストマーカーを表示させない方法に少し触れましたが、このマーカーのデザインを変更することも可能です。
凝ったマーカーにしたい場合は、自身で作成した画像をマーカーに指定しましょう。

まず、bodyタグ内に



こう書くと

　・1項目
　・2項目
　・3項目

と表示されます。
これらにスタイルシートを指定してやります。
それにはまずリストマーカーにしたい画像を用意しておきましょう。
文字と同じ大きさくらいか、それより小さいほうがリストとして見栄えもいいと思います。

次に、スタイルシートの部分に



と入れてやると、黒丸だったリストマーカーが用意した画像になりました。
これだけでリストがとてもおしゃれになったと思いませんか？
とっても便利でお手軽にデザインできるところが魅力的。

ですが！

用意した画像の大きさによっては、画像とテキストが一直線上に並ばずに画像がずれて表示されてしまいます。
リストマーカーに使った画像とテキストを一直線に並べる為には
他の方法で解決するのですが、長くなるので次回にお話することにします！

ではまた次回！