段組み式縦書き記事の書き方 ～ レスポンシブ

【使い方】
①全文を<div class="dangumi"></div>で囲む
②改行する箇所に</div><div class="dangumi">を挿入する
③widthの値をいろいろと書き換えてみる
<style> #tategakiResponsiveDisplay {width: 100% ;} /*🔴いろいろと書き換えてみる🔴*/ </style> <div class="dangumi"> 　<span style="font-size:18px;">ツェねずみ</span></div><div class="dangumi"> 　　　　　　　　　　　　　　　　　　　　　　　　　宮沢賢治</div><div class="dangumi"> </div><div class="dangumi"> 　ある古い家の、まっくらな天井裏に、「ツェ」という名まえのね</div><div class="dangumi"> ずみがすんでいました。</div><div class="dangumi"> 　ある日ツェねずみは、きょろきょろ四方を見まわしながら、床下</div><div class="dangumi"> 街道を歩いていますと、向こうからいたちが、何かいいものをたく</div><div class="dangumi"> さんもって、風のように走って参りました。そしてツェねずみを見</div><div class="dangumi"> て、ちょっとたちどまって早口に言いました。</div><div class="dangumi"> 「おい、ツェねずみ。お前んとこの戸棚の穴から、金米糖がばらば</div><div class="dangumi"> らこぼれているぜ。早く行ってひろいな。」</div><div class="dangumi"> 　ツェねずみは、もうひげもぴくぴくするくらいよろこんで、いた</div><div class="dangumi"> ちにはお礼も言わずに、いっさんにそっちへ走って行きました。と</div><div class="dangumi"> ころが戸棚の下まで来たとき、いきなり足がチクリとしました。そ</div><div class="dangumi"> して、「止まれ、だれかっ。」と言う小さな鋭い声がします。</div><div class="dangumi"> 　ツェねずみはびっくりしてよく見ますと、それは蟻でした。蟻の</div><div class="dangumi"> 兵隊は、もう金米糖のまわりに四重の非常線を張って、みんな黒い</div><div class="dangumi"> まさかりをふりかざしています。二三十匹は金米糖を片っぱしから</div><div class="dangumi"> 砕いたり、とかしたりして、巣へはこぶしたくです。ツェねずみは</div><div class="dangumi"> ぶるぶるふるえてしまいました。</div><div class="dangumi"> 「ここから内へはいってならん。早く帰れ。帰れ、帰れ。」蟻の特</div><div class="dangumi"> 務曹長が、低い太い声で言いました。</div><div class="dangumi"> 　ねずみはくるっと一つまわって、いちもくさんに天井裏へかけあ</div><div class="dangumi"> がりました。そして巣の中へはいって、しばらくねころんでいまし</div><div class="dangumi"> たが、どうもおもしろくなくて、おもしろくなくて、たまりませ</div><div class="dangumi"> ん。蟻はまあ兵隊だし、強いからしかたもないが、あのおとなしい</div><div class="dangumi"> いたちめに教えられて、戸棚の下まで走って行って蟻の曹長にけん</div><div class="dangumi"> つくを食うとは、なんたるしゃくにさわることだとツェねずみは考</div><div class="dangumi"> えました。そこでねずみは巣からまたちょろちょろはい出して、木</div><div class="dangumi"> 小屋の奥のいたちの家にやって参りました。</div><div class="dangumi"> 　いたちはちょうど、とうもろこしのつぶを、歯でこつこつかんで</div><div class="dangumi"> 粉にしていましたが、ツェねずみを見て言いました。</div><div class="dangumi"> 「どうだ。金米糖がなかったかい。」</div><div class="dangumi"> 「いたちさん。ずいぶんお前もひどい人だね。私のような弱いもの</div><div class="dangumi"> をだますなんて。」</div><div class="dangumi"> 「だましゃせん。たしかにあったのや。」</div><div class="dangumi"> 「あるにはあっても、もう蟻が来てましたよ。」</div><div class="dangumi"> 「蟻が、へい。そうかい。早いやつらだね。」</div><div class="dangumi"> 「みんな蟻がとってしまいましたよ。私のような弱いものをだます</div><div class="dangumi"> なんて、償うてください。償うてください。」</div><div class="dangumi"> 「それはしかたない。お前の行きようが少しおそかったのや。」</div><div class="dangumi"> 「知らん、知らん。私のような弱いものをだまして。償うてくださ</div><div class="dangumi"> い。償うてください。」</div><div class="dangumi"> 「困ったやつだな。ひとの親切をさかさまにうらむとは。よしよ</div><div class="dangumi"> し。そんならおれの金米糖をやろう。」</div><div class="dangumi"> 「償うてください。償うてください。」</div><div class="dangumi"> 「えい、それ。持って行け。てめえの持てるだけ持ってうせちま</div><div class="dangumi"> え。てめえみたいな、ぐにゃぐにゃした男らしくもねえやつは、つ</div><div class="dangumi"> らも見たくねえ。早く持てるだけ持ってどっかへうせろ。」いたち</div><div class="dangumi"> はプリプリして、金米糖を投げ出しました。ツェねずみはそれを持</div><div class="dangumi"> てるだけたくさんひろって、おじぎをしました。いたちはいよいよ</div><div class="dangumi"> おこって叫びました。</div><div class="dangumi"> 「えい、早く行ってしまえ。てめえの取った、のこりなんかうじむ</div><div class="dangumi"> しにでもくれてやらあ。」</div><div class="dangumi"> 　ツェねずみは、いちもくさんに走って、天井裏の巣へもどって、</div><div class="dangumi"> 金米糖をコチコチ食べました。</div><div class="dangumi"> 　こんなぐあいですから、ツェねずみはだんだんきらわれて、たれ</div><div class="dangumi"> もあんまり相手にしなくなりました。そこでツェねずみはしかたな</div><div class="dangumi"> しに、こんどは、柱だの、こわれたちりとりだの、バケツだの、ほ</div><div class="dangumi"> うきだのと交際をはじめました。中でも柱とは、いちばん仲よくし</div><div class="dangumi"> ていました。</div><div class="dangumi"> 　柱がある日、ツェねずみに言いました。</div><div class="dangumi"> 「ツェねずみさん、もうじき冬になるね。ぼくらはまたかわいてミ</div><div class="dangumi"> リミリ言わなくちゃならない。お前さんも今のうちに、いい夜具の</div><div class="dangumi"> したくをしておいた方がいいだろう。幸いぼくのすぐ頭の上に、す</div><div class="dangumi"> ずめが春持って来た鳥の毛やいろいろ暖かいものがたくさんあるか</div><div class="dangumi"> ら、いまのうちに、すこしおろして運んでおいたらどうだい。僕の</div><div class="dangumi"> 頭は、まあ少し寒くなるけれど、僕は僕でまたくふうをするか</div><div class="dangumi"> ら。」</div><div class="dangumi"> 　ツェねずみはもっともと思いましたので、さっそく、その日から</div><div class="dangumi"> 運び方にかかりました。</div><div class="dangumi"> 　ところが、途中に急な坂が一つありましたので、ねずみは三度目</div><div class="dangumi"> に、そこからストンところげ落ちました。</div><div class="dangumi"> 　柱もびっくりして、</div><div class="dangumi"> 「ねずみさん、けがはないかい。けがはないかい。」と一生けん</div><div class="dangumi"> 命、からだを曲げながら言いました。ねずみはやっと起き上がっ</div><div class="dangumi"> て、それからかおをひどくしかめながら言いました。</div><div class="dangumi"> 「柱さん。お前もずいぶんひどい人だ。僕のような弱いものをこん</div><div class="dangumi"> な目にあわすなんて。」</div><div class="dangumi"> 　柱はいかにも申しわけがないと思ったので、</div><div class="dangumi"> 「ねずみさん、すまなかった。ゆるしてください。」と一生けん命</div><div class="dangumi"> わびました。</div><div class="dangumi"> 　ツェねずみは図にのって、</div><div class="dangumi"> 「許してくれもないじゃないか。お前さえあんなこしゃくなさしず</div><div class="dangumi"> をしなければ、私はこんな痛い目にもあわなかったんだよ。償って</div><div class="dangumi"> おくれ。償っておくれ。さあ、償っておくれよ。」</div><div class="dangumi"> 「そんなことを言ったって困るじゃありませんか。許してください</div><div class="dangumi"> よ。」</div><div class="dangumi"> 「いいや、弱いものをいじめるのは私はきらいなんだから、償って</div><div class="dangumi"> おくれ。償っておくれ。さあ、償っておくれ。」</div><div class="dangumi"> 　柱は困ってしまって、おいおい泣きました。そこでねずみも、し</div><div class="dangumi"> かたなく、巣へかえりました。それからは、柱はもうこわがって、</div><div class="dangumi"> ねずみに口をききませんでした。</div><div class="dangumi"> 　さてそののちのことですが、ちりとりはある日、ツェねずみに半</div><div class="dangumi"> 分になった最中を一つやりました。するとちょうどその次の日、ツ</div><div class="dangumi"> ェねずみはおなかが痛くなりました。さあ、いつものとおりツェね</div><div class="dangumi"> ずみは、まどっておくれを百ばかりも、ちりとりに言いました。ち</div><div class="dangumi"> りとりもあきれて、もうねずみとの交際はやめました。</div><div class="dangumi"> 　また、そののちのことですが、ある日バケツはツェねずみに、せ</div><div class="dangumi"> んたくソーダのかけらをすこしやって、</div><div class="dangumi"> 「これで毎朝お顔をお洗いなさい。」と言いましたら、ねずみはよ</div><div class="dangumi"> ろこんで次の日から、毎日それで顔を洗っていましたが、そのうち</div><div class="dangumi"> にねずみのおひげが十本ばかり抜けました。さあツェねずみは、さ</div><div class="dangumi"> っそくバケツへやって来て、償っておくれ償っておくれを、二百五</div><div class="dangumi"> 十ばかり言いました。しかしあいにくバケツにはおひげもありませ</div><div class="dangumi"> んでしたし、償うわけにも行かず、すっかり参ってしまって、泣い</div><div class="dangumi"> てあやまりました。そして、もうそれからは、ちょっとも口をきき</div><div class="dangumi"> ませんでした。</div><div class="dangumi"> 　道具仲間は、みんな順ぐりにこんなめにあって、こりてしまいま</div><div class="dangumi"> したので、ついにはだれもツェねずみの顔を見るといそいでわきの</div><div class="dangumi"> 方を向いてしまうのでした。</div><div class="dangumi"> 　ところがその道具仲間に、ただ一人だけ、まだツェねずみとつき</div><div class="dangumi"> あってみないものがありました。</div><div class="dangumi"> 　それは針がねを編んでこさえたねずみ捕りでした。</div><div class="dangumi"> 　ねずみ捕りは全体、人間の味方なはずですが、ちかごろは、どう</div><div class="dangumi"> も毎日の新聞にさえ、猫といっしょにお払い物という札をつけた絵</div><div class="dangumi"> にまでして、広告されるのですし、そうでなくても、元来人間は、</div><div class="dangumi"> この針金のねずみ捕りを、一ぺんも優待したことはありませんでし</div><div class="dangumi"> た。ええ、それはもうたしかにありませんとも。それに、さもさわ</div><div class="dangumi"> るのさえきたないようにみんなから思われています。それですから</div><div class="dangumi"> 実は、ねずみ捕りは人間よりはねずみの方に、よけい同情があるの</div><div class="dangumi"> です。けれども、たいていのねずみはなかなかこわがって、そばへ</div><div class="dangumi"> やって参りません。ねずみ捕りは、毎日やさしい声で、</div><div class="dangumi"> 「ねずちゃん、おいで。今夜のごちそうはあじのおつむだよ。お前</div><div class="dangumi"> さんの食べる間、わたしはしっかり押えておいてあげるから。ね、</div><div class="dangumi"> 安心しておいで。入り口をパタンとしめるようなそんなことをする</div><div class="dangumi"> もんかね。わたしも人間にはもうこりこりしてるんだから。おいで</div><div class="dangumi"> よ。そら。」</div><div class="dangumi"> 　なんてねずみを呼びかけますが、ねずみはみんな、</div><div class="dangumi"> 「へん、うまく言ってらあ。」とか、</div><div class="dangumi"> 「へい、へい。よくわかりましてございます。いずれ、おやじや、</div><div class="dangumi"> せがれとも相談の上で。」とか言ってそろそろ逃げて行ってしまい</div><div class="dangumi"> ます。</div><div class="dangumi"> 　そして朝になると、顔のまっ赤な下男が来て見て、</div><div class="dangumi"> 「またはいらない。ねずみももう知ってるんだな。ねずみの学校で</div><div class="dangumi"> 教えるんだな。しかしまあもう一日だけかけてみよう。」と言いな</div><div class="dangumi"> がら、新しいえさととりかえるのでした。</div><div class="dangumi"> 　今夜も、ねずみ捕りは叫びました。</div><div class="dangumi"> 「おいでおいで。今夜はやわらかな半ぺんだよ。えさだけあげる</div><div class="dangumi"> よ。大丈夫さ。早くおいで。」</div><div class="dangumi"> 　ツェねずみが、ちょうど通りかかりました。そして、</div><div class="dangumi"> 「おや、ねずみ捕りさん、ほんとうにえさだけをくださるんです</div><div class="dangumi"> か。」と言いました。</div><div class="dangumi"> 「おや、お前は珍しいねずみだね。そうだよ。えさだけあげるんだ</div><div class="dangumi"> よ。そら、早くお食べ。」</div><div class="dangumi"> 　ツェねずみはプイッと中にはいって、むちゃむちゃむちゃっと半</div><div class="dangumi"> ぺんを食べて、またプイッと外へ出て言いました。</div><div class="dangumi"> 「おいしかったよ。ありがとう。」</div><div class="dangumi"> 「そうかい。よかったね。またあすの晩おいで。」</div><div class="dangumi"> 　次の朝、下男が来て見ておこって言いました。</div><div class="dangumi"> 「えい。えさだけとって行きやがった。ずるいねずみだな。しかし</div><div class="dangumi"> とにかく中にはいったというのは感心だ。そら、きょうは鰯だぞ。」</div><div class="dangumi"> 　そして鰯を半分つけて行きました。</div><div class="dangumi"> 　ねずみ捕りは、鰯をひっかけて、せっかくツェねずみの来るのを</div><div class="dangumi"> 待っていました。</div><div class="dangumi"> 　夜になって、ツェねずみはすぐ出て来ました。そしていかにも恩</div><div class="dangumi"> に着せたように、</div><div class="dangumi"> 「今晩は、お約束どおり来てあげましたよ。」と言いました。</div><div class="dangumi"> 　ねずみ捕りは少しむっとしたが、無理にこらえて、</div><div class="dangumi"> 「さあ、食べなさい。」とだけ言いました。</div><div class="dangumi"> 　ツェねずみはプイッとはいって、ピチャピチャピチャッと食べ</div><div class="dangumi"> て、またプイッと出て来て、それから大風に言いました。</div><div class="dangumi"> 「じゃ、あした、また、来て食べてあげるからね。」</div><div class="dangumi"> 「ブウ。」とねずみ捕りは答えました。</div><div class="dangumi"> 　次の朝、下男が来て見て、ますますおこって言いました。</div><div class="dangumi"> 「えい。ずるいねずみだ。しかし、毎晩、そんなにうまくえさだけ</div><div class="dangumi"> 取られるはずがない。どうも、このねずみ捕りめは、ねずみからわ</div><div class="dangumi"> いろをもらったらしいぞ。」</div><div class="dangumi"> 「もらわん。もらわん。あんまり人を見そこなうな。」とねずみ捕</div><div class="dangumi"> りはどなりましたが、もちろん、下男の耳には聞こえません。きょ</div><div class="dangumi"> うも腐った半ぺんをくっつけていきました。</div><div class="dangumi"> 　ねずみ捕りは、とんだ疑いを受けたので、一日ぷんぷんおこって</div><div class="dangumi"> いました。夜になりました。ツェねずみが出て来て、さも大儀らし</div><div class="dangumi"> く言いました。</div><div class="dangumi"> 「あああ、毎日ここまでやって来るのも、並みたいていのこっちゃ</div><div class="dangumi"> ない。それにごちそうといったら、せいぜい魚の頭だ。いやになっ</div><div class="dangumi"> ちまう。しかしまあ、せっかく来たんだからしかたない。食ってや</div><div class="dangumi"> るとしようか。ねずみ捕りさん。今晩は。」</div><div class="dangumi"> 　ねずみ捕りは、はりがねをぷりぷりさせておこっていましたの</div><div class="dangumi"> で、ただ一こと、</div><div class="dangumi"> 「お食べ。」と言いました。ツェねずみはすぐプイッと飛びこみま</div><div class="dangumi"> したが、半ぺんのくさっているのを見て、おこって叫びました、。</div><div class="dangumi"> 「ねずみとりさん。あんまりひどいや。この半ぺんはくさってま</div><div class="dangumi"> す。僕のような弱いものをだますなんて、あんまりだ。償ってくだ</div><div class="dangumi"> さい。償ってください。」</div><div class="dangumi"> 　ねずみ捕りは、思わず、はり金をりゅうりゅうと鳴らすくらい、</div><div class="dangumi"> おこってしまいました。そのりゅうりゅうが悪かったのです。</div><div class="dangumi"> 「ピシャッ。シインン。」えさについていたかぎがはずれて、ねず</div><div class="dangumi"> み捕りの入り口が閉じてしまいました。さあもうたいへんです。</div><div class="dangumi"> 　ツェねずみはきちがいのようになって、</div><div class="dangumi"> 「ねずみ捕りさん。ひどいや。ひどいや。うう、くやしい。ねずみ</div><div class="dangumi"> 捕りさん。あんまりだ。」と言いながら、はりがねをかじるやら、</div><div class="dangumi"> くるくるまわるやら、地だんだふむやら、わめくやら、泣くやら、</div><div class="dangumi"> それはそれは大さわぎです。それでも、償ってください、償ってく</div><div class="dangumi"> ださいは、もう言う力がありませんでした。</div><div class="dangumi"> 　ねずみ捕りの方も、痛いやら、しゃくにさわるやら、ガタガタ、</div><div class="dangumi"> ブルブル、リュウリュウとふるえました。一晩そうやってとうとう</div><div class="dangumi"> 朝になりました。</div><div class="dangumi"> 　顔のまっ赤な下男が来て見て、こおどりして言いました。</div><div class="dangumi"> 「しめた。しめた。とうとう、かかった。意地の悪そうなねずみだ</div><div class="dangumi"> な。さあ、出て来い。こぞう。」</div><div class="dangumi"> </div><div class="dangumi"> 出典</div><div class="dangumi"> 　<a href="http://www.aozora.gr.jp/" target="_blank" title="青空文庫">青空文庫</a></div><div class="dangumi"> 　<a href="https://www.aozora.gr.jp/cards/000081/card1949.html" target="_blank" title="図書カード：ツェねずみ">図書カード：ツェねずみ</a></div><div class="dangumi"> </div><div class="dangumi"> 　底本：岩波文庫、岩波書店</div><div class="dangumi"> 　　　「童話集　銀河鉄道の夜　他十四編」</div><div class="dangumi"> 　　　　1951年10月25日第1刷発行</div><div class="dangumi"> 　　　　1966年7月16日第18刷改版発行</div><div class="dangumi"> 　　　　2000年5月25日改版第71刷発行</div><div class="dangumi"> </div><div class="dangumi"> 　入力：のぶ</div><div class="dangumi"> 　校正：noriko saito</div><div class="dangumi"> 　2005年5月12日作成 </div>

CSS .tategaki { display: flex ; flex-direction: row-reverse ; flex-wrap: wrap ; justify-content: flex-start ; } .dangumi { width: 22px ; /*段のサイズ（横）*/ height: 490px ; /*段のサイズ（縦）*/ padding: px ; /*内側の余白*/ margin-bottom: 30px ; /*段と段の間隔*/ -webkit-writing-mode:vertical-rl; -ms-writing-mode:tb-rl; writing-mode:vertical-rl; -webkit-text-orientation:upright; text-orientation:upright; }

HTML <div class="tategaki"> <div class="dangumi">縦書き段組み1段目</div> <div class="dangumi">縦書き段組み2段目</div> <div class="dangumi">縦書き段組み3段目</div> <div class="dangumi">縦書き段組み4段目</div> <div class="dangumi">縦書き段組み5段目</div> </div>

縦書きタグ（縦書きする文章全体を囲む）　　 段組みタグ（改行する箇所に挿入する）
<div class="tategaki"><div class="dangumi"> </div></div> </div><div class="dangumi">