noteでゴシック体のテーブル(表)って書けないの？

はじめまして！初投稿です！
noteを使い始めたはいいものの、いざ書こうとしたらテーブルを表示する機能ないじゃん！！！と思ったので、調べてみました。

🔢LaTeX記法で書けるらしい

どうやらLaTeX(ラテック、ラテフ)記法というもので書けるらしいけど、調べて出てきたのは
みんな明朝体ばっかり！！
noteの文字はゴシック体なのに、表だけ明朝体じゃ見栄えが悪いよ～～🥺
そう思った方に、今回はゴシック体での表示の仕方も教えます！

完成図はこんなかんじ ↓

$$
\begin{array}{|c|c|c|}
\hline
\mathbf{項目} & \mathbf{内容} & \mathbf{説明} \\
\hline
\textsf{項目1} & \textsf{内容1} & \textsf{説明1} \\
\hline
\textsf{項目2} & \textsf{内容2} & \textsf{説明2} \\
\hline
\textsf{項目3} & \textsf{内容3} & \textsf{説明3} \\
\hline
\end{array}
$$

❔LaTeX記法とは？

そもそもLaTeX記法(正確にはnoteで使うのはKaTeXってやつらしい)というのは、数式を綺麗に表示させるためのもの！
こんな感じで ↓ (数学よくわからないので中身はめちゃくちゃかも)

$$
f(x) = \begin{cases}
x^2 & \text{if } x \geq 0 \
-x^2 & \text{if } x < 0
\end{cases} \\
\textsf{こんな感じの難しい数式を綺麗に表示できる} \\
\sum_{i=1}^n x_i
$$

今回はこのすごい記法を使って、テーブルを表示させます。

✒️基本の書き方

さて、テーブルを表示するにあたってまず覚えたいのがテキストの表示の仕方です。
こちらは数式になるので、はじめと終わりを"$$"で囲みます。
バックスラッシュの後に関数名{内容}を入れます。
空白には"~"を使います。
改行するには、文末に"\\(スラッシュをふたつ)"を付けます。

$$
\関数名{テキスト~テキスト} \\
\関数名{テキスト~テキスト}
$$

💭さまざまなフォント

テキストにはたくさんフォントの種類があります。
日本語と英語でそれぞれ書いてみました！

$$
\text{明朝体~English} \\
\textsf{ゴシック体~English} \\
\textbf{明朝体~太字~English} \\
\mathbf{ゴシック体~太字~English} \\
\mathrm{Roman体~English} \\
\mathit{斜体~English} \\
\mathcal{カリグラフィ体~English} \\
\mathfrak{フラクトゥール体~English}
$$

プレビューはこんな感じ ↓

$$
\text{明朝体~English} \\
\textsf{ゴシック体~English} \\
\textbf{明朝体~太字~English} \\
\mathbf{ゴシック体~太字~English} \\
\mathrm{Roman体~English} \\
\mathit{斜体~English} \\
\mathcal{カリグラフィ体~English} \\
\mathfrak{フラクトゥール体~English}
$$

PCだと明朝体だけどiPhoneだとゴシック体に見えたりしますね👀

文字のサイズも種類があります。

$$
\tiny{とても小さい} \\
\small{小さい} \\
\large{大きい} \\
\Large{より大きい} \\
\huge{とても大きい}
$$

プレビュー ↓

$$
\tiny{とても小さい} \\
\small{小さい} \\
\large{大きい} \\
\Large{より大きい} \\
\huge{とても大きい}
$$

🖊️テーブルの書き方

基本の書き方

さて、これらを踏まえながら、テーブルの書き方を説明します！

$$
\begin{array}{|c|c|c|}
テーブルの中身
\end{array}
$$

↑ 基本的にはこんな感じです。

"\begin{array}" と "\end{array}" でテーブルを囲います。
"{|c|c|c|}"は、"表が3列あってすべて中央ぞろえにする"という意味です。
もし4列でそれぞれ左、中央、中央、右揃えだとしたら、
"{|l|c|c|r|}"という書き方になります。
ぱっと見だとl(小文字のL)と|(縦棒)の違いがわからないですよね💦

※もし列の区切り線がいらないのであれば、|(縦線を省きます。)

中身を入れると

テーブルに実際に中身を入れるとこんな感じ ↓

$$
\begin{array}{|c|c|c|}
\hline
項目 & 内容 & 説明 \\
\hline
項目1 & 内容1 & 説明1 \\
\hline
項目2 & 内容2 & 説明2 \\
\hline
項目3 & 内容3 & 説明3 \\
\hline
\end{array}
$$

プレビュー ↓

$$
\begin{array}{|c|c|c|}
\hline
項目 & 内容 & 説明 \\
\hline
項目1 & 内容1 & 説明1 \\
\hline
項目2 & 内容2 & 説明2 \\
\hline
項目3 & 内容3 & 説明3 \\
\hline
\end{array}
$$

"\hline"というのが横のライン、"&"で縦の区切りになります。
しかしこれではシンプルすぎるので、先ほどのフォントを組み合わせます！

いろんなフォントを組み合わせる

$$
\begin{array}{|c|c|c|}
\hline
\mathbf{項目} & \mathbf{内容} & \mathbf{説明} \\
\hline
\textsf{項目1} & \textsf{内容1} & \textsf{説明1} \\
\hline
\textsf{項目2} & \textsf{内容2} & \textsf{説明2} \\
\hline
\textsf{項目3} & \textsf{内容3} & \textsf{説明3} \\
\hline
\end{array}
$$

プレビュー ↓

$$
\begin{array}{|c|c|c|}
\hline
\mathbf{項目} & \mathbf{内容} & \mathbf{説明} \\
\hline
\textsf{項目1} & \textsf{内容1} & \textsf{説明1} \\
\hline
\textsf{項目2} & \textsf{内容2} & \textsf{説明2} \\
\hline
\textsf{項目3} & \textsf{内容3} & \textsf{説明3} \\
\hline
\end{array}
$$

こんなかんじでいろいろカスタマイズしてみてください！

$$
\begin{array}{|l|c|r|}
\hline
\mathbf{商品名} & \mathbf{価格} & \mathbf{現在庫} \\
\hline
\textsf{もも} & \textsf{150円} & \textsf{20個} \\
\textsf{バナナ} & \textsf{200円} & \textsf{15個} \\
\hline
\end{array}
$$

$$
\begin{array}{|l|c|r|}
\hline
\mathbf{商品名} & \mathbf{価格} & \mathbf{現在庫} \\
\hline
\textsf{もも} & \textsf{150円} & \textsf{20個} \\
\textsf{バナナ} & \textsf{200円} & \textsf{15個} \\
\hline
\end{array}
$$

かなり見やすくなったんじゃないでしょうか！！！
私の技術ではここまでが限界でした、、！！
もっと見やすい方法があったらぜひ教えてください！

note運営さん！！！テーブル機能を！！搭載してください！！