Markdownで画像の配置にこだわるほど、表示先ごとに壊れ方が増える

Markdownに画像の位置を指定する標準の機能がないのは、書き忘れではありません。Markdownは、何を書くかと、どう見せるかを分けるために、見せ方の多くを最初から持たない書き方として作られています。画像の配置をMarkdownの中で細かく決めようとするほど、表示先ごとに壊れ方が増えるのはそのためです。この記事では、HTMLを混ぜて中央や左右に置く方法を押さえたうえで、配置をどこで決めるべきかを考えます。

位置を決めるには、HTMLを混ぜます

Markdownの画像記法は、どの画像を出すかは書けても、どこに置くかは書けません。そこで、HTMLを混ぜて位置を決めます。いちばん分かりやすいのは、画像を div タグで囲み、中の要素を中央にそろえる方法です。

<div style='text-align: center;'><img src='https://example.com/cute-cat.jpg' alt='かわいい猫' width='300'></div>

img タグの style 属性で直接指定することもできます。中央なら、画像を一つのかたまりとして扱い、左右の余白を自動にします。左右に寄せて文章を回り込ませるなら、float を使い、文章との間に余白を取ります。

<img src='https://example.com/cute-cat.jpg' alt='かわいい猫' style='display: block; margin: 0 auto;' width='300'>
<img src='https://example.com/cute-cat.jpg' alt='かわいい猫' style='float: left; margin-right: 10px;' width='300'>
<img src='https://example.com/cute-cat.jpg' alt='かわいい猫' style='float: right; margin-left: 10px;' width='300'>

表示先ごとに、効く指定と消される指定があります

同じMarkdownでも、表示先によって位置の指定が効かないことがあります。他人の書いた文書を表示するサービスは、安全のためにHTMLの一部を取り除くからです。たとえばGitHubのREADMEでは、style 属性は取り除かれる一方で、古いHTMLの align 属性は効く、という扱いになっていることが知られています。手元のエディタで中央にそろったから大丈夫、という判断は、表示先の規則を確かめていない点で、半分しか確かめていません。

Typoraのように、エディタの右クリックのメニューや拡張機能で位置を決められるものもありますが、そうした指定はそのエディタの中でしか通じないことがあります。そして困ったことに、どの表示先が何を取り除くのかを網羅した一覧はありません。サービスの説明書に書かれていない扱いもあり、規則が予告なく変わることもあります。確実に言えるのは、表示先で開いて確かめるまで分からない、ということだけです。

回り込みは、画面の幅を前提にしています

左右に寄せて文章を回り込ませる配置には、もう一つの前提が隠れています。画面の幅です。幅300の画像を右に寄せ、本文を左に回り込ませる配置は、パソコンの広い画面を想定しています。スマートフォンの狭い画面で同じ指定が効くと、本文は画像の横の細い隙間に押し込まれ、一行に数文字しか入らない柱になることがあります。紙の雑誌のレイアウトを、そのまま手のひらの画面に押し込むようなものです。

配置は、何をどこに置くかという指定であると同時に、どんな画面で読まれるかという前提の上に立っています。その前提をMarkdownの原稿の中に書き込むと、原稿は一つの画面のためだけのものになります。

原稿には意味を書き、配置は表示先で決めます

ここから一つの考え方が出ます。原稿のMarkdownには、主要な図、補足の写真、といった画像の役割だけを書き、実際にどう配置するかは、表示先のテンプレートやスタイルの側で決める、という分け方です。表示先が変わっても原稿は直さずに済み、画面の幅に応じて配置を変えることもできます。

ただし、この分け方がいつも得だとは言えません。表示先が一つに決まっていて、自分でスタイルを触れない場所、たとえばGitHubのREADMEに一枚だけロゴを中央に置きたい、という程度なら、表示先で効く指定を直接書くほうが早いでしょう。分ける手間が見合うのは、同じ原稿を複数の表示先で使うときです。どちらが得かの境目は、原稿の数と表示先の数で変わり、一般には決められません。

AIに頼むときは、表示先と画像の役割を渡します

Markdownで資料の下書きをAIに書かせると、画像の位置は「ここに図」のような一文で済まされがちです。前提を渡されないAIは、手持ちの知識で空白を埋めるので、表示先を伝えなければ、どこかで見たありふれた配置を選びます。

この資料は最終的にHTMLで表示し、スマートフォンでも読まれます。
画像は img タグで書き、主要な図は中央揃えにしてください。
補足の写真は、画面が広いときだけ右寄せにできるよう、役割が分かる名前を付けてください。
属性の値は一重引用符で囲んでください。

表示先という背景と、どの画像をどう扱うかという出力の形を、両方とも言葉にすることがポイントです。背景だけでも、形だけでも、狙った配置にはなりにくくなります。

あなたの文書は、最終的にどんな幅の画面で読まれているでしょうか。いま原稿に書き込んでいる配置の指定のうち、その画面で本当に効いているものはどれでしょうか。

この記事の背景にある考え方は、拙著『ChatGPT はじめてのプロンプトエンジニアリング』の2章2節「プロンプトの基本要素」の、背景の話に書きました。プロンプトを取り巻く事情や状況、TPOを伝えるのが背景で、同じ少年の写真でも、写っている場所が映画館か雪山かで読み取れるものが変わる、というたとえで説明しています。そこには「同じプロンプトでも、背景が異なれば、AIから得られる回答には大きな違いが出ます。」とあります。この節を読むと、表示先という背景のうち、どこまでを言葉にして渡せば配置の指定が無駄にならないかを、自分の文書で考えられるようになります。