今回はリスト(箇条書き)についてのお話です。
以前にもリストについては少しだけお話しました。
リストを横並びにする方法参照
→
http://www.ryuumu.co.jp/ryuumu/stuffblog/e345.html
この時はリストマーカーを表示させない方法に少し触れましたが、このマーカーのデザインを変更することも可能です。
凝ったマーカーにしたい場合は、自身で作成した画像をマーカーに指定しましょう。
まず、bodyタグ内に
こう書くと
・1項目
・2項目
・3項目
と表示されます。
これらにスタイルシートを指定してやります。
それにはまずリストマーカーにしたい画像を用意しておきましょう。
文字と同じ大きさくらいか、それより小さいほうがリストとして見栄えもいいと思います。
次に、スタイルシートの部分に
と入れてやると、黒丸だったリストマーカーが用意した画像になりました。
これだけでリストがとてもおしゃれになったと思いませんか?
とっても便利でお手軽にデザインできるところが魅力的。
ですが!
用意した画像の大きさによっては、画像とテキストが一直線上に並ばずに画像がずれて表示されてしまいます。
リストマーカーに使った画像とテキストを一直線に並べる為には
他の方法で解決するのですが、長くなるので次回にお話することにします!
ではまた次回!
| http://www.ryuumu.co.jp/ryuumu/stuffblog/index.php?e=354 |
|
ソース(ホームページ)のレシピ by 委員長! | 07:30 PM | comments (x) | trackback (x) |