縦書きが印象的なブロック

 
一部のブロックで縦書きを使うことで印象的になり、特徴やコンセプトをアピールするブロックに使えそうです。
スマホでは縦書きの調整が難しいため、スマホでは通常の横書きで対応。画像との混在でブロックを左右分割するよりもCSSがシンプルになるため、ブロック背景として画像を配置しています。

吾輩は猫である。
名前はまだ無い。 

 
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
 
この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。
 

夏目漱石

appeal_006a

吾輩は猫である。
名前はまだ無い。 

 
どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所で
ニャーニャー泣いていた事だけは
記憶している。
吾輩はここで始めて人間というものを見た。
しかもあとで聞くと
それは書生という人間中で
一番獰悪な種族であったそうだ。
 
 

夏目漱石


  • 縦書きはCSSでブロック自体に指定しています。
  • writing-mode: vertical-rl に指定します。(縦書き、右から左)
  • ブロックの高さを指定し、その高さに合わせて自動的に改行しています(appeal_006)
  • 文中に任意に改行を入れることで改行。ブロックの高さはしてしていません。(appeal_006a)
  • タブレットの場合文字に重なっても可読性が保たれるような画像(イラスト)を選ぶか、文字数を考慮してください。

Tablet View


appeal_006
 

appeal_006a

SP View


appeal_006
 

appeal_006a