Future Tech Blog フューチャー技術ブログ

表示テーマ

人気のタグ

タグ一覧へ
目次
  1. 基本の記法
    1. 見出し
    2. 箇条書き
    3. 番号付きリスト
    4. 引用
    5. 表
    6. リンク・強調・インラインコード
    7. コードブロック
    8. 脚注
    9. 折りたたみ
    10. 数式
  2. このブログ固有の記法
    1. 注釈（note）
    2. 画像
    3. 画像のキャプション
    4. 図（mermaid）
    5. csv
    6. 差分つきコードブロック
  3. 埋め込み
    1. YouTube
    2. X
    3. Speakerdeck

記法ガイド

フューチャー技術ブログで使える記法と、その表示結果をまとめたページです。見た目そのものの決まり（色・文字の大きさ・行間・間隔）は スタイルガイド にまとめています。

基本の記法

一般的な Markdown と同じ書き方で、表示だけがこのブログの見た目になるものです。

見出し

記事タイトルが最上位なので、本文の見出しは ## から始めます。

## 大きな見出し
### 中くらいの見出し
#### 小さな見出し

目次（ToC）は見出しから自動で作られます。 記事ページのサイドバー（画面が狭いときは本文の前）に出るので、本文に目次を書く必要はありません。見出しにはリンク用のアンカーも自動で付きます。

番号（「1. はじめに」の「1.」）は付けないでください。順序は目次が示すので要りません。手で振った番号は、節を足したり消したりすると置き去りになります。

ただし手順や数え上げのように、番号そのものが意味を持つときは付けて構いません。

箇条書き

- 中黒の項目
- 入れ子にすると1段下がります
  - 2段目の項目
  - 2段目の項目
    - 3段目の項目
  • 中黒の項目
  • 入れ子にすると1段下がります
    • 2段目の項目
    • 2段目の項目
      • 3段目の項目

マーカーは何段目でも同じ「●」です。段の深さは字下げが表します。

番号付きリスト

1. 手順の1つ目
2. 手順の2つ目
3. 手順の3つ目
  1. 手順の1つ目
  2. 手順の2つ目
  3. 手順の3つ目

番号は書いたとおりに出ます。すべて 1. と書いて自動で振らせることもできますが、原文を読む人が分かりにくいので、通し番号で書くことをおすすめします。

引用

> 引用文です。出典は引用の外に書きます。

引用文です。出典は引用の外に書きます。

> を重ねると入れ子になります。引用の中でも箇条書きや強調は使えます。

> 引用の1段目です。
>
> > 引用の2段目です。
> >
> > - 引用の中の箇条書き
> > - **強調**も効きます

引用の1段目です。

引用の2段目です。

  • 引用の中の箇条書き
  • 強調も効きます

表

| 項目 | 説明 |
| --- | --- |
| 1つ目 | 説明の文 |
| 2つ目 | 説明の文 |
項目 説明
1つ目 説明の文
2つ目 説明の文

列が多い表は横スクロールになります。画面の狭い端末で読まれることも多いので、列は5つくらいまでに収めると読みやすくなります。

ヘッダー行は ** で囲みません。もともと太字で表示されるので、** を足すとブラウザが太さを合成する形になって、かえって輪郭がぼやけます。行の名前が並ぶ1列目も、全部の行を囲むことはしません。全部が太字だと差が付かず、そこが行の名前であることは列の位置が示しています。

** が効くのは、合計の行や、特に見てほしい1行・1セルだけを囲んだときです。

| レベル | 構成 | 排除できるバイアス |
| --- | --- | --- |
| L0 | 同一セッション内で自己レビュー | ほぼ何もない |
| L1 | 同一モデル + 別セッション | 生成時の文脈の引きずり |
| **L2** | **同一モデル + 別セッション + 別エージェント** | **文脈の引きずり + 役割の固定** |
レベル 構成 排除できるバイアス
L0 同一セッション内で自己レビュー ほぼ何もない
L1 同一モデル + 別セッション 生成時の文脈の引きずり
L2 同一モデル + 別セッション + 別エージェント 文脈の引きずり + 役割の固定

リンク・強調・インラインコード

[リンクのテキスト](https://example.com/)、**強調**、`git status` のようなインラインコードです。

[`git status`](https://example.com/) のように、リンクでインラインコードを包むこともできます。

リンクのテキスト、強調、git status のようなインラインコードです。

git status のように、リンクでインラインコードを包むこともできます。

リンクで包んでも囲みはそのまま残り、リンクであることは下線が示します。

インラインコードはコード（コマンド・識別子・パス・設定値）を指す印なので、日本語の装飾には使いません。画面のボタンやメニューの名前は「続行」のように鍵括弧で、意味を強めたいだけなら 強調 で書いてください。ブラウザのページ翻訳はインラインコードの中を訳さないため、囲った日本語は翻訳しても原文のまま残ります。

コードブロック

言語名を書くと色が付きます。言語名の後ろにファイル名を書くと、上にファイル名が出ます。

```go main.go
func main() {
	fmt.Println("hello")
}
```
main.go
func main() {
	fmt.Println("hello")
}

シェルの操作は、実行するコマンドだけなら sh、実行結果を含むなら console を使います。

ファイル名は言語名との間を空白で区切ります。go:main.go のようにコロンで続けると、全体が言語名として扱われて色もファイル名も出ません。

脚注

本文の途中に脚注を置けます[^1]。

[^1]: 脚注の中身です。`gofmt -l .` のようなインラインコードや[リンク](https://example.com/)も書けます。記事の一番下にまとめて出ます。

本文の途中に脚注を置けます1。

折りたたみ

長いログや補足は折りたためます。HTML をそのまま書きます。

<details>
<summary>クリックで開きます</summary>

中身には Markdown をそのまま書けます。空行を1つ空けるのがコツです。

</details>
クリックで開きます

中身には Markdown をそのまま書けます。空行を1つ空けるのがコツです。

中には箇条書き・番号付きリスト・コードブロック・表も書けます。

<details>
<summary>実行ログ（長いので折りたたみ）</summary>

- 箇条書き
- 番号付きリスト

```go
fmt.Println("コードブロックも書けます")
```

| 項目 | 説明 |
| --- | --- |
| 表 | 書けます |

</details>
実行ログ（長いので折りたたみ）
  • 箇条書き
  • 番号付きリスト
fmt.Println("コードブロックも書けます")
項目 説明
表 書けます

数式

$ で挟むとインラインの数式、$$ で挟むとブロックの数式になります。

学習率を $\alpha$ とすると、更新式は次のようになります。

$$
\theta_{t+1} = \theta_t - \alpha \nabla L(\theta_t)
$$

学習率を α とすると、更新式は次のようになります。

θt+1=θt−α∇L(θt)

このブログ固有の記法

一般的な Markdown には無い、このブログだけの記法です。

注釈（note）

4種類あります。::: と note の間の空白は任意です。:::note info でも書けます。

::: note tip
おすすめや小技を書きます。
:::

::: note info
補足情報を書きます。種別を省略するとこれになります。
:::

::: note warn
気をつけてほしいことを書きます。
:::

::: note alert
壊れる・消えるなど、実害のあることを書きます。
:::

おすすめや小技を書きます。

補足情報を書きます。種別を省略するとこれになります。

気をつけてほしいことを書きます。

壊れる・消えるなど、実害のあることを書きます。

種別のあとに書いた文字はタイトルになります。

::: note warn キャッシュの有効期限について
タイトルを付けると、タイトル行と本文が分かれます。
:::
キャッシュの有効期限について

タイトルを付けると、タイトル行と本文が分かれます。

注釈の中には、箇条書き・番号付きリスト・インラインコード・リンク・コードブロック・表も書けます。インラインコードとリンクは、注釈の地の色に合わせた見た目になります。

::: note info 中で使えるもの
- 箇条書き
- `go test -run TestFoo` のようなインラインコード
- [リンク](https://go.dev/doc/)や**強調**などの文字装飾

1. 番号付きリスト
2. 2つ目の項目

```go
fmt.Println("コードブロックも書けます")
```

| 項目 | 説明 |
| --- | --- |
| 表 | 書けます |
:::
中で使えるもの
  • 箇条書き
  • go test -run TestFoo のようなインラインコード
  • リンクや強調などの文字装飾
  1. 番号付きリスト
  2. 2つ目の項目
fmt.Println("コードブロックも書けます")
項目 説明
表 書けます

画像

画像は Markdown の記法で書いてください。

![代替テキスト](/images/2026/20260114a/thumbnail.jpg)
EDIFACTの文字列を字句解析してから構文解析し、構造化データにする流れ図

<img> を手で書いて width / height で表示サイズを変えるのは避けてください。 実寸と違う値を指定すると、大きい画像を送ってブラウザ側で縮めるだけになります。小さく見せたい場合は画像ファイル自体を加工してください（そのほうが表示も速くなります）。

![代替テキスト](画像のURL) の角括弧に書く文字は、画像が見えない人に向けた説明（alt）です。装飾目的の画像なら空のままで構いません。

画像のキャプション

画像の直下の行を * で挟むと、キャプションになります。

![代替テキスト](/images/2026/20260114a/thumbnail.jpg)
*図1: キャプションの文*
EDIFACTの文字列を字句解析してから構文解析し、構造化データにする流れ図
図1: キャプションの文

代替テキストとキャプションは役割が違います。代替テキストは画像が見えない人への説明、キャプションは全員に向けた補足なので、同じ文を両方に書く必要はありません。

図（mermaid）

```mermaid
flowchart LR
  A[記事を書く] --> B[レビュー] --> C[公開]
```

記事を書く

レビュー

公開

書く側は、言語名に mermaid を指定したコードブロックへ図の定義を置くだけです。

csv

csv と書くと、列ごとに色が変わります。

```csv
store_id,item_id,sales_date,sales_quantity,sales_amount
1,101,2025-04-01,2,3000
1,102,2025-04-01,1,1500
```
store_id,item_id,sales_date,sales_quantity,sales_amount
1,101,2025-04-01,2,3000
1,102,2025-04-01,1,1500

差分つきコードブロック

diff_go のように diff_ に言語名をつなげると、差分の色と構文の色が同時に出ます。

```diff_go
 func main() {
-	fmt.Println("hello")
+	fmt.Println("hello, world")
 }
```
 func main() {
-	fmt.Println("hello")
+	fmt.Println("hello, world")
 }

埋め込み

動画・スライド・ポストは、提供元が出す埋め込みコードをそのまま本文に貼ってください。Markdown の中に HTML を直接書けます。

幅と高さは書き換えないでください。 狭い画面で収まるように整えるのはこちら側の CSS の仕事で、width="560" height="315" のような属性が付いたままでも、表示は本文の幅に合わせて縦横比を保ったまま縮みます。書き換えると、その調整とぶつかります。

このページでは実物を出していません。埋め込みの中身は提供元のプレイヤーで、このブログの見た目の決まりが効く範囲の外にあります。表示を確かめるときは、記事のプレビューで見てください。

YouTube

動画の「共有」から「埋め込む」で出るコードを貼ります。

<iframe width="560" height="315" src="https://www.youtube.com/embed/jUJgXRPqGQQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

16:9 で本文の幅に合わせて出ます。属性の title は残してください。 画面を読み上げて使う人には、これが動画の名前になります。

Google スライドと SlideShare の <iframe> も同じように貼れます。こちらも幅を合わせています。

X

ポストの「埋め込む」で出る <blockquote> と <script> を、2つセットで貼ります。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ポストの本文</p>&mdash; 名前 (@account) <a href="https://twitter.com/account/status/1837669917916561886">September 22, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

1つの記事に複数貼るときも、同じ形のまま並べてください。

ポストが消えると埋め込みも消えます。 引用したかった内容が記事から失われるので、要点は本文にも書いてください。 <blockquote> の中はポストの本文なので、そこだけは消えたあとも残ります。

Speakerdeck

スライドの「Embed」で出るコードを貼ります。<script> 形式と <iframe> 形式のどちらでも同じように出ますが、選べるなら <iframe> 形式にしてください。外部の JavaScript を読まずに済みます。

<iframe class="speakerdeck-iframe" src="https://speakerdeck.com/player/2d59638e59f04898857ce369ed20ba87" title="発表タイトル" allowfullscreen="true" style="border: 0px; background: rgba(0, 0, 0, 0.1); margin: 0px; padding: 0px; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 40px; width: 100%; height: auto; aspect-ratio: 560 / 315;" data-ratio="1.7777777777777777"></iframe>

Speakerdeck の埋め込みコードは幅と縦横比を自分で持っているので、こちら側では触っていません。インラインの style も消さずに残してください。

  1. 1.脚注の中身です。gofmt -l . のようなインラインコードやリンクも書けます。記事の一番下にまとめて出ます。 ↩