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