パーツ番号 02-12-12 ・ JavaScript使用

クリックで縦書き⇔横書き切替ボタン付きテキスト

ボタンを押すたびにテキストの書字方向が縦書きと横書きの間で切り替わります。多言語対応サイトや和洋を使い分けたい見出しで、ユーザー自身に表示形式を選ばせたいときに使えます。

clickjs

プレビュー

ソースコード

HTML

<div class="d02-12-12-wrap">
          <p class="d02-12-12-text">つながる未来へ</p>
          <button type="button" class="d02-12-12-btn">縦書き/横書き切替</button>
        </div>

CSS

.prev.d02-12-12{ background:#fff; }
        .d02-12-12 .d02-12-12-wrap{
          display:flex;
          flex-direction:column;
          align-items:center;
          gap:14px;
        }
        .d02-12-12 .d02-12-12-text{
          margin:0;
          font-size:19px;
          font-weight:700;
          letter-spacing:.12em;
          color:#1a2333;
          min-height:1.6em;
          display:flex;
          align-items:center;
          justify-content:center;
        }
        .d02-12-12 .d02-12-12-text.is-vertical{
          writing-mode:vertical-rl;
          text-orientation:upright;
          min-height:140px;
        }
        .d02-12-12 .d02-12-12-btn{
          padding:8px 16px;
          font-size:11px;
          font-weight:700;
          color:#fff;
          background:#4338ca;
          border:none;
          border-radius:99px;
          cursor:pointer;
        }

JavaScript

(function(){
        var root=document.getElementById('item-02-12-12');if(!root)return;
        var text=root.querySelector('.d02-12-12-text');
        var btn=root.querySelector('.d02-12-12-btn');
        btn.addEventListener('click',function(){
          text.classList.toggle('is-vertical');
        });
      })();

クラス名 .d02-12-12 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。