www.tsukutarou.net

こんにちは、つくたろうです。

はてなブログのMarkdownを使っていて、最近表を作る機会が増えました。

ヘッダーレスの表を作る局面もぼちぼち出てきたんですが、どうもはてなブログのMarkdownだと一筋縄じゃ行かないようなので、「はてなブログのMarkdownを使っているときにヘッダーレスのテーブルを実装する方法」を自分用にメモしておきたいと思います。

はてなブログ Perfect GuideBook [改訂第2版]

作者:JOE AOTO
ソーテック社

Amazon

やりたいこと
解決方法
- はてな記法で書く
- htmlで記述
表の中身を太字や色付けも簡単
オススメ書籍
おわりに

www.tsukutarou.net
www.tsukutarou.net

www.tsukutarou.net

やりたいこと

Markdownでテーブルを作るときに、通常は以下のように記述します。

| 見出し | 見出し |
| ---- | ---- |
| 中身 | 中身 |
| 中身 | 中身 |

見出し	見出し
中身	中身
中身	中身

ただしこの場合ヘッダー（見出し）の記述が必須となってしまいます。

ヘッダー部分をつけずに記述すると、

| 中身 | 中身 |
| 中身 | 中身 |

| 中身 | 中身 | | 中身 | 中身 |

↑のように、表が形成されません。

これを回避して、以下のように

中身	中身
中身	中身

見出しのない中身部分だけの表を作りたい。

www.tsukutarou.net

解決方法

身もふたもなくて申し訳ないのですが、「はてなブログのMarkdown記法で、Markdownだけでヘッダーなしの表を作るのは無理」です。

一行だけなら「ヘッダーそのものを表の中身部分にしてごまかす」ことができるんじゃないかなと思ったんですが、これもうまくいきませんでした。

|ヘッダーを|中身として|利用|
|---|---|---|
||||

ヘッダーを	中身として	利用

ということで考えつくのは以下の二つの方法があります。

・はてな記法で書く
・htmlで記述

www.tsukutarou.net

はてな記法で書く

まず一応紹介しておきたいのですが、はてなブログでは「はてな記法で書くと簡単にヘッダーなしの表が作れる」という仕様があります。

書き方は以下のようになります。

|中身|中身|
|中身|中身|

この記事はMarkdown記法で書いているので以下の表はhtmlで再現したものですが、これと同じものが表示されます。

中身	中身
中身	中身

ただこれは普段からマークダウン記法で書いている人には使えませんよね。

もちろん表を使いたい記事だけはてな記法で書くとかはアリだと思います。

世界一やさしいブログの教科書 1年生

作者:染谷昌利
ソーテック社

Amazon

www.tsukutarou.net

htmlで記述

結局これに尽きる。

htmlってとっつきづらそうなイメージがあるかもしれませんが、めちゃくちゃ簡単に作れます。

以下のコードをコピペして中身を適宜変えていただければ、簡単に任意の見出し無しの表が作れます。

 <table>
    <tr>
      <td>中身</td>
      <td>中身</td>
    </tr>
    <tr>
      <td>中身</td>
      <td>中身</td>
    </tr>
 </table>

中身	中身
中身	中身

また、以下のように<tr>タグや<td>タグを増やしたり減らしたりすることで行や列の追加・削除も簡単です。

 <table>
    <tr>
      <td>中身</td>
      <td>中身</td>
    </tr>
    <tr>
      <td>中身</td>
      <td>中身</td>
    </tr>
    <tr>
      <td>中身</td>
      <td>中身</td>
    </tr>
 </table>

中身	中身
中身	中身
中身	中身

 <table>
    <tr>
      <td>中身</td>
      <td>中身</td>
      <td>中身</td>
    </tr>
    <tr>
      <td>中身</td>
      <td>中身</td>
      <td>中身</td>
    </tr>
 </table>

中身	中身	中身
中身	中身	中身

www.tsukutarou.net

表の中身を太字や色付けも簡単

テーブル内の文字にも色付けやサイズ変更が可能です。

 <table>
    <tr>
      <td><b>中身</b></td>
      <td>中身</td>
    </tr>
    <tr>
      <td>中身</td>
      <td><span style='color: #ff0000;'>中身</span></td>
    </tr>
 </table>

中身	中身
中身	中身

以前紹介↓したショートカットなどと組み合わせて、はてなブログのMarkdown記法でサクサクブログを書いていきましょう！
www.tsukutarou.net

www.tsukutarou.net

オススメ書籍

htmlやCSSを手っ取り早く身に着けるのには、この書籍↓が個人的にオススメです。

これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本

作者:Capybara Design,竹内直人,竹内瑠美
翔泳社

Amazon

翔泳社の本は独習に向いていて、知識ゼロの初学からでも問題なくわかるようになっているのがお気に入りポイントです。

htmlでのウェブサイト構築とかプログラミングってその場その場で検索しながらでもできないことはないですが、適当な書籍を一冊買って手元に置きながらやると捗り方が段違いなので、ぜひ試してみてください。

www.tsukutarou.net

おわりに

今回ははてなブログで	見出しのない表を
作るという	記事でした！
ここまで読んでくれて、ありがとうございました！

2021/12/01 つくたろう

カテゴリ：

これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本