ラック
Home > ブログ > 記事 > 2017年8月 > Markdownでペーパーのチェックリストを作ろうとした話

Markdownでペーパーのチェックリストを作ろうとした話

カテゴリ: 雑記

以前、Markdownをpdfに変換する方法を得たことを書きました。cssが適用できていないバグを修正し、画像を表示させることも覚えました。

この方法を使えば、大抵のドキュメントはMarkdownで書いて、必要な場合はPDF化してしまえば良い、と思いました。

ここでいう大抵のドキュメントとは

  • 簡単な説明書
  • 手順書・マニュアル
  • チェックリスト

といったものです。大体似たり寄ったりですが、要は見出しとパラグラフがあり、箇条書きがある、図などの差し込み画像がある、くらいのものですね。場合によってはハイパーテキストリンクを貼って、Markdownビューワがあればブラウザでリンク先を参照することもできますし。はー本当に便利です。

……さて、ここで一つ喫緊の課題ができました。紙に印刷して、チェックボックスにペンでチェックを付けていくようなチェックリストが欲しくなりました。
チェックリストなので、基本的には箇条書き・番号付き箇条書きで項目をリストアップして行けば用は足りるはずです。ただ一点、「ペンでチェックを付けるチェックボックスが必要」という点を除いては……。

チェックボックス自体は「□」とでも入力しておけば印刷時にそのまま囲いになるので作成できます。問題は、ボックスを縦一直線に並べたいということです。半角/全角スペースをひたすら打ち込んで……とまるでtxtファイルのようにやっても良いかもしれません。が、これはスマートではないですし、入れ子の箇条書きでインデントが付いたり、長文で折り返したりした場合の調整が面倒です。なぜtxtやWordのような泥臭いことをやる必要があるのか。
これに関しては見た目なのでcssの出番です。さて、ではMarkdownに自作のcssを当てるには……と調べたところ、Markdownの先頭にHTMLのlink relで読み込めば良いようです(末尾の参考サイトより)。

あとは…classとかをHTMLタグとして適当に付ければ良いのでしょうけど、幸い、チェックリストの中では斜体は使っていないのでそれを使ってしまいましょう。

1. hoge *□*
    - hoge詳細1
    - hoge詳細2
2. piyo *□*
    1. piyo手順1 *□*
    2. piyo手順2 *□*
3. fuga *□*

例えばこんな感じでMarkdownの中で「*□*」として、□を斜体にします。

cssでは斜体をfloat:right;にします。

@charset "utf-8";

em {
    float: right;
}

このcssをstyle.cssとしてmdファイルと同じ階層に置いておきます。あとは、先ほどのMarkdownにcss読み込みを追加して

<link href="./style.css" rel="stylesheet"></link>

1. hoge *□*
    - hoge詳細1
    - hoge詳細2
2. piyo *□*
    1. piyo手順1 *□*
    2. piyo手順2 *□*
3. fuga *□*

とします。

これで、PDF変換した際にチェックボックスが全て右端に寄った状態のPDFができました。最初はどうやってやろうか悩みましたが、思い付いたら案外簡単にできてしまいました。

なお、試しに作ったPDFファイルを次のリンク先に置いておきます。

test.pdf

参考サイト

タグ: css,手順,Markdown,Node.js

 



関連する記事一覧