画像はあなたのウェブページに人生を追加し、視聴者の注意を引く。キャプションはWeb画像に関する追加情報を提供しますが、HTMLやCSSの高度なスキルがなくてもWebページに追加するのは難しい場合があります。ここでは、Webページ上で画像を移動するたびに、画像にとどまる画像にシンプルで魅力的なキャプションを追加する信頼できる方法があります。
HTMLイメージキャプションの手順
-
あなたのウェブページに画像を追加する。
-
あなたのWebページ用のHTMLでは、画像の周りにdivタグを配置します：
-
divタグにスタイル属性を追加する：
style = ""> -
divスタイルの幅をイメージと同じ幅にwidthスタイルプロパティで設定します。
-
周囲のテキストよりもわずかに小さいキャプションの場合は、font-sizeプロパティをdivスタイルに追加します。
-
キャプションは画像の中央に配置されていると最もよく見えるので、text-alignプロパティをstyle属性に追加します。
-
最後に、パディングボトムスタイルのプロパティで画像にスタイルアトリビュートを追加して、画像とキャプションの間に少し余分なスペースを追加します。
style = "padding-bottom：0.5em;" />
-
次に、画像のすぐ下にテキストキャプションを追加します。
Webページをサーバーにアップロードし、ブラウザでテストします。
キャプションのヒント
- CSSの寸法は多くの異なる測定値になる可能性があるため、通常は測定タイプを含める必要があります。例えば：
幅：100px; ただし、HTMLイメージのサイズは常にピクセル単位であるため、測定をオフのままにしておきます。
width = "100"
- divの幅を画像の幅より広くすると、キャプションが画像の横に表示されることがあります。これが必要な場合は、
キャプションの直前と画像タグの後に表示されます。
