cssで縦書き、縦スクロール、段組みへの道4(column-count)

前書き

cssで縦書き、縦スクロール、段組みを実装出来るかどうか、試みています。

目次

  1. 試み
  2. HTML/CSS/JS
  3. 見本
  4. その他の方法

試み

方法

  • 縦書きを指定する( writing-mode: vertical-rl )
  • 段組み用のcssを指定する( column-count )

参考

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

結果

column-countを指定すれば、勝手に段組みしてくれるが、段落数と高さを上手く指定しないと、はみ出たり、隙間が出来てしまう。
レスポンシブに対応する為に、javascriptで段落数と高さを調整した。

HTML/CSS/JS


<div class="tategaki04">
  <div class="inner" data-adjust="inner">
    <div class="text_block" data-adjust="block">
      <p>
        <ruby>漢字<rt>ふりがな</rt></ruby>ひらがな
      </p>
      <p>
        <ruby>漢字<rt>ふりがな</rt></ruby>ひらがな<br>
        <ruby>漢字<rt>ふりがな</rt></ruby>ひらがな
      </p>
    </div>
  </div>
</div>

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

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

const block = document.querySelector('[data-adjust="block"]');
const inner = document.querySelector('[data-adjust="inner"]');

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

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

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

見本

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

ながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんです

ながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんです

ながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんです

さらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんです

その他の方法

スクロールで表示させる

javascriptを使わずに、cssに下記を追加している


.tategaki04 .inner{
  /* 前略 */
  column-width: 75vh;
  overflow-y: auto;
}

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

ながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんです

ながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんです

ながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんですながぶんです

さらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんですさらにながぶんです

関連記事

実語教(じつごきょう)を素読する

cssで縦書き、縦スクロール、段組みへの道3(overflow)

cssで縦書き、縦スクロール、段組みへの道2(flexbox)

cssで縦書き、縦スクロール、段組みへの道1(direction)

先頭に戻る
ページの先頭に戻る