HTMLの基礎–画像の表示

四月 27, 2024

ウェブサイトのテキストを投稿して好みに合わせてフォーマットしたら、いくつかの画像でページを盛り上げましょう。画像はページに色と命を吹き込むだけでなく、それらを使用して、通常のテキストと書式設定では困難または不可能なテキスト効果を生成することもできます。たとえば、フォントの選択は通常、訪問者のコンピューターにインストールされていると確信できる少数のフォントに制限されます。これは、フォントがインストールされていない場合、サイトで表示できないためです。使用できないフォントでテキストを投稿すると、訪問者のコンピューターは、スタイルが最も近い使用可能なフォントでレンダリングします。これにより、多くの場合、Webサイトのデザインが破壊されます。

一方、画像編集プログラムを使用して派手なフォントでテキストをキャプチャし、サイトにGIFまたはJPEGとして投稿すると、訪問者は意図したとおりに正確に表示されます。テキスト自体。これにより、ヘッダーで空想的なフォントを使用し、通常とは異なる方法でグループ化することができます。

画像の表示に使用される基本タグは次のとおりです。

上記のコードはHTMLで完全に機能します。 XHTMLを使用している場合、またはサイトがXHTMLに対応していることを確認する場合は、スラッシュを追加してタグを閉じる必要があります。XHTMLでは、無制限のタグを使用できないためです。

「Src」はソースの短縮形であり、これを使用して画像へのファイルパスを指定します。つまり、サイト上で画像が見つかる場所をブラウザに指示します。画像をWebページと同じフォルダに保存する場合、「src」テキストにフォルダをリストする必要はありません。画像のファイル名を入力するだけです。

画像ソースを指定したら、さまざまなオプション属性を使用してこの基本的なフレームワークを強化し、画像を最大限に活用できます。ほとんど常に使用する必要がある属性の1つは「alt」属性です。これにより、何らかの理由で画像を表示できない場合にブラウザに表示するテキストを指定できます。「alt」テキストは次のように準備されます。

ここに代替テキスト

別の便利な属性セットは、「幅」タグと「高さ」タグです。これらにより、実際の画像サイズとは異なるサイズで画像を表示できます。これらを使用して画像を調整し、ページ全体のデザインに完全に適合することができます。ただし、2つの理由から、画像編集プログラムを使用して実際の画像サイズを変更してから、画像をオンラインでポストすることが一般的に望ましいです。まず、画像編集ソフトウェアを使用すると、ほとんどの場合、サイズを手動で調整するよりも見栄えの良い結果が得られます。第二に、「幅」および「高さ」タグを変更しても実際の画像のファイルサイズは変更されません。したがって、サムネイルとして表示する巨大な画像がある場合、画像はロードするのと同じくらい時間がかかり、ちょうどフルサイズで表示したかのように多くの帯域幅。

画像のサイズを指定する場合、高さ、幅、またはその両方をリストできます。以下に示すように、サイズはピクセルによって指定されます。

また、画像を「整列」して、テキストの流れに合わせてスムーズに作業することもできます。左揃えを選択すると、テキストは画像の右側から始まります。右揃えを選択した場合、画像はページの右側に表示され、テキストは画像の左側に表示され、新しい行に改行されます。

画像の配置は次のように設定されます。

ここに代替テキスト

また、配置を「上」、「下」、または「中央」に設定して、画像をテキスト行の上部または下部のいずれかに揃えることができます。配置を指定しない場合、画像はデフォルトで「下」になります。

補足として、画像タグ内に任意の順序で画像属性（src、align、altなど）を含めることができます。私の個人的な好みは、「src」属性を最初にリストすることです。これは最も基本的な属性であり、すべての画像タグに含める必要がありますが、最も自然に感じるシーケンスを使用できます。