クライアントや社内のメンバーから修正依頼を受けて、どう対応しよう？と頭を抱えたことは、ありませんか。この記事では、HTML・CSSデザイナーが職場であるある！と感じる困りごとの解決策をご紹介。コードの微修正・サイトの更新を受け持つ方も、担当するコンテンツをイメージしながら、ぜひ読んでみてください。これ使ってみたい！というコードに出会えるかもしれません。今まさに困っているあなたに、届きますように。
【筆者】小林 マサユキさん
Webデザイナー。Webサイト制作をメインにサイト設計からデザイン、コーディングまでをワンストップで請負うフリーランスWebデザイナーとして活動。シンプルで伝わりやすいデザインを得意とし、中小企業のコーポレートサイト制作を主として制作。Twitter（@pulpxstyle）では、自身の経験から得た制作の現場で使えるTipsやアイデアを発信中。著書は、『現場で使える Webデザインアイデアレシピ』（マイナビ出版）。
「画像キャプションをスッキリ整えて」
あなたならどう修正する？
修正依頼者
画像キャプションが長く読みにくいので、スッキリ整えていただけませんか？
自分
承知しました。文字数は減りませんか？
修正依頼者
今のままでお願いします！
自分
承知しました。
ちなみに、もう少し大きいサイズの画像があると助かります。ありますか？
修正依頼者
今のサイズしかないんだよなぁ…。
小さいですか？
自分
承知しました。なんとかしてみます。
（うーん…どうしようかなぁ。classで一つずつ対応するしかないのか…）
写真などの画像に付与するキャプションについて、私も同じような依頼を受けたことがあります。
1行なら中央寄せでOK、しかし複数行の中央寄せはNG
キャプションが2行以上の複数行の場合は、左寄せにしてスッキリさせてほしいというもの。見た目もですが、読みづらいために、このご指摘は納得です。そこで、以下のように修正してみました。
1行なら中央寄せ、複数行なら左寄せ
上記の方法は、classを付与するというもの。キャプションの文字数に合わせて、text-align: centerを指定したclassを用意しておき、テキストボリュームに合わせて都度付与することで対応します。
<figure>
<img src="picture.jpg" alt="写真">
<figcaption class="caption-center">アサリの白ワイン蒸し</figcaption>
</figure>
<figure>
<img src="picture.jpg" alt="写真">
<figcaption>アサリの白ワイン蒸しはおいしい</figcaption>
</figure>
.caption-center {
text-align: center;
}ただ、この方法はキャプションの文字数が少ないのであればオススメできますが、文字数が多くなればなるほど手間となります。また、HTMLマークアップの知識だけでは、この方法は使えません。
そこで今回は、どの環境であってもclassを付与せずCSSで自動解決する「画像キャプションの設定方法」を、本記事にて紹介していきます。
fit-contentで解決：コンテンツに合わせて幅が可変
【手順1】
CSSプロパティのfit-contentを使用して、コンテンツに合わせたwidthのサイズを指定します。
fit-contentの範囲は、文字数に合わせて幅サイズが可変
fit-contentは、コンテンツサイズに依存します。テキストの場合は、文字数に合わせて要素の幅サイズが可変していきます。
これまでは、幅（width）を指定する場合、サイズを指定し固定にするか、最大幅の指定（max-width）、最小幅の指定（min-width）でしたが、fit-contentの登場でコンテンツに合わせて可変してくれるようになりました。
<figure>
<img src="picture.jpg" alt="写真">
<figcaption>アサリの白ワイン蒸し</figcaption>
</figure>
figcaption {
width: fit-content; /* コンテンツに合わせて幅を可変する */
}テキストを“中央寄せしているかのように見せる”必要がある
【手順2】
fit-contentだけでは左端（text-alignの初期値が行の始端のため）に表示されるので、中央に配置させる対応が必要です。width: fit-contentで要素の幅を指定しているので、margin: autoを効かせることができます。
<figure>
<img src="picture.jpg" alt="写真">
<figcaption>アサリの白ワイン蒸し</figcaption>
</figure>
.caption-left {
width: fit-content;
margin-right: auto; /* 右から左に寄せる */
margin-left: auto; /* 左から右に寄せる */
}上記のように指定すれば、左右中央寄せになります。
異なる文字数であっても中央に配置される
複数行の改行にも対応！
一見、text-align: centerを指定し、テキストを中央寄せにしているかのように見えます。しかし、これはテキスト要素の横幅をテキストのサイズで可変し、margin をauto指定しているもの。text-alignは未指定（初期値は行の始端）のため、今回の場合は左端からのスタートになります。
2行以上の場合は左端から表示される
fit-contentの注意点：親要素の横サイズに依存する
これまで説明してきた方法の場合、幅の最大値は親要素に依存します。幅指定している親要素（もしくは祖先要素）のサイズに合うので、改行されるタイミングも同サイズの位置となります。
親要素のサイズが基準になる
これで考えられる問題は以下のような状態です。
画像の横幅以上にはみ出すキャプションは、ご要望に合わないことが多い
親要素に幅指定し、画像の幅サイズを100%に指定していないと、キャプションが画像からはみ出して表示されてしまいます。もちろん、これがOKである案件の場合もありますが、私が経験してきた中ではNGであることが多かったので、確認が必要です。
もし、キャプションの幅が画像よりも大きくなってしまうのを避ける必要がある場合は、キャプションの親要素に幅指定するか、キャプションの幅最大値を決める、これらの方法が考えられます。
■画像の幅最大値を決めるには
【解決 手順1】
figureの幅500pxを指定することにより、fit-contentを指定したfigcaptionの最大幅も500pxとなります。
figureに500px指定すると、子要素の最大幅が500pxとなる
<figure>
<img src="picture.jpg" alt="写真">
<figcaption>アサリの白ワイン蒸し</figcaption>
</figure>
figure {
width: 500px; /* キャプションの親要素に幅指定 */
}
figcaption {
width: fit-content; /* コンテンツサイズに依存するが最大幅は500px */
margin-right: auto;
margin-left: auto;
}
img {
display: block; /* widthを効かせるために必要 */
width: 100%; /* 500pxに固定 */
height: auto;
}注意点としては、画像（img）にwidth: 100%を指定する必要があります。画像がかならず横500px以上のサイズを用意できるのであれば問題はありません。しかし、クライアントが投稿するブログ記事などで適用する場合、横400pxの画像を用意されると、画像の幅よりもキャプションの方が大きくなります。
また、figureに500px、imgに100%を指定しないと、画像は元サイズのまま表示されるので、意図しない表示になることがあります。画像の最大幅の確認はかならず行いい、適時指定するようにしましょう。
■キャプションの幅最大値を決めるには
【解決 手順2】
画像の幅いっぱいに指定するのではなく、キャプションの最大値を指定するデザインであれば、親要素に依存することなく指定できます。
キャプションの最大幅を指定して対応
<figure>
<img src="picture.jpg" alt="写真">
<figcaption>アサリの白ワイン蒸し</figcaption>
</figure>
figcaption {
max-width: 300px; /* キャプションに最大幅300px指定 */
width: fit-content;
margin-right: auto;
margin-left: auto;
}
img {
display: block; /* widthを効かせるために必要 */
width: 100%; /* 親要素は祖先要素の幅サイズに固定 */
height: auto;
}
widthにfit-contentを指定することでコンテンツに合わせたサイズ、max-widthに300pxを指定することでキャプション幅の最大値を300pxにしています。これは最大値であり幅サイズを固定するものではないので、width: fit-contentが効くようになります。
300px以下はwidth: fit-content、300px以上はmax-width: 300pxが適用されます。
ブラウザ対応も忘れずに
Firefoxの旧バージョン（2021年10月頃まで）の対応が必要であれば、ベンダープレフィックス（-moz-fit-content）の併記が必要です。
▼参考 fit-content | Can I use... Support tables for HTML5, CSS3, etc
https://caniuse.com/?search=fit-content
figcaption {
width: -moz-fit-content; /* Firefox旧バージョン対応 */
width: fit-content;
}本記事で紹介してきたような細かなご要望は、日々多く受けるかと思います。その期待に応えられるスキルを身につけるのは大切なことです。今回は、fit-contentをご紹介しましたが、このように比較的新しいCSSを導入することで、簡単に対応できることも。これから数回に渡って修正のアイデアを紹介していきますので、ぜひ活かしてみてください。
