Markdownの画像に枠線をつける４つの方法
今回は Markdown の画像に枠線をつける４つの方法 について解説したいと思います！
以下の４つの方法について解説していきます。
- テーブルを利用する方法
- style タグを利用する方法
- style 属性を利用する方法
- 外部 CSS ファイルを読み込む方法
また、それぞれの方法について、Visual Studio Code のプレビュー、Qiita、はてなブログでの対応状況も添えて紹介していきたいと思います。
目次
テーブルを利用する方法
| Visual Studio Code | Qiita | はてなブログ |
|---|---|---|
| ○ | ○ | △ |
テーブルの枠線を利用する方法です。
Qiita、はてなブログ共に適用可能 ですが、はてなブログの場合は少し調整が必要 です。
書き方は以下の通りです。
|| |:-:|
※ 上下に空行が必要です。
はてなブログの場合は１行表示だと失敗するので、以下のような調整が必要です。
|| |:-:| ||
実際の表示は以下の通りです。
 |
Qiita、はてなブログ共に利用可能ですが、上下に空行が必要だったり、記述方法が煩雑なのが少し気になります。
参考記事
styleタグを利用する方法
| Visual Studio Code | Qiita | はてなブログ |
|---|---|---|
| ○ | × | × |
style タグでスタイルを指定する方法です。
Visual Studio Code のプレビューでは適用されましたが、Qiita、はてなブログでは適用されませんでした。
使いどころがあるか微妙ですが、一応、以下のような感じで記述するとVisual Studio Code のプレビューではスタイルが適用されます。
<style> img { border: 1px red solid; } </style> 
style属性を利用する方法
| Visual Studio Code | Qiita | はてなブログ |
|---|---|---|
| ○ | × | ○ |
style 属性でスタイルを指定する方法です。
この方法では、style 属性を設定するために img タグで画像を表示します。
style タグの場合と異なり、はてなブログではスタイルが適用されました。
以下のように記述すると、枠付きの画像が表示されます。
<img src="https://i.gyazo.com/402d33d6e197d6477b57e1cbcf58765b.png" style="border: 1px red solid;">
実際の表示は以下のとおり。
書き方もシンプルでわかりやすく、スタイルも柔軟にカスタムできるので、個別の設定に良さそうです。
外部 CSS ファイルを読み込む方法
| Visual Studio Code | Qiita | はてなブログ |
|---|---|---|
| ○ | × | ○ |
外部 CSS ファイルを呼び出して適用する方法です。
この方法では、外部に CSS ファイルを設置する必要があります。
以下のように記述すると、枠付きの画像が表示されます。
 <link href="[path to css file]" rel="stylesheet"></link>
外部に、CSS ファイルの設置が必要なのが少し手間ですが、複数画像に対して、まとめてスタイル設定ができる ので、特に画像が多い時に楽です。
Markdown ファイルの方でスタイルを設定する必要がない のもメリットの１つです。
また、読み込みの記述だけしておけば、あとから一括でスタイルの調整や追加も可能です。
外部 CSS ファイルの設置場所については、GitHub Pages あたりが楽そうでいいかと思います。
まとめ
以上、Markdown の画像に枠線をつける４つの方法を解説してみました！
最後に、今回の内容について、簡単にまとめてみたいと思います。
- Qiita ならテーブル利用で枠線付け
- はてなブログは外部 CSS ファイルの利用がオススメ！個別画像のカスタムは style 属性で
