縦組み段組みテキストフロー自動化スクリプト
概要
- このホームページの「labo」「radio」「profile」コンテンツで実行している、縦組みで段組みをするときに、文字量の増減に左右されずに段組み数を整えレイアウトする効果を、他サイトでも使えるようにJavascriptファイル化したものです。
用途と効果
- スタイルシートの技術仕様では、段幅（１段の行長:column-width）と段間（段どうしの距離:column-gap）を指定していれば、特別なスクリプトを使わなくても、段組表示は出来るのですが、テキスト量が多くなり予想以上に段数が増えると、段組みの下に続くフッタなどの要素が、段組みに重なって表示してしまう場合があります。このスクリプトは、それを避けて段組全体のトータルの高さ（height）を動的に指定することにより、レイアウトをくずさずに表示させるためのものです。詳細説明サンプル
- スマホ、タブレット、ＰＣなど、様々な画面サイズのときにレイアウトを変化させるレスポンシブデザインのときに、段のサイズが変わり１段におさまるテキストの量が変わることによってトータルの段数が変わる場合、テキスト量に合わせた段数でレイアウトして表示させます。
- 縦組みのブログなどのように、同じレイアウトを使いつつ、投稿ごとにテキストの量が変わるようなときに、全体のレイアウトをくずさずに表示することを目指しています。
前提条件
- このスクリプトの使用については、HTML, CSS, Javascriptなどの、WEBページデザインの技術的な知識がある人を対象にしています。
- とくにCSSについて、このスクリプトは「縦組み」に関わるすべてのスタイルをまかせるものではないので、縦組みのスタイル指定の知識が必要です。
- 効果を与える要素内は、縦組みであり文字量が増えた場合に段組みとなるケースだけを想定しています（CSSで縦組み指定 writing-mode: vertical-rl; がしてあること）。横組み（縦組み指定がない）では、動きません。
- CSSでの縦組み指定については、ブラウザにより挙動が異なる場合がありますので、ベンダープリフィクスなどによる補正を行なってください。このスクリプトは、「縦組みでの『段組み』」についての動作にかかわるものであり、段内に入る縦組みスタイルのブラウザごとの対応の違いを調整補完するものではありません。CSSでの縦組み表示スタイルは、各自で対応状況を確認してください。ブラウザーの互換性（mdnサイト）
- このスクリプトは、Javascriptで書いています。また、Javascriptでの操作を簡略化するライブラリ「Jquery」を参照するかたちでブラウザ表示を操作していますので、別途、Jqueryが必要になります。スクリプト制作では、jquery-3.5.1.js を使用しています。Jqueryサイト
ダウンロード
- tategumi_dangumi12.js（2023.01.03） フォルダ「tdscript-12」に入れてzip圧縮しています。
- jquery-3.6.3.js 最新版ダウンロードページ
＊ ＊ ＊
使用方法
- ①Jqueryの設置とリンク
あらかじめ、HTMLページにJqueryがリンクされていること。（<head>部を推奨）
・・・
<head>
・・・
<script type="text/javascript" src="・・・/jquery-3.5.1.js"></script>
・・・
</head>
・・・ - ②スクリプトファイルの設置とリンク
tategumi_dangumi12.jsをダウンロードし、
WEBページを設置しているサーバー内の任意の場所にアプロードしファイルを設置、
HTMLページに、スクリプトをリンクさせる。
HTMLの最後のほう、jqueryや適用させたい要素よりもうしろにリンクタグを記述する。（footer部推奨）・・・
<script type="text/javascript" src="・・・/tategumi_dangumi12.js"></script>
・・・ - ③スクリプトの適用
HTMLページの、このスクリプトを動作させたい要素<div>にclass「dangumi」を追加する。
すでにスタイル指定用のclass（default_text_styleなど）が設定されている場合は、半角スペースのあとに続けてdangumiを追加する。
・・・同一ページ内で複数箇所に指定が可能です。
<div class="default_text_style dangumi">・・・縦組みで段組み対応させたいテキスト・・・</div>
・・・ - ④スタイルシートの編集
dangumi、hcenter、tategumi_dangumi という語句をスクリプト内で使っていますので、このスクリプトに関わるclass指定以外でこの語句をclass名に使用しないでください。
前述したように、スクリプトを適用する要素に文字組みデザインスタイルを指定する場合は、
<div class="dangumi default_text_style">というように、デザイン指定用のスタイル（default_text_style）のクラス名を半角スペースではさんで並記して指定してください。スタイルシートの仕様上、親要素のスタイルが子要素に反映されますので、該当要素に直接スタイルを指定しなくても、親要素（上位要素）に文字組みスタイルを指定してあっても問題ありません。
段組みスタイル以外の、テキストの文字組みデザイン（書体名:font-family、文字サイズ:font-size、行送り:line-height、文字送り:letter-spacing、太字:font-weight...）についてのスタイル指定は、従来通りで制約は、ありません。
- ⑤スタイルシートの編集：段組関連のスタイル指定
【初期値のテキスト量が１段分でおさまっていて段組設定をする必要がないとき】
column-gap
（段間:段どうしの間隔）２段以上になったときを想定して、あらかじめ指定しておいてください（px単位）
指定がないときは、本文３文字分（文字送りを含む）のサイズで自動的に段間設定されるようにしてあります。column-count
（段数）無指定でかまいません column-width
（段の幅:１段分の行長）無指定でかまいません、
２段以上になったとき、１段だけのときの要素の高さ[height]（行長）が段の幅に指定されます。【最初からテキスト量が２段以上の段組になっているとき】
column-gap
（段間:段どうしの間隔）初期表示に必要なので、あらかじめ指定しておいてください（px単位） column-count
（段数）column-width
（段の幅:１段分の行長）【そのほかの段組み関係のスタイル】
column-rule
column-rule-color
column-rule-style
column-rule-width段数の増減に影響しないので、指定してあってもなくてもかまいません。 column-fill column-span - ⑥スタイルシートの編集：ターゲット要素の表示[opacity]
スクリプトの処理中は、閲覧者に見えないように非表示にして行なっています。
ページ読み込みこのため、ページが読み込まれた最初の時点では、段数指定がされていない状態のターゲット要素が見えてしまっていることになります。
⇓
スクリプト処理前：ターゲット要素を親要素ごと非表示にする（opacity:0; transition:0.5s;）
⇓
スクリプト処理中（段数割り出し〜段組レイアウト指定）
⇓
スクリプト処理終了後：ターゲット要素の親要素を表示する（opacity:1;）
ページが読み込まれる最初からターゲット要素を見せたくない場合は、ターゲット要素の親要素にあらかじめ非表示指定（opacity:0;）をしておいてください。
※非表示指定は、display:none;でなく、opacity:0;で指定してください。display:none;で非表示にするとJavascriptが要素のサイズを取得できないため、スクリプトが正常に動作しません。 - ⑦スクリプト動作の微調整：tategumi_dangumi12.jsファイル内の設定
tategumi_dangumi12.jsファイルの19行目に、
var delayMsecond = 300;という記述があります。
これは、ページを読み込んだときにスクリプトが動き出すタイミングを遅らせるための設定（ミリ秒）です。
すでにページ読み込み時に動いているスクリプトがあり、動作が同じタイミングでぶつかって不具合を生じるような場合は、この数字を変更しスクリプトの起動を遅くすることで問題回避を試してみてください。 -
⑧オプション：横位置センター揃え
ターゲット要素について、表示される幅によっては、行数が半端で偏った配置に見えてしまう場合に、それを補正して横位置センター揃えにしたいときには、HTML上のクラス指定にさらにhcenterを追加する。
・・・
<div class="default_text_style dangumi hcenter">・・・ターゲットテキスト・・・</div>
・・・
親要素に対して、段組みを横位置センター配置にするための補正効果について 解説サンプル
＊ ＊ ＊
制作環境
| ＰＣ | Apple iMac (27-inch, Late 2013) + macOS High Sierra (10.13.6) | ||||||
| アプリケーション | mi 3.6 (text editor), Google Chrome 105 (main browser) | ||||||
| ローカルサーバ | MAMP 6.3 | ||||||
| グローバルサーバ | さくらインターネット レンタルサーバ | ||||||
| 動作確認済み |
|
||||||
利用規定
- 利用規定は、予告なく変更する場合があります。
- このスクリプトは、開発途中のものです。使用環境によっては、こちらで予測出来ていない不具合が発生する場合があるかもしれません。余裕のある範囲で対応できればと思ってはいますが、基本的にそういった場合は、スクリプトの使用をお勧めしません。また、スクリプトの構造などでお気づき点がありましたら、お気軽にアドバイスいただけると、嬉しく思っております。
| 免責事項 | 当サイトでは、配布しているスクリプトによる損害・被害の一切の責任を負いません。 |
| 利用範囲 | 法律や条例などに反しない利用方法、サイトであればご自由にお使いください。 |
| 著作権について | 配布しているスクリプトは著作権フリーです。改造・再配布してもかまいませんが、こちらでの責任は負いかねます。 |