イメージにとどまるWebキャプションを追加する

9つの簡単なステップでWeb画像にHTMLキャプションを追加

画像はあなたのウェブページに命を吹き込み、視聴者の注目を集めます。 キャプションはWeb画像に関する追加情報を提供しますが、HTMLやCSSの高度なスキルがなくてもWebページに追加するのは困難です。 ここでは、Webページ上で画像を移動するたびに、画像にとどまる画像にシンプルで魅力的なキャプションを追加する信頼できる方法があります。

HTMLイメージキャプションへの9つのステップ

キャプションを画像に追加し、必要に応じて一緒に移動します。

1. あなたのウェブページに画像を追加する 。
3. divタグにスタイル属性を追加する：
   style = "" >
4. width：image width px; ">
5. 周囲のテキストよりもわずかに小さいキャプションの場合は、divスタイルにfont-sizeプロパティを追加します。
   font-size：80％; ">
6. キャプションは画像の中央に配置すると最もよく見えるので、style属性にtext-alignプロパティを追加します 。
   text-align：center; "> img src = "URL" alt = "代替テキスト" width = "width" height = "height" />
7. 最後に、 パディングボトムスタイルのプロパティで画像にスタイル属性を追加して、画像とキャプションの間に少し余分なスペースを追加します。
   style =" padding-bottom：0.5em; " />

1. これは私のキャプションです。

Webページをサーバーにアップロードし、ブラウザでテストします。

キャプションのヒント

• 幅： CSSの寸法はさまざまな測定値になる可能性があるため、通常は測定タイプを含める必要があります。 例：width：100 px ; ただし、HTMLイメージのサイズは常にピクセル単位であるため、測定をオフのままにしておきます。 width = "100"
• divの幅を画像の幅より広くすると、キャプションが画像の横に表示されることがあります。 これが必要な場合は、キャプションの直前とイメージタグの後に
  タグを追加します。