rubyタグとuser-selectを使用したサンプル

(あだち)
足立
(しんや)
信也
<div class="name">
  <div class="l_name">
    <ruby>
      <div class="r_name">
        <rp>(</rp><rt>あだち</rt><rp>)</rp>
      </div>
      <div class="b_name">足立</div>
    </ruby>
  </div>
  <div class="f_name">
    <ruby>
      <div class="r_name">
        <rp>(</rp><rt>しんや</rt><rp>)</rp>
      </div>
      <div class="b_name">信也</div>
    </ruby>
  </div>
</div>
.name {
  display: flex;
}

.name rt {
  display: block;
  font-size: 16px;
  -webkit-user-select: none;
  user-select: none;
}

.name rp {
  display: none;
}

.r_name {
  width: fit-content;
  margin: 0 auto 8px;
  letter-spacing: 4px;
}

.b_name {
  font-size: 48px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 3px;
}

.l_name {
  margin-right: 8px;
}

元記事を表示する