【Qiita記事/Markdown】画像横並びの神となる

Markdown, Qiita, <font color="red">画像横並び</font>, <font color="red">画像縦並び</font>, 中央寄せ, 左寄せ, 右寄せ, gif画像, YouTube, Twiiter, Vimeo, TED, embedly 動画埋め込み

~~旧名:【Qiita, Markdown】記事で画像を横並びにする（YouTubeやTwitterの動画も埋め込む, gif画像）(~2019/12/04)~~

次回： [【Qiita】Markdownで記事にVimeo, TED動画を埋め込む(embed.ly)](https://qiita.com/Koshi_VTuber/items/a80af443c12c55aee5fe)

言語, 記法: HTML, Markdown
画像サイズ： 128×128 px
横並びになった画像はスクリーンサイズによって、縦並びになる。


#本文
![youtube_social_square_red.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/65d2d650-aee5-40cb-2093-607d931ec087.png)![Twitter_Social_Icon_Square_Colorのコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/7a000ef8-21c1-1e86-2942-f1933ffe839b.png)

書き方：空白を入れずに後ろに画像をドラッグ＆ドロップ

```
![](https://~~~.拡張子)![](https://~~~.拡張子)
```

```
![youtube_social_square_red.png](<a href="https://t.co/I9eMMgpS8P?amp=1">https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/65d2d650-aee5-40cb-2093-607d931ec087.png</a>)![Twitter_Social_Icon_Square_Colorのコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/7a000ef8-21c1-1e86-2942-f1933ffe839b.png)
```

#HTML
<a href="https://t.co/I9eMMgpS8P?amp=1"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/65d2d650-aee5-40cb-2093-607d931ec087.png"></a><a href="https://twitter.com/Koshi_VTuber"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/7a000ef8-21c1-1e86-2942-f1933ffe839b.png"></a>

書き方：画像を記事に一度ドラッグ&どドロップして、画像URLをコピーし、imgタグに入れる。

```HTML
<img src="画像URL"><img src="画像URL">
```

```HTML
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/65d2d650-aee5-40cb-2093-607d931ec087.png">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/7a000ef8-21c1-1e86-2942-f1933ffe839b.png">
```
##画像と画像の間にスペースを開けたい時
<a href="https://t.co/I9eMMgpS8P?amp=1"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/65d2d650-aee5-40cb-2093-607d931ec087.png"></a>　<a href="https://twitter.com/Koshi_VTuber"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/7a000ef8-21c1-1e86-2942-f1933ffe839b.png"></a>

改行せずにタグとタグの間にスペースを入れます。半角、全角スペースの数に応じて広がります。

```HTML
<img src="画像URL"> <img src="画像URL">
```

##画像サイズを指定する
<a href="https://t.co/I9eMMgpS8P?amp=1"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/65d2d650-aee5-40cb-2093-607d931ec087.png" width=200></a>　<a href="https://twitter.com/Koshi_VTuber"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/7a000ef8-21c1-1e86-2942-f1933ffe839b.png" height=100 width=500em></a>

img要素に width="" と height="" を追加すると、画像のサイズを指定することができます。
""や単位はあった方が丁寧。使える単位は%,px,em,rem,

```HTML
<img src="画像URL" width="123" height=456px > <img src="画像URL" width=123% height=200rem >
```

##横に並べた画像の位置を調整する（残念なやり方）
<div style="margin:0 0 0 auto" > 
<a href="https://t.co/I9eMMgpS8P?amp=1"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/65d2d650-aee5-40cb-2093-607d931ec087.png"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="https://twitter.com/Koshi_VTuber"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/7a000ef8-21c1-1e86-2942-f1933ffe839b.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>

<a href="https://qiita.com/Koshi_VTuber"><img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/75b9c740-aede-6017-7c3c-1cc0688f297b.png></a>
</div>

<font color="red">text-align:center やfloat:right などのcssは効きませんでした。<font color="red">分かり次第修正します。</font>

```&nbsp;```をひたすら並べる。nbspは「non-breaking space」の略です。&nbsp;は半角スペース分のスペースをあけることができますが、以下のような特殊記号を使ってもスペースをあけることができます。

>```「&nbsp;」``` は通常の半角スペースと同じサイズの空白文字。
```「&ensp;」``` はそれより少し広めの空白文字。
```「&emsp;」``` はさらに広めの空白文字。
```「&thinsp;」``` は、最初の「&nbsp;」よりも狭い(細い)空白文字です。
<a href="https://www.sejuku.net/blog/50748#i-3">【HTML入門】文章中にスペース(空白文字)を入れる3つの方法とは？より引用</a>

```HTML
<div align="center">
<img src="画像URL">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="画像URL">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="画像URL">
</div>
```

##```<table>```
<table>
            <tr>
                <td>
                    <a href="https://t.co/I9eMMgpS8P?amp=1"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/65d2d650-aee5-40cb-2093-607d931ec087.png"></a>
                </td>
                <td>
                    <a href="https://twitter.com/Koshi_VTuber"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/7a000ef8-21c1-1e86-2942-f1933ffe839b.png"></a>
                </td>
                <td>
                    <a href="https://qiita.com/Koshi_VTuber"><img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/75b9c740-aede-6017-7c3c-1cc0688f297b.png></a>
                </td>
            </tr>
</table>

```HTML
<table>
<tr>
<td><img src="画像URL"></td>
<td><img src="画像URL"></td>
<td><img src="画像URL"></td>
</tr>
</table>
```
　

#Markdown (table)
|YouTube 128×128|Twitter 128×128|
|---|---|
|![youtube_social_square_red.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/65d2d650-aee5-40cb-2093-607d931ec087.png)|![Twitter_Social_Icon_Square_Colorのコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/7a000ef8-21c1-1e86-2942-f1933ffe839b.png)|

```
|テキスト|テキスト|
|---|---|
|ドラッグ&ドロップ|ドラッグ&ドロップ|
```

```
|YouTube 128×128|Twitter 128×128|
|---|---|
|![youtube_social_square_red.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/65d2d650-aee5-40cb-2093-607d931ec087.png)|![Twitter_Social_Icon_Square_Colorのコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/7a000ef8-21c1-1e86-2942-f1933ffe839b.png)|
```

|![youtube_social_square_red.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/65d2d650-aee5-40cb-2093-607d931ec087.png)|![Twitter_Social_Icon_Square_Colorのコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/7a000ef8-21c1-1e86-2942-f1933ffe839b.png)|
|---|---|
|YouTube 128×128|Twitter 128×128|

```
|ドラッグ&ドロップ|ドラッグ&ドロップ|
|---|---|
|テキスト|テキスト|
```

```
|![youtube_social_square_red.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/65d2d650-aee5-40cb-2093-607d931ec087.png)|![Twitter_Social_Icon_Square_Colorのコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/7a000ef8-21c1-1e86-2942-f1933ffe839b.png)|
|---|---|
|YouTube 128×128|Twitter 128×128|
```

#動画(Markdown)
##YouTube
<a href="https://qiita.com/tnarihi/items/762b6ba4ac0a160eef5b">QiitaにYouTubeを埋め込む（MarkdownにYouTubeを埋め込む）</a>に影響を受けて横並びにできるか試しました。
**動画は再生できない**が、YouTubeのサムネイル画像を取得し、画像をクリックするとその動画のリンクが機能する。

自分の動画で恐縮です。
####1. YouTubeの動画のURLをコピーする
####2. <a href="https://www.tecking.org/youtube-markdown/#">YouTubeのサムネイルをMarkdownで埋め込むための文字列変換というページ</a>にURLを貼り付けて変換する.
![screencapture-tecking-org-youtube-markdown-2019-11-21-16_47_29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/312e7714-9712-f368-b727-603915f97fee.png)
####3. 変換後のマークダウン記法をコピー&ペーストする

|[![vtuber](https://img.youtube.com/vi/dGRuIKN6m-U/0.jpg)](https://www.youtube.com/watch?v=dGRuIKN6m-U)|[![game](https://img.youtube.com/vi/wwZJPkmxyYo/0.jpg)](https://www.youtube.com/watch?v=wwZJPkmxyYo)|
|---|---|
|自己紹介|ゲーム実況|


```
|コピー&ペースト|コピー&ペースト|
|---|---|
|自己紹介|ゲーム実況|
```
```
|[![vtuber](https://img.youtube.com/vi/dGRuIKN6m-U/0.jpg)](https://www.youtube.com/watch?v=dGRuIKN6m-U)|[![game](https://img.youtube.com/vi/wwZJPkmxyYo/0.jpg)](https://www.youtube.com/watch?v=wwZJPkmxyYo)|
|---|---|
|自己紹介|ゲーム実況|
```


##Twitter
動画や画像のツイートを記事に埋め込みすることが可能。Twitterのタイムラインの埋め込みは不可能。

|<img width="300" alt="スクリーンショット 2019-11-21 17.08.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/a54423b7-60b8-e64c-536e-dce36643141a.png">|<img width="300" alt="スクリーンショット 2019-11-21 17.09.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/96024ee8-ee99-5987-5dec-eb7a0eb6964a.png">|<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/0d8c99da-1c50-b089-1fbe-cfac4f185177.png">
|---|---|---|

|<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">qiita用<br>【Xcode11.1, Swift】Deployment Target iOS13.1でも、実機iOS12.4でビルドする方法（図解） <a href="https://t.co/gjdwpKKqCj">pic.twitter.com/gjdwpKKqCj</a></p>&mdash; Koshi🎮⚔バーチャル王国騎士ロボットゲームプログラマー (@Koshi_VTuber) <a href="https://twitter.com/Koshi_VTuber/status/1190244482811215872?ref_src=twsrc%5Etfw">November 1, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>|<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ついに私のMinecraftのSkinが完成した...！<br>いざ、Minecraftの世界へリンクスタート…!!!<br><br>さて、どのマイクラの鯖に入ろうか。<br>一般鯖、Vtuber鯖、pvp鯖、etc...<br><br>（もし良かったら参加希望します！）<a href="https://twitter.com/hashtag/Vtuber?src=hash&amp;ref_src=twsrc%5Etfw">#Vtuber</a> <a href="https://twitter.com/hashtag/%E6%96%B0%E4%BA%BAVtuber?src=hash&amp;ref_src=twsrc%5Etfw">#新人Vtuber</a> <a href="https://twitter.com/hashtag/Minecraft?src=hash&amp;ref_src=twsrc%5Etfw">#Minecraft</a> <a href="https://twitter.com/hashtag/%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%A9?src=hash&amp;ref_src=twsrc%5Etfw">#マイクラ</a> <a href="https://twitter.com/hashtag/%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%A9%E9%AF%96?src=hash&amp;ref_src=twsrc%5Etfw">#マイクラ鯖</a> <a href="https://t.co/X5Rp97dcHI">pic.twitter.com/X5Rp97dcHI</a></p>&mdash; Koshi🎮⚔バーチャル王国騎士ロボットゲームプログラマー (@Koshi_VTuber) <a href="https://twitter.com/Koshi_VTuber/status/1186227254931509249?ref_src=twsrc%5Etfw">October 21, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>|
|:---:|:---:|
|Xcode,Swift|Minecraftスキン|

```
|<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">qiita用<br>【Xcode11.1, Swift】Deployment Target iOS13.1でも、実機iOS12.4でビルドする方法（図解） <a href="https://t.co/gjdwpKKqCj">pic.twitter.com/gjdwpKKqCj</a></p>&mdash; Koshi🎮⚔バーチャル王国騎士ロボットゲームプログラマー (@Koshi_VTuber) <a href="https://twitter.com/Koshi_VTuber/status/1190244482811215872?ref_src=twsrc%5Etfw">November 1, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>|<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ついに私のMinecraftのSkinが完成した...！<br>いざ、Minecraftの世界へリンクスタート…!!!<br><br>さて、どのマイクラの鯖に入ろうか。<br>一般鯖、Vtuber鯖、pvp鯖、etc...<br><br>（もし良かったら参加希望します！）<a href="https://twitter.com/hashtag/Vtuber?src=hash&amp;ref_src=twsrc%5Etfw">#Vtuber</a> <a href="https://twitter.com/hashtag/%E6%96%B0%E4%BA%BAVtuber?src=hash&amp;ref_src=twsrc%5Etfw">#新人Vtuber</a> <a href="https://twitter.com/hashtag/Minecraft?src=hash&amp;ref_src=twsrc%5Etfw">#Minecraft</a> <a href="https://twitter.com/hashtag/%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%A9?src=hash&amp;ref_src=twsrc%5Etfw">#マイクラ</a> <a href="https://twitter.com/hashtag/%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%A9%E9%AF%96?src=hash&amp;ref_src=twsrc%5Etfw">#マイクラ鯖</a> <a href="https://t.co/X5Rp97dcHI">pic.twitter.com/X5Rp97dcHI</a></p>&mdash; Koshi🎮⚔バーチャル王国騎士ロボットゲームプログラマー (@Koshi_VTuber) <a href="https://twitter.com/Koshi_VTuber/status/1186227254931509249?ref_src=twsrc%5Etfw">October 21, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>|
|:---:|:---:|
|Xcode,Swift|Minecraftスキン|
```

Twitterの動画の横並びは、記事の画面幅に収まらず、横スクロールバーがついた。data-width="100"は効きませんでした。
<font color="red">発見次第修正します。</font>

また、編集画面のプレヒューでは変な風に表示されるが、記事を更新すれば大丈夫です。
<img width="519" alt="スクリーンショット 2019-11-21 17.50.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/472013fa-6e42-90f6-6d74-e565ff7f526d.png">


#画像と表の組み合わせ`<table>`(2019/12/4 New!)
Markdownで画像を**縦並び**にさせることができることを新たな調査で発見した。ぜひ、応用してください。
##`<table>`を用いる場合
横を統合する時はcolspanとを、縦を統合する時はrowspanです。

<table>
<tbody>
<tr>
<td colspan="2"><img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/65d2d650-aee5-40cb-2093-607d931ec087.png" alt="youtube"></td>
</tr>
<tr>
<th>YouTube</th>
<th>128×128 px</th>
</tr>
<tr>
<td rowspan="2"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/7a000ef8-21c1-1e86-2942-f1933ffe839b.png"><a href="https://qiita.com/Koshi_VTuber"><img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/75b9c740-aede-6017-7c3c-1cc0688f297b.png></a></td>
<td>Twitter</td>
</tr>
<tr>
<td>Qiita</td>
</tr>
</tbody>
</table>

```markdown-span-table.html
<table>
<tbody>
<tr>
<td colspan="2"><img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/65d2d650-aee5-40cb-2093-607d931ec087.png" alt="youtube"></td>
</tr>
<tr>
<th>YouTube</th>
<th>128×128 px</th>
</tr>
<tr>
<td rowspan="2"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/7a000ef8-21c1-1e86-2942-f1933ffe839b.png"><a href="https://qiita.com/Koshi_VTuber"><img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/75b9c740-aede-6017-7c3c-1cc0688f297b.png></a></td>
<td>Twitter</td>
</tr>
<tr>
<td>Qiita</td>
</tr>
</tbody>
</table>
```

##Markdownの場合
画像の横並びは簡単だが、一方**画像の縦並びには<font color="red">特別な条件下で発動する。それは奴（Markdown君）が区切り線の幅(width)の限界（許容値？）を超えたときだ。</red>**
方法：2つの区切り線の間に`<img>`を続けて入れる.`|<img=""><img="">|`

|<img width="50" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/65d2d650-aee5-40cb-2093-607d931ec087.png"><img width="50" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/7a000ef8-21c1-1e86-2942-f1933ffe839b.png">||
|:---------|------------------:|
||<img width="700" height="50" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/1f84b997-bd91-134f-38c0-053b47952de5.png"><img height="50" width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/7a000ef8-21c1-1e86-2942-f1933ffe839b.png">|

```markdown-span-table.md
|<img width="50" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/65d2d650-aee5-40cb-2093-607d931ec087.png"><img width="50" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/7a000ef8-21c1-1e86-2942-f1933ffe839b.png">||
|:---------|------------------:|
||<img width="700" height="50" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/1f84b997-bd91-134f-38c0-053b47952de5.png"><img height="50" width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/7a000ef8-21c1-1e86-2942-f1933ffe839b.png">|
```

###解説
順に見ていこう。
1行目は, 2つの画像はそれぞれwidth=50を指定している。合計width=100となり奴のwidth限界を超えないため横並びになる。
2行目は, 2つの画像はそれぞれwidth=700を指定している。合計width=1400となり奴のwidth限界を超える。さらに1行目1列で合計width=100で固定されているため、つまり`記事内のMaxwidth-100=2行2列目のwidth値(579)`となり、縮小せざるを得ない。~~（奴の中で戦争が起こっている）~~。またスクロールはつかない。このようにフレキシブル（柔軟）に変形できるMarkdown君ですが余白(padding, margin)の決まり方は分かりません（謎）。


###おまけ 
####GIF画像
|<a href="https://www.youtube.com/channel/UCbV1gUG8uVfwqOGy8itIzUQ"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/148ca4ae-7536-53a2-afd7-c82097e3e087.gif"></a>|<a href="https://www.youtube.com/channel/UCbV1gUG8uVfwqOGy8itIzUQ"><img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/06028797-07be-c59e-37a1-bd4861d40205.gif"></a>|
|:---:|:---:|

####左寄せ 中央寄せ 右寄せ
| Left align       |       Right align |    Center align    |
|:-----------------|------------------:|:------------------:|
|<img width="50" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/65d2d650-aee5-40cb-2093-607d931ec087.png">|<img width="50" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/7a000ef8-21c1-1e86-2942-f1933ffe839b.png">|<img width=50 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/1f84b997-bd91-134f-38c0-053b47952de5.png">|

```
####左寄せ 中央寄せ 右寄せ
| Left align       |       Right align |    Center align    |
|:-----------------|------------------:|:------------------:|
|<img width="50" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/65d2d650-aee5-40cb-2093-607d931ec087.png">|<img width="50" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/7a000ef8-21c1-1e86-2942-f1933ffe839b.png">|<img width=50 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/1f84b997-bd91-134f-38c0-053b47952de5.png">|
```

####応用例
<a href="https://koshivtuber.hatenablog.com/entry/2019/11/21/%E3%80%902019%E5%B9%B4%E6%9C%80%E6%96%B0%E7%89%88%E3%80%91%E3%82%AC%E3%83%81%E5%8B%A2%E3%81%8C%E6%B1%BA%E3%82%81%E3%82%8B%E3%82%B2%E3%83%BC%E3%83%A0%E9%9F%B3%E6%A5%BD%E3%83%99%E3%82%B9%E3%83%88TOP1"><img width="897" alt="スクリーンショット 2019-11-25 18.58.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/ba1cd80d-a8ed-666d-849c-214efa3a6ec9.png">
</a>

####code

画像と `````` と preタグ

画像は表示されません。（はてなブログは画像を表示することができます）

|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/7a000ef8-21c1-1e86-2942-f1933ffe839b.png">|```.entry-content dd, .entry-content oll {margin: 0;padding: 0;} .entry-content a {text-decoration:none;}```|<pre>.entry-content dd, .entry-content oll {margin: 0;padding: 0;} .entry-content a {text-decoration:none;}</pre>|
|:---|:---|:---|

```
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/7a000ef8-21c1-1e86-2942-f1933ffe839b.png">|```.entry-content dd, .entry-content oll {margin: 0;padding: 0;} .entry-content a {text-decoration:none;}```|<pre>.entry-content dd, .entry-content oll {margin: 0;padding: 0;} .entry-content a {text-decoration:none;}</pre>|
|:---|:---|:---|
```

ピラミッド

|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/75b9c740-aede-6017-7c3c-1cc0688f297b.png">|||
|:---|:---|:---|
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/75b9c740-aede-6017-7c3c-1cc0688f297b.png">|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/75b9c740-aede-6017-7c3c-1cc0688f297b.png">|
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/75b9c740-aede-6017-7c3c-1cc0688f297b.png">|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/75b9c740-aede-6017-7c3c-1cc0688f297b.png">|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/75b9c740-aede-6017-7c3c-1cc0688f297b.png">|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/75b9c740-aede-6017-7c3c-1cc0688f297b.png">|



##ログ
QiitaはTex記法で画像を挿入できないのか...
YouTubeやTwitterに対応しました。(2019/11/21)
Markdonwで画像を縦並び、画像と表の組み合わせに対応しました。タイトルを少し変更(2019/12/05)
code(2020/04/05)

【参考】
[1] <a href="https://qiita.com/chezou/items/b62053636fb62a8b62a5">Githubのmarkdownででかい画像のサイズを調整するには</a>
[2] <a href="http://yume.hacca.jp/koiki/gazo/yoko.htm">画像を横に並べる 画像　並べ方</a>
[3] <a href=""https://www.sejuku.net/blog/50748#i-3>【HTML入門】文章中にスペース(空白文字)を入れる3つの方法とは？</a>
[4] <a href=""https://qiita.com/tnarihi/items/762b6ba4ac0a160eef5b>QiitaにYouTubeを埋め込む（MarkdownにYouTubeを埋め込む）</a>