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;
}
元記事を表示する