> 引言:公式的Markdownの例をいくつか補足し、自分自身と他の人に便利にします。
タイトル#
一級タイトル#
#
二級タイトル##
#
三級タイトル ###
#
四級タイトル####
#
五級タイトル#####
#
六級タイトル ######
テーブル#
テーブル処理#
テーブル 1#
タイトル | アイテム |
---|---|
内容 | 内容 |
内容 2 | 内容 2 |
| タイトル | アイテム |
| ---- | ---- |
| 内容1 | 内容1 |
| 内容2 | 内容2 |
テーブル 2#
タイトル | アイテム | アイテム |
---|---|---|
内容 | 内容 | 内容 |
| タイトル | アイテム | アイテム |
| ---- | ---- |---- |
| 内容 | 内容 | 内容 |
テーブル 3#
アイテム | 価格 | 数量 |
---|---|---|
コンピュータ | $1600 | 5 |
携帯電話 | $12 | 12 |
パイプ | $1 | 234 |
<table>
<tr>
<th>アイテム</th>
<th>価格</th>
<th>数量</th>
</tr>
<tr>
<td>コンピュータ</td>
<td>$1600</td>
<td>5</td>
</tr>
<tr>
<td>携帯電話</td>
<td>$12</td>
<td>12</td>
</tr>
<tr>
<td>パイプ</td>
<td>$1</td>
<td>234</td>
</tr>
</table>
テーブル 4#
アイテム | 価格 | 数量 |
---|---|---|
コンピュータ | $1600 | 5 |
携帯電話 | $12 | 12 |
パイプ | $1 | 234 |
コロンを使用してテーブルのタイトルの整列方法を制御できます。たとえば、テーブルのタイトルを中央に配置するには、タイトルの両側にコロンを追加します。:---:は列の整列方法を示し、両側のコロンは中央揃えを示します。テーブルの他の行で、特定の列を左揃えまたは右揃えにしたい場合は、1つのコロンと1つのダッシュを使用して実現できます。たとえば、:---は左揃え、---:は右揃えを示します。
| アイテム | 価格 | 数量 |
| :------- | :----: | ---:|
| コンピュータ | $1600 | 5 |
| 携帯電話 | $12 | 12 |
| パイプ | $1 | 234 |
画像#
画像レイアウト#
画像を左に表示#
<!--左揃え-->
<p align="left">
<img src="ipfs://bafkreihvehxsruluqmcd2fgz2kpaklvfltxjvdlja5q5ytaxvvh2ipafbm" alt="画像の説明">
</p>
画像を中央に表示#
<!--中央揃え-->
<p align="center">
<img src="ipfs://bafkreihvehxsruluqmcd2fgz2kpaklvfltxjvdlja5q5ytaxvvh2ipafbm" alt="画像の説明">
</p>
画像を右に表示#
<!--右揃え-->
<p align="right">
<img src="ipfs://bafkreihvehxsruluqmcd2fgz2kpaklvfltxjvdlja5q5ytaxvvh2ipafbm" alt="画像の説明">
</p>
画像 100*100 表示#
|
<img src="ipfs://bafkreihvehxsruluqmcd2fgz2kpaklvfltxjvdlja5q5ytaxvvh2ipafbm" alt="画像の説明" width="100" height="100" /> |
画像を並べて表示 1#
画像の説明 1 | 画像の説明 2 |
| <img src="ipfs://bafkreihvehxsruluqmcd2fgz2kpaklvfltxjvdlja5q5ytaxvvh2ipafbm" alt="画像の説明" width="100" height="100" /> | <img src="ipfs://bafkreihvehxsruluqmcd2fgz2kpaklvfltxjvdlja5q5ytaxvvh2ipafbm" alt="画像の説明" width="100" height="100" /> | | :--: | :--: | | 画像の説明1 | 画像の説明2 |
画像を並べて表示 2#
<table>
<tr>
<td style="width:50%;">
<img src="ipfs://bafkreifuurbsvy4b3nr5yflendz5jkbvbvijjtegeuqogmhy3ccfpl252a" style="width:100%">
</td>
<td style="width:50%;">
<img src="ipfs://bafkreifuurbsvy4b3nr5yflendz5jkbvbvijjtegeuqogmhy3ccfpl252a" style="width:100%">
</td>
</tr>
</table>
画像を並べて表示 3(背景なし)#
<p class="flex">
<img src="ipfs://bafkreihvehxsruluqmcd2fgz2kpaklvfltxjvdlja5q5ytaxvvh2ipafbm" alt="画像の説明" width="100" height="100" />
<img src="ipfs://bafkreihvehxsruluqmcd2fgz2kpaklvfltxjvdlja5q5ytaxvvh2ipafbm" alt="画像の説明" width="100" height="100" />
</p>
文字処理#
文字レイアウト処理#
並べて表示するハイパーリンク#
| [**Github**](https://github.com/) | [**xLog**](https://xlog.app/) | [**Geek**](https://x.geekbb.ml/) |
| :---: | :---: | :---: |
3 級タイトルを中央に処理#
<h3 align="center">3級タイトルを中央に</h3>
3 級タイトルを右に処理#
<h3 align="right">3級タイトルを右に</h3>
文字色処理#
赤色
オレンジ色
黄色
緑色
青色
紫色
ピンク色
<span style="color:red">赤色</span>
<span style="color:orange">オレンジ色</span>
<span style="color:yellow">黄色</span>
<span style="color:green">緑色</span>
<span style="color:blue">青色</span>
<span style="color:purple">紫色</span>
<span style="color:pink">ピンク色</span>