提携パートナー連絡フォームその他その他のお問い合わせホームページ運営ブログBlogホームページのことを中心にためになるかもしれないことをいろいろと書いています。ホームページ制作のことからSEOや広告、マーケティングの話まで思いついたことを語っています。今回は、リストに独自アイコンを使う方法を紹介します。通常、ulやolを使ったリストはこのようになりますね、リストリストリストやっぱりデザイン的にもっとおしゃれにしたいってことありませんか。今回は、リストのマークをカスタマイズするのに知っておきたい2つの方法を紹介します。リストのマークにオリジナルの画像を使うリストマークにオリジナルの画像を使ってみましょう。リストのマークにアイコンを使いたいことってありますよね。初心者の人がやりがちなんですが、普通に画像を置いてその横にテキストを配置するという方法を取る人もいると思います。この方法だと使い回しができないですよね。毎回画像とテキストを並べないといけないし、リストマークを変更するときにすべての画像を変更する必要があって運用上良くないですね。すべてスタイルシートで制御できるように工夫してみましょう。オリジナルの画像を使うには、アイコンを背景画像にする方法と、疑似要素:beforeを使う2つの方法があります。CodePen.背景画像としてアイコンを左上に配置するサイズや位置を調整するテキストをpadding-leftでずらすってことをやってます。難しいことはしていないと思うので、CSSコードを読んでみて理解してください。疑似要素を使ったリスト同じことを疑似要素を使ってやってみましょう。CodePen.疑似要素を使って先頭にアイコン画像を配置アイコン画像のサイズや位置を調整テキストとの間隔をmargin-rightで設定こちらの方が背景を使った場合より少し複雑ですね。初心者がやりがちなimgタグ+テキストとよく似ています。CSSで制御するために疑似要素を使っているだけで、CSSで画像を差し込んでいるイメージですね。2つの方法を紹介しましたが、どちらがおすすめかというと背景画像として設定する方が簡単で便利です。アイコンの上に番号を乗せたいときもあるでしょう。背景画像だったら、そういったことも可能です。画像の上にテキストを重ねることで、数字付きアイコンリストにすることができます。CodePen.やっていることはリストの先頭に数字を入れる。見栄えのためにcolorとかfont-sizeとかもろもろ余分に書いていますが、ポイントとなるのは上のような感じです。いかがでしたでしょうか。CSSで実装しているので、これでアイコンリストも使い回しがしやすくなりましたね。知らなかった人はぜひ参考にして活用してください。[Service]0-0これも読もう!関連する内容の記事CSSで番号付きリストを好きなフォーマットで表示させる方法HTMLとCSSで画像やWEBフォントを使って自由にリストを表現する3つの方法コピペだけでかわいいアイコンが簡単に使える、アイコンフォントを使ってみよう。疑似要素:before、:afterを使って使いまわせる便利なオシャレデザインを作りましょう。次の投稿CSSで番号付きリストを好きなフォーマットで表示させる方法まずはご相談から、ホームページを作るのがはじめての方も気軽にお問い合わせ下さい。無料お見積りAIチャットで質問AIチャットでご質問くださいホームページの制作について聞きたいことはありませんか。AIがあなたの質問にお答えします。下のフォームに質問文を入れて聞いてみてください。|関東の方もホームページの制作を対応いたします。reserved.ホームページ制作YCOMトップホームページに必要な費用ホームページ制作料金ホームページ制作の流れオリジナルホームページホームページ制作実績ホームページ活用事例お客様の声よくある質問お問い合わせホームページの制作見積り依頼パートナー募集フォーム。