WEB作成メモBLOG

テキストの前後にアイコン画像を表示させたい時のCSS

HTML・CSS, WEB制作の小技や機能 | 2010.11.09

リストの頭にアイコン画像をつけて、なおかつテキストの終わりにも画像をつけたい時のCSSをメモしておきたいと思います。(あまり使う場面はないかもしれませんが・・・)

構造としては、リストタグ<li>にリストの頭につける画像を表示させ、中のテキストを<a>または、<div>や<span>でくくって、その背景に右寄せで画像を表示させます。

例えば、<li>には、以下の様なCSSを充てます。
padding:0 0 0 14px;
background-image:url(../img/icon01.gif);
background-repeat:no-repeat;
background-position:0px 4px;
list-style:none;

で、中のテキストには、以下の様なCSSを充てます。
padding:0 24px 0 0;
background-image:url(../img/icon02.gif);
background-repeat:no-repeat;
background-position:right 3px;

ちょっとした画像によって種類分けをする事は、コーディングをする際には見た目以上にひと手間かかり、面倒な事も多いですが、
小さなことの積み重ねでWEBサイトの見やすさ・分かりやすさに「差」が出てきます。
使えるCSSソースなどは活用できるようにストックしておき、分かりやすさの為にひと手間かかるサイトコーディングも素早くできるようにしたいものです。

【PR】使わなくなったパソコンはありませんか?パソコン無料回収

関連する記事

カラーミーショップはリアルな店舗を持っていなくても、ネットを通じて商品を販売する楽しみを多くの人に実感してもらえるショッピングカートです。これまでに23万を超えるユーザー様からお申込みをいただいております。
カラーミーショップなら誰かに(大手に)頼らなくても、あなた好みのネットショップを作れます。あなたがセレクトした商品や作った商品の魅力を伝え、それを欲しいと思ってくれる人にお届けしてみませんか。
30日間、無料でお試しいただけるので、初心者の方やネットショップ作成サービスで悩んでいる方も、安心してご利用いただけます。
ロリポップ!レンタルサーバー!はあなたの「やってみたい!」を応援します!
ロリポップ!なら、ホームページ、ブログ、ネットショップ…
これらが今すぐ、そして簡単にできちゃう!
マニュアルやライブチャットを完備しているので、ホームページ初心者でも安心。
これだけついてるのに月額100円(税抜)~ととってもお得。
もちろん無料のお試し期間も10日間あるので安心ですね。

▼ロリポップ!レンタルサーバーはこちら
▼インストール不要の画像作成ツール▼
画像作成ツールボタンメーカープロ

カテゴリー

アーカイブ


リンク

アフラット
ページのトップへ戻る