CSS
無料お問合せはこちらから TEL 075-257-4588 営業時間 AM9:30~PM6:30

スタッフブログ | リストマーカーを画像で表示する方法
スタッフブログ
リストマーカーを画像で表示する方法

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

まず、bodyタグ内に

リストの書き方例

こう書くと

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

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

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

li-style-image:url(画像へのパス);

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

ですが!

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

ではまた次回!

| http://www.ryuumu.co.jp/ryuumu/stuffblog/index.php?e=354 |
| ソース(ホームページ)のレシピ by 委員長! | 07:30 PM | comments (x) | trackback (x) |

<< PAGE TOP >>

BACK UP 初心者でホームページを考えてられてる方へ

独自ネットショップや楽天ショップ・YAHOOショップ運営される初心者の方も、無料で、親切にアドバイスいたします。
SEO・月次更新・リニュアルetc

ホームページ制作の事なら

何でもお問合せください。
お問合せフォームはこちらから

リュウム株式会社

京都市中京区橋弁慶町222番地
ヒライビル3階

TEL 075-257-4588
営業時間 AM9:30-PM6:30

無料お問合せはこちらから TEL 075-257-4588 営業時間 AM10:00~PM7:00

スタッフブログ | リストマーカーを画像で表示する方法
CSS