アイコンつきリスト<li>タグ

もくじ

• 表示例
• HTMLコード
• CSSコード

表示例

• 表示テスト(矢印01)
• 表示テスト(矢印02)
• 表示テスト(矢印03)
• 表示テスト(矢印04)
• 表示テスト(矢印05)
• 表示テスト(画像)
• 表示テスト(地図)
• 表示テスト(注釈)
• 表示テスト(チェック)

HTMLコード

• • <ul>
  • <li class="icon no01">表示テスト(矢印01)</li>
  • <li class="icon no02">表示テスト(矢印02)</li>
  • <li class="icon no03">表示テスト(矢印03)</li>
  • <li class="icon no04">表示テスト(矢印04)</li>
  • <li class="icon no05">表示テスト(矢印05)</li>
  • <li class="icon no06">表示テスト(画像)</li>
  • <li class="icon no07">表示テスト(地図)</li>
  • <li class="icon no08">表示テスト(注釈)</li>
  • <li class="icon no09">表示テスト(チェック)</li>
  • </ul>

CSSコード

• • ul{
  • /*余白リセット*/margin:0;padding:0;list-style:none;
  • }
  • li.icon{
  • /*改行後の文字の位置*/margin-left:1em;text-indent:-1.06em;
  • }
  • li.icon::before{
  • /*長さ*/width:8px;height:8px;
  • /*余白*/margin:0 8px 2px 2px;
  • /*---以下はそのまま---*/
  • content:"";display:inline-block;background-size:contain;
  • }
  • li.icon.no01::before{/*画像*/background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABFSURBVChTY0AD/6E0TsAIpUEAWTGyOApAlyCoCZsgXk24rMapCZcGEMCqiQlKEw2o4iSSPI1XMQggCxJUjA0ga8ICGBgACd0LCqbV2YIAAAAASUVORK5CYII=");}
  • li.icon.no02::before{/*画像*/background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABISURBVChTjdE7EgAgCEPB6P3vrBOHQjR8XpOGrcDTsg2btncpUoCFKAJMogywD1WAOdQBrg4YtqcKuGOWge+YRUAeq9IvA8AGgYwHEkwLLPcAAAAASUVORK5CYII=");}
  • li.icon.no03::before{/*画像*/background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABPSURBVChTY8AD/kNpFMAEpXEBDE14NXBxcYEoFE2MUBobQDcdrBZEYHUrDsBIqgaCnsYApGoAOwkXwOppYm2AG0yMBnyuQABgpGEJPQYGAGraCEtCZEZIAAAAAElFTkSuQmCC");}
  • li.icon.no04::before{/*画像*/background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABISURBVChTtc9RCgAgCERB6/53LhMXMky2jwYkCB+UqOFDaTrn8rq7ygJIwyqAEDIBWPgSmO4n7cuTbBGqICxCFqSLuxWQ/xCZEr4NByArCAcAAAAASUVORK5CYII=");}
  • li.icon.no05::before{/*画像*/background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABHSURBVChTY2RgYPgPxDAA4uMFTFCaaEB1DcjOBQNibEDRRKyT4JrQQ4kQYCRVAzzcidUEtgEfQDYIrJZYTxMyGA7QnMrAAADcLwkOnVf3HQAAAABJRU5ErkJggg==");}
  • li.icon.no06::before{/*画像*/background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAB1SURBVChTY2SAgP9QmhBgBGn4v/PZBwiXAHCXEmBggrJxAhMzEzCGAbwakBXC2ARtQAcoGjJPx4AxDJw5dQbKQrDhnkZWCALTTZdAWQgA9zSy4smmF8E0ugEwgOGH3NP6eDVh9TQ+TThDCaQJBpA1kZg0GBgBfs0oPw963JoAAAAASUVORK5CYII=");}
  • li.icon.no07::before{/*画像*/background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABZSURBVChTY2RAA29lVP5DmWAg/OQOihoUDrpiGEDWBGcgK4YpwCbGBOYhAWTT0J0DAhgaCAEMDcjOwOYnFCuJ8TTJTsLwFLot6B4n2QasAGQLLv+QaAMDAwDdTSRqE/vPKQAAAABJRU5ErkJggg==");}
  • li.icon.no08::before{/*画像*/background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABnSURBVChTlY8xDsAgDAMDX+jasf9/UceufUMrRwRZlhm4ARI7JCTAe15fBgPkTsPdK9AChmsaC+B47tQK9abpHjlt2Y3hqa2KXFegesexw/6Xxm0XdNrSKNSbSwPt7CYlKiB3WkTEDwZBVnWwrb2LAAAAAElFTkSuQmCC");}
  • li.icon.no09::before{/*画像*/background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABdSURBVChTzZBBDsAgCASpF/7/Jh6m7haIbUrrsZMouhkwUX5Fx3bw+A1lsNOQMmheKyirKi+TfOAyxUHWp8zKxIlgDXl/kkGEXGbGWslBNmC9yesv3YWtLy8nn4gMRTojmYw0DEcAAAAASUVORK5CYII=");}