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">
    <div class="text_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: "vpal";
  width: 100%;
  overflow: hidden;
  column-rule-style: solid;
  column-rule-width: 1px;
  column-rule-color: #a675a5;
  column-gap: 40px;
  column-fill:auto;
}

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

$(function(){
  $('.text_block').css('max-height', window.innerHeight*0.75);
});

$(window).on("load",function(){
  const blockW = $('.text_block').get(0).offsetWidth; //1段の横幅
  const blockH = $('.text_block').get(0).offsetHeight; //1段の高さ(横長の時に使う)
  const innerW = $('.inner').get(0).offsetWidth; //表示する横幅
  const windowH = window.innerHeight*0.75; //1段の高さ(縦長の時に使う)
  let cc = 0;
  let h = 0;

  if(blockW > blockH){
    //横長であれば(横にはみ出ていれば)
    cc = Math.ceil(blockW/innerW); //何段に分けたら収まるか
    h = (blockH + 40)* cc; //(1段の高さA + column-gap)× 段数
  }else{
    //縦長であれば(縦にはみ出ていれば)
    cc = Math.ceil(blockH/windowH); //何段に分けたら収まるか
    h = windowH * cc; // 1段の高さB × 段数
  }
  $('.inner').height(h); //表示する高さ
  $('.inner').css('column-count', cc); //段数を指定する
});

見本

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

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

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

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

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

その他の方法

スクロールで表示させる

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


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

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

みじかぶんです。

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

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

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

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

関連記事

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

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

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

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

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