(HTML,CSS)CSSでリストの先頭記号に画像を指定するHTMLで作るリストの先頭記号は、黒丸や白丸など味気ないものですね。この先頭記号を好きな画像に変更できたら良いなと思ったことはありませんか?スタイルシート(CSS)で装飾すれば、簡単に実現できます。囲む)を入れて使用します。次のように記述します。<li>冷蔵庫</li></ul>上記のHTMLソースを表示させると、次のように見えます。About側のスタイルシート」にも影響されるため、標準の見え方とは異なる場合があります。閲覧に使用するブラウザによって見え方が異なる可能性がありますが、代表的なブラウザでは、各項目の先頭に黒丸が付いて表示されます。このようにして、手軽に「リスト」が表現できます。この先頭の記号を画像で表現できれば、いろいろ見栄え良くできそうです。プロパティそこで、スタイルシートの出番です。list-style-imageプロパティを使うと、リストの先頭記号を画像に変えることができます。※指定した画像が読み込めなかった場合は、従来通りの表示になります。指定方法は簡単で、次のように画像ファイル名を指定します。url("head.gif");この指定によって、「head.gif」というファイル名の画像が、リストの先頭に表示されるようになります。実際に、<ul>タグに指定を加える場合は、次のように記述します。url('head.gif');">※ダブルクオーテーションの中にさらにダブルクオーテーションを書くことはできないので、画像ファイルの指定部分はシングルクオーテーションで囲んでいます。試してみましょうそれでは、サンプルをご紹介致しましょう。ここでは、先頭に付ける画像として次のような画像を用意しました。HTMLとスタイルシートを次のように記述してみます。<li>冷蔵庫</li></ul>上記のソースを実際に表示させると、次のように見えます。パソコンテレビ冷蔵庫もちろん、画像は何でも構いません。パソコンテレビ冷蔵庫このように、簡単にリストの先頭記号を画像に置き換えられます。内)に、次のように記述しておきましょう。普通に記述するだけで、リスト項目の先頭記号を画像に変えることができます。おわりにこのように、スタイルシートを使うと、手軽に好みのデザインのリスト(箇条書き)を作ることができます。みなさんもお試し下さい。【関連記事】リスト(ul要素)を装飾した際の表示差を解消サイトマップページを作る夜の間だけハロウィン仕様に変化させる周囲の余白や文字も含めてリンクをデザイン角丸タブを使ったタブボックスを作る【編集部おすすめの購入サイト】ソフトバンクユーザーならYahoo!ショッピングでお買い物がおすすめ楽天市場でホームページ作成関連の書籍を見るAmazonでホームページ作成の参考書を見る※記事内容は執筆時点のものです。最新の内容をご確認ください。異なる可能性があります。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。