HTMLでEvernoteのノート・テンプレートを作る第四回

連載ものです。過去のエントリーはこちら。

HTMLでEvernoteのノート・テンプレートを作る　第一回
 HTMLでEvernoteのノート・テンプレートを作る　第二回
 HTMLでEvernoteのノート・テンプレートを作る　第三回

連載は、一応今回で終了。本来はもっと詳しくHTMLとかCSSについて解説しようかと考えていましたが、一体何のブログなのか分からなくなってきそうなので、今回で一区切りにしておきます。

タスクリスト

上記のページを、クリップしてEvernoteに取り込んでください。左から、締め切り、タスク名、着手したかどうか、終わったかどうか、です。使用時にはSTとCKの欄に一つ一つチェックボックスを挿入していくとGoodです。
※二回目以降はこれをコピーして使うので、そういう手間は必要無し。

これはHTMLの＜TABLE＞を使ったタスクリストです。＜TABLE＞は表組みを追加するタグです。

シンプルな例を挙げれば、次のような感じになります。

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Pink&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;Table&gt;
&lt;TR&gt;
&lt;TD&gt;ここがマス１&lt;/TD&gt;
&lt;TD&gt;ここがマス２&lt;/TD&gt;
&lt;/TR&gt;
&lt;/Table&gt;
&lt;/body&gt;
&lt;/html&gt;

これにTRとTDを追加していけば、いくらでも大きいサイズの表組みを作れます。また前回紹介した背景色の指定を＜TD＞に行うことで、好みのセル色にすることができます。

上のサンプルのコードはあまりにも長いので、ブラウザでページを表示させて「ページのソースを表示」あたりで確認してください。

テーブルについて詳しく知りたい方は、とほほさんの、「<table> – テーブル（表）」を参考にしてください。というかHTMLやCSSはここで調べれば大抵問題は片づきます。

プロジェクトノート

プロジェクトノートサンプル

ページの背景色指定、＜DIV＞や＜TABLE＞の要素を組み合わせて作ったのが、上記のページ。これも実際にEvernoteにクリップしてみてください。

その後、「進捗日誌」の部分に何か書いてみてください。改行を入れると罫線が細かいドットになっていると思います。ソースの部分で言うと、

style=”border-bottom:1px dotted gray;”

が、これにあたります。以前書いた「改行を入れると同じ要素を繰り返す」という現象を利用して、罫線を作っています。

上のスタイルシートは、下の線を、１ｐｘの太さで、ドットで、灰色にしなさいという指示です。ｐｘの前の数字を大きくすれば、線が太くなります。dottedの部分は、他にもdashed（粗い点線）、solid（実線）、double（二重線）などがあります。
※この辺も、とほほさんの「border」あたりを参考に。

その他の要素については、ソースを確認してみてください。

さいごに

というわけで、後半ものすごく駆け足になりましたが、Evernoteのテンプレ作りの基本を紹介してみました。実際詳しく紹介していくと、HTML講座になってしまうので、こまかい部分は「とほほ」さんを参考にしてください。

基本的に使う要素は、＜DIV＞＜TABLE＞あたりで事足りるはずです。スタイルシートは背景色(background-color)、テキストの色（color)、フォントサイズ(font-size)、あたりが使えると思います。

デジタルの「ノート」は、自分の好みのテンプレを作るというのが、なかなか難しいものですが、Evernoteであれば、HTMLとCSSの簡単な知識があれば、割合好きな感じに作れます。その自由さも、個人的にはEvernoteの魅力の一つです。

▼こんな一冊も：

EVERNOTE「超」仕事術
	倉下忠憲シーアンドアール研究所 2010-08-18 売り上げランキング : 35570 Amazonで詳しく見る by G-Tools

EVERNOTE「超」知的生産術
	倉下忠憲シーアンドアール研究所 2011-02-26 売り上げランキング : 26158 Amazonで詳しく見る by G-Tools