bugfix> html > 投稿

丸いバッジを作成して数字を表示する方法はありますか?丸いバッジと数字はフォントサイズに反応しますか?

私は試した:

<input type="range" min="30" max="100" value="30" onchange="document.getElementById('d').style.fontSize=this.value+'px';"><br/>
<div id="d" style="position:relative;display:inline-block;font-size:30px;">
  <div style="position:relative;color:red;zoom:400%;">&#9679;</div>
  <div style="position:absolute;width:100%;height:100%;top:0px;left:0px;">
    <table style="position:absolute;width:100%;height:100%;top:0px;left:0px;text-align:center;font-size:inherit;">
      <tr><td>10</td></tr>
    </table>
  </div>
</div>

スライダーは親divのフォントサイズを更新するため、バッジと番号のサイズも更新されます。それは私が望むものと非常に似ていますが、問題があります:マージンとパディングをどのように設定しても、テキストは常に少し上にシフトします。視覚的位置の問題を修正する方法はありますか?または、数字を中央に配置したこのようなレスポンシブラウンドバッジを作成する同様の方法はありますか?

回答 3 件
  • 中央の円の場合、この中央の弾丸 &#8226; を使用します  黒丸 &#9679; の代わりに

  • フレックスボックスを使用できます。物事を調整するのに最適です:

    .badge {
      font-size: 48px;
      display: flex;
      align-content: center;
      text-align: center;
    }
    .badge p {
      font-size: 1em;
      background: red;
      color: white;
      border-radius: 50%;
      height: 2em;
      width: 2em;
      line-height: 2em;
    }
    
    
    <div class="badge">
    <p>
    1
    </p>
    </div>
    <input type="range" min="30" max="100" value="30" onchange="document.querySelector('.badge').style.fontSize=this.value+'px';"><br/>
    
    

  • マークアップを少し簡略化し、カスタムプロパティを使用してfont-sizeと赤い丸の両方のサイズを変更できます。

    Codepen demo


    マークアップ

    <input type="range" min="30" max="100" value="30" aria-controls="d">
    <div id="d">
      <span>10</span>
    </div>
    
    

    CSS

    :root { --size: 30px; }
    #d { 
      font-size: var(--size);
      margin: 20px 0 0 0;
    }
    #d span {
      font-family: Arial;
      padding: 10px;
      height: var(--size);
      width: var(--size);
      border-radius: 50%;
      background-color: red; }
    
    

    Javascript

    var ctrl = document.querySelector('[aria-controls]');
    var dde = document.documentElement;
    ctrl.addEventListener('change',  function() {
       dde.style.setProperty('--size', this.value + 'px');
    });
    
    

あなたの答え