">

元『企業戦士』の1日1歩ブログ ~素晴らしき日常~

のんびりいこうやない。今日も明日も、明後日も。

f:id:chihiro_dayori:20170523173117p:plain

1ニチ1ポブログ

- Since 2017.04 -

【コピペ可】 ブログで計画を立てたい時には<table>の活用した『表作成』がおすすめ

f:id:chihiro_dayori:20170802131018j:plain

はじめに

昨日、投稿した計画を立てる記事に対して、ごご (id:igogotea) さんに言及して頂きました。実際にこの記事を見て、【8月度目標】選択と集中 - くろねこめもでも記事を書いて下さいました。

計画記事を書く理由は、元々、仕事柄、計画を立てることが多い部署の為、実践していることをブログでも行いたいと思って始めました。その中で計画を立てることに悩んでいる人に参考になるのであればと。

そういった中で、ひとりでも昨日の記事を見て取り組んでくれた人がいるだけでも有り難い限りです。もし、この方法が他の人の参考になるのであればと思い、今回そのまま作成した表を提供することにしました。他のことにも利用できると思いますので、是非活用してみてください。

因みに昨日(8月1日)の記事はアタマのイメージを可視化する|8月度計画です。

SPONSORED LINKS
?

1.完成形はこちら

目的 ・ここに目的を書きます。
定量目標 ・ここに数値的目標を書きます。
定性目標 ・ここに数値以外の目標を書きます。
・2行目以降を追加したい場合でスペースが不必要の場合は<br>で開業
×

こちらは目的と目標を記載する時に活用しています。

2.完成形のコードはこちら

<table width="100%" bgcolor="#323948">

   <tbody>

     <tr>

       <td align="center" bgcolor="#323948">目的</tb>

       <td bgcolor="#dcefff">・ここに目的を書きます。</tb>

       <td align="center" bgcolor="#fff"></tb>

     </tr>

     

     <tr>

       <td align="center" bgcolor="#323948">定量目標</tb>

       <td bgcolor="#dcefff">・ここに数値的目標を書きます。</tb>

       <td align="center" bgcolor="#fff"></tb>

     </tr>

     

     <tr>

       <td align="center" bgcolor="#323948">定性目標</tb>

       <td bgcolor="#dcefff">・ここに数値以外の目標を書きます。
    ・2行目以降を追加したい場合でスペースが不必要の場合は<br>で改行</tb> <td align="center" bgcolor="#fff">×</tb> </tr> </tbody> </table>

完成形をそのままコードとして書いております。これを「HTML編集」に直接コピペしてください。背景色も文字も全て完成形と同じですので、このまま使用したい場合はこちらを活用して貰って構いません。

3.パーツ説明

3-1.幅の指定

「table width」を最初に「100%」で指定することで、文字量に応じて、自動的に調整してくれます。もし、各場所を幅を調整したい時は、「tb」毎に「〇%」と指定をして頂ければ、問題無しです。指定すると、スマホ表記が見ずらい場合が多かったので、私は自動化にしております。

3-2.背景色や文字色の指定

「背景色や文字色の指定」に関しては「#6桁の色コード」を入力することで好きな色に変えて貰えばと思います。

参考までに

www.colordic.org

3-3.行の追加

<tr>

     <td align="文字位置を指定" bgcolor="#背景色を指定">内容1</tb>

     <td bgcolor="#背景色を指定">内容2</tb>

     <td align="文字位置を指定" bgcolor="#背景色を指定">内容3</tb>

</tr>

このパーツを「tbody」タグ内に挿入すれば、行の追加が出来ます。

4.番号verの完成形

・内容1・・・ -
・内容2・・・・・
-
・内容3・・・・・・・ -
・内容4・・・・・・・・
-
・内容5・・・・・・・・・
-

5.番号verのコード

<table width="100%" bgcolor="#323948">

  <tbody>

    <tr>

      <td align="center" bgcolor="#323948"></td>

      <td bgcolor="#f0f8ff">・内容1・・・</td>

      <td align="center" bgcolor="#fff">-</td>

    </tr>



    <tr>

     <td align="center" bgcolor="#323948"></td>

     <td bgcolor="#f5f5f5">・内容2・・・・・</td>

     <td align="center" bgcolor="#fff">-</td>

    </tr>



    <tr>

     <td align="center" bgcolor="#323948"></td>

     <td bgcolor="#f0f8ff">・内容3・・・・・・・</td>

     <td align="center" bgcolor="#fff">-</td>

    </tr>



    <tr>

     <td align="center" bgcolor="#323948"></td>

     <td bgcolor="#f5f5f5">・内容4・・・・・・・・</td>

     <td align="center" bgcolor="#fff">-</td>

    </tr>



    <tr>

     <td align="center" bgcolor="#323948"></td>

     <td bgcolor="#f0f8ff">・内容5・・・・・・・・・</td>

     <td align="center" bgcolor="#fff">-</td>

    </tr>

  </tbody>

</table>

要領は同じです。行毎に色を変更してみました。

最後に

行を結合したり、他にも方法は沢山あるのですが、まずは基本からということで。筆者が活用する限り、結合するよりも純粋に使用しやすいという点もあります。

計画以外にもいろいろと使用方法はあると思いますので、是非ご活用いただければと思います。

※エクセルだと画質が悪くなったり、毎回張り替えないといけない為、更新がしずらいので、記事上で作成する表にしております。

おしまい。 文字数:2766文字、作成時間:1時間30分

SPONSORED LINKS
?