縦書きで段組みする（HTML/CSS）

2020.9.25公開（2023.4.22更新）
@HTMLコーディング
#縦書き

前書き

縦書きで段組みする方法を掲載しています。

段落数と高さを文字数に合わせて調整する

縦書きにする

writing-mode: vertical-rl;

文字数に合わせて段組みする

段落数（column-count）と高さ（height）をJavaScriptで調整する。

段組みを使って縦書きの文章をレスポンシブ対応させる方法


<div class="wrap" data-tategaki="wrap">
  <div class="block" data-tategaki="block">
    <p class="ttl"><ruby>大祓詞<rt>おほはらへのことば</rt></ruby></p>
    <p class="text"><ruby>高天原<rt>たかまのはら</rt></ruby>に・・・</p>
  </div>
</div>


.wrap{
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-feature-settings: "vpal";
  width: 100%;
  overflow: hidden;
  line-height: 3;
  column-rule-style: solid;
  column-rule-width: 1px;
  column-rule-color: #a675a5;
  column-gap: 40px;
  column-fill:auto;
}
.block{
  max-height: 75vh;
}


// column-countを指定した要素の幅は、ブラウザによって異なる
// chrome　→　横長
// firefox →　縦長

const wrap = document.querySelector('[data-tategaki="wrap"]');
const block = document.querySelector('[data-tategaki="block"]');

const heightAdjust = () => {
  if( block ){
    const blockW = block.offsetWidth; //1段の横幅
    const blockH = block.offsetHeight; //1段の高さ
    const wrapW = wrap.offsetWidth; //表示場所の横幅
    const windowH = Math.ceil( window.innerHeight * 0.75 ); //表示場所の高さ(max-height:75vhを指定している為)
    let cc = "auto"; //はみ出てなければ
    let h = windowH; //〃

    if( blockW > wrapW ){ //横にはみ出ていれば
      cc = Math.ceil( blockW / wrapW ); //何段に分けたら収まるか
      h = ( blockH + 40 ) * cc; //（ 1段の高さ + column-gap ）× 段数
    }else if( blockH > windowH ){ //縦にはみ出ていれば
      cc = Math.ceil( blockH / windowH ); //何段に分けたら収まるか
      h = windowH * cc; // 1段の高さ × 段数
    }
    wrap.style.columnCount = cc; //段数
    wrap.style.height = h + "px"; //表示場所の高さ
  }
}

document.addEventListener('DOMContentLoaded', () => {
  heightAdjust();
});

見本

大祓詞おほはらへのことば

高天原たかまのはらに神留かむづまり坐ます皇すめらが親むつ神漏岐かむろぎ神漏美かむろみの命みこと以もちて八百萬やほよろづの神等かみたちを神かむ集つどへに集つどへ賜たまひ神かむ議はかりに議はかり賜たまひて我あが皇御孫命すめみまのみことは豐葦原水穗國とよあしはらのみづほのくにを安國やすくにと平たひらけく知しろし食めせと事こと依よさし奉まつりき此かく依よさし奉まつりし國内くぬちに荒振あらぶる神等かみたちをば神かむ問とはしに問とはし賜たまひ神かむ掃はらひに掃はらひ賜たまひて語問こととひし磐根いはね樹根立きねたち草くさの片葉かきはをも語止ことやめて天あめの磐座いわくら放はなち天あめの八重雲やへぐもを伊頭いづの千別ちわきに千別ちわきて天降あまくだし依よさし奉まつりき此かく依よさし奉まつりし四方よもの國中くになかと大倭日高見國おほやまとひだかみのくにを安國やすくにと定さだめ奉まつりて下したつ磐根いはねに宮柱みやばしら太敷ふとしき立たて高天たかまの原はらに千木ちぎ高知たかしりて皇御孫すめみまの命みことの瑞みづの御殿仕みあらかつかへ奉まつりて天あめの御陰みかげ日ひの御陰みかげと隱かくり坐まして安國やすくにと平たひらけく知しろし食めさむ國内くぬちに成なり出いでむ天あめの益人等ますひとらが過あやまち犯をかしけむ種種くさぐさの罪事つみごとは天あまつ罪つみ國くにつ罪つみ許許太久ここだくの罪つみ出いでむ此かく出いでば天あまつ宮事みやごと以もちて天あまつ金木かなぎを本もと打うち切きり末すゑ打うち斷たちて千座ちくらの置座おきくらに置おき足たらはして天あまつ菅麻すがそを本刈もとかり斷たち末刈すゑかり切きりて八針やはりに取とり辟さきて天あまつ祝詞のりとの太祝詞事ふとのりとごとを宣のれ
此かく宣のらば天あまつ神かみは天あめの磐門いはとを押おし披ひらきて天あめの八重雲やへぐもを伊頭いづの千別ちわきに千別ちわきて聞きこし食めさむ國くにつ神かみは高山たかやまの末すゑ短山ひきやまの末すゑに上のぼり坐まして高山たかやまの伊襃理いぼり短山ひきやまの伊襃理いぼりを掻かき別わけて聞きこし食めさむ此かく聞きこし食めしてば罪つみと云いふ罪つみは在あらじと科戸しなどの風かぜの天あめの八重雲やへぐもを吹ふき放はなつ事ことの如ごとく朝あしたの御霧みぎりタゆふべの御霧みぎりを朝風あさかぜタ風ゆふかぜの吹ふき拂はらふ事ことの如ごとく大津邊おほつべに居をる大船おほぶねを舳へ解とき放はなち艦とも解とき放はなちて大海原おほうなばらに押おし放はなつ事ことの如ごとく彼方をちかたの繁木しげきが本もとを燒鐮やきがまの敏鐮とがま以もちて打うち掃はらふ事ことの如ごとく遺のこる罪つみは在あらじと祓はらへ給たまひ淸きよめ給たまふ事ことを高山たかやまの末すゑ短山ひきやまの末すゑより佐久那太理さくなだりに落おち多岐たぎつ速川はやかはの瀨せに坐ます瀨織津比賣せおりつひめと云いふ神かみ大海原おほうなばらに持もち出いでなむ此かく持もち出いで往いなば荒潮あらしほの潮しほの八百道やほぢの八潮道やしほぢの潮しほの八百會やほあひに坐ます速開都比賣はやあきつひめと云いふ神かみ持もち加加かか呑のみてむ此かく加加かか呑のみてば氣吹戸いぶきどに坐ます氣吹戸主いぶきどぬしと云いふ神かみ根國ねのくに底國そこのくにに息吹いぶき放はなちてむ此かく氣吹いぶき放はなちてば根國ねのくに底國そこのくにに坐ます速佐須良比賣はやさすらひめと云いふ神かみ持もち佐須良さすらひ失うしなひてむ此かく佐須良さすらひ失うしなひてば罪つみと云いふ罪つみは在あらじと祓はらへ給たまひ淸きよめ給たまふ事ことを天あまつ神かみ國くにつ神かみ八百萬神等やほよろづのかみたち共ともに聞きこし食めせと白まをす

overflow-y: auto を指定する方法

縦書きにする

writing-mode: vertical-rl;

段落の高さを指定して、下側にはみ出ないようにする

column-width: 75vh;
overflow-y: auto;


.wrap{
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-feature-settings: "vpal";
  width: 100%;
  height: 75vh;
  overflow-y: auto;
  line-height: 3;
  column-rule-style: solid;
  column-rule-width: 1px;
  column-rule-color: #a675a5;
  column-gap: 40px;
  column-fill:auto;
  column-width: 75vh;
}