Tablet View
SP View
box_005
CSSでノートの罫線を表現したブロックパターン
ノートの罫線に合わせて文字を配置するレイアウトをCSSで表現したパターン。
カラムに対して設定しているので、段数の増減に対応します。
ノートの紙の色（カラムの背景色）と罫線の色はCSSの項目から簡単に変更できます。
文字サイズや行間（罫線間の寸法）なども数値を変更すれば対応可能ですが、font-size、background-size、line-heightの調整が必要になります。
短めの文章でお客様の声を並べるような時に使えそうなパターンです。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
50代 男性
この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
30代 女性
box_005a
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
50代 男性
この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
30代 女性
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
40代 男性
box_005b
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
50代 男性
この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
30代 女性
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
40代 男性
- 罫線はCSSでカラムに対してしています。
- box_005をインポートした時、そのデータ環境（DRESSなど）の影響で罫線とずれることがあります。CSSの「.column > p」にline-hightを追加して行間を調整することで、罫線と文字があうようにしてください。