Help us understand the problem. What is going on with this article?

【Qiita】記事で挿入した画像に枠線をつける方法

【Qiita】記事の画像に枠線をつける方法

画像を挿入するときに、枠線がないとどこからどこまでが画像かわかりにくい。

⇛ 表形式(テーブル)をうまく使うことで枠線をつけられる

記述方法

| ![image.png](URL)|
|:--|

<ポイント>

  • 2行で記述
  • 1行目:「|」(パイプ)で画像のソースコードを挟む
    • 画像のソースコード「![image.png](URL)」
      • [ ]の中は[ファイル名.拡張子]:例[example-picture.JPG]
  • 2行目:|:--|
    • 「-」の数は2つ以上


ソースコードの例
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/9c4e0aa5-69a5-d717-d1d8-af8611bf0498.png)|
|:--|

ソースコードが長いのでややこしく見えるが、やってることはシンプル。
①「|」で挟む
②「|:--|」をつけるだけ

画像への枠適用:実例

image.png


枠がない場合

↓↓↓ここから画像↓↓↓

image.png

↑↑↑ここまでが画像↑↑↑

背景白だと、境目がわからない、、

yuta-38
メモとして活用してます
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away