アイコンフォント(Font Awesome 等) を使ったリストマーカーをリスト要素のみで実装する

18834 ワード
HTML CSS レスポンシブ font HTML テキストリンク

i タグを使いたくないときの書き方。
サンプルは Font Awesome 5 を使用。

描画

コード

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

    <style>
      body {
        margin: 0;
      }
      .container {
        width: 360px;
        border: 1px solid gray;
        margin: 0 auto;
      }
      hr {
        border-width: 2px;
      }
      a {
        outline: 1px solid gray;
      }
      a:hover {
        background-color: yellow;
      }

      .sample1 {
        list-style: none;
        padding-left: 0;
      }
      .sample1 li:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f138";
        margin-right: .3em;
      }

      .sample2 {
        list-style: none;
        padding-left: 0;
      }
      .sample2 li {
        margin-left: 1.3rem; /* 追加 */
        text-indent: -1.3em; /* 追加 */
      }
      .sample2 li:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f138";
        margin-right: .3em;
      }
      .sample2 li {
        margin-left: 1.3rem;
        text-indent: -1.3em;
      }

      .sample2b {
        list-style: none;
        padding-left: 0;
      }
      .sample2b li:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f138";
        margin-right: .3em;
        margin-left: 1.3rem;
        text-indent: -1.3em;
      }
      .sample2b li a {
        display: block; /* 追加 */
      }

      .sample2c {
        list-style: none;
        padding-left: 0;
      }
      .sample2c li {
        margin-left: 1.3rem;
        text-indent: -1.3em;
      }
      .sample2c li a:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f138";
        margin-right: .3em;
        margin-left: 1.3rem;
        text-indent: -1.3em;
      }
      .sample2c li a {
        display: block; /* 追加 */
      }

      .sample3 {
        list-style: none;
        padding-left: 0;
      }
      .sample3 li {
        position: relative;
      }
      .sample3 li:before {
        position: absolute;
        top: .25em;
        left: 1rem; /* 左余白 */
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f138";
      }
      .sample3 li a {
        display: block;
        padding-left: 2.3rem; /* 左余白 1rem をプラス */
      }

      .sample3b {
        list-style: none;
        padding-left: 0;
      }
      .sample3b li {
        position: relative;
      }
      .sample3b li a {padding-left: 1.3rem;
        display: block;
        padding-left: 2.3rem; /* 左余白 1rem をプラス */
      }
      .sample3b li a:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f138";
      }

    </style>
  </head>


  <body>

  <div class="container">

    <h2>sample 1</h2>
    <p>改行が入ると2行目以降がリストマーカーの頭と揃い格好悪い</p>
    <ul class="sample1">
      <li><a href="#">りんご</a></li>
      <li><a href="#">ばなな</a></li>
      <li><a href="#">長くて改行が<br>入った場合</a></li>
    </ul>

    <hr>

    <h2>sample 2</h2>
    <p>text-indent と マイナス左マージンで調整。幅いっぱい表示しないならこれでいい</p>
    <ul class="sample2">
      <li><a href="#">りんご</a></li>
      <li><a href="#">ばなな</a></li>
      <li><a href="#">長くて改行が<br>入った場合</a></li>
    </ul>

    <hr>

    <h2>sample 2b</h2>
    <p>スマホ表示でまず必要となる幅いっぱい表示。before 疑似要素は a 要素の内側でなく前に生成されるため、a 要素を "display: block;" でブロック要素にしてもうまくいかない</p>
    <ul class="sample2b">
      <li><a href="#">りんご</a></li>
      <li><a href="#">ばなな</a></li>
      <li><a href="#">長くて改行が<br>入った場合</a></li>
    </ul>

    <hr>

    <h2>失敗例：sample 2b</h2>
    <p>スマホ表示でまず必要となる幅いっぱい表示。before 疑似要素は a 要素の内側でなく前に生成されるため、a 要素を "display: block;" でブロック要素にしてもうまくいかない</p>
    <ul class="sample2b">
      <li><a href="#">りんご</a></li>
      <li><a href="#">ばなな</a></li>
      <li><a href="#">長くて改行が<br>入った場合</a></li>
    </ul>

    <hr>

    <h2>sample 3</h2>
    <p>a 要素を幅いっぱいに。Font Awesome アイコンを使ったリストマーカーを絶対配置で置く</p>
    <ul class="sample3">
      <li><a href="#">りんご</a></li>
      <li><a href="#">ばなな</a></li>
      <li><a href="#">長くて改行が<br>入った場合</a></li>
    </ul>

    <h2>失敗例：sample 3b</h2>
    <p>li でなく a 要素の before 疑似要素にすると、before 疑似要素が a 要素内に位置するため、 "text-decoration: none;" を指定してもリンク線が付いてしまう。</p>
    <ul class="sample3b">
      <li><a href="#">りんご</a></li>
      <li><a href="#">ばなな</a></li>
      <li><a href="#">長くて改行が<br>入った場合</a></li>
    </ul>

  </div>


  </body>
</html>