役に立つヒント

HTML画像-初心者向けのチートシート

Pin
Send
Share
Send
Send


テキストに付随する画像を使用すると、読者が提供する情報の認識が大幅に向上します。 HTMLには、ページに画像を挿入するためのタグがあります。今日は、このタグの使用方法、サポートする属性を詳しく見て、初心者のウェブマスターから寄せられたいくつかの一般的な質問に答えます。

HTMLでページに画像(画像)を挿入する

前述したように、タグはページに画像を挿入するために使用されます。その短い形式は次のとおりです。

XHTMLで。例からわかるように、後者の最後にスラッシュ(スラッシュ)が追加されています。

これはすべて、いわば、ファイルへのリンクを除いて、属性を含まない画像をすばやく挿入することです。

このタグ()は、たとえばリンクとは異なり、閉じず、上で引用した形式で記述されます。推奨属性は「alt»:

画像が完全に読み込まれていないか、リンクが壊れている(存在しない)ときに表示されます。

そして今、タグがサポートするすべての属性について話すことが理にかなっています。

HTMLの既存のタグ属性をリストする

画像のすべての属性はスペースで登録されます。しかし、実際にはそのリスト自体。

src -イメージへのリンクが含まれています。絶対(別のサイトにあるファイルへのリンク)または相対(サイトにあるファイルへのリンク)のいずれかです。有効な形式: JPEG(JPG), PNG, GIF, BMP, ICO, APNG, SvgBase64。絶対画像アドレスでの使用例:

相対画像アドレスの使用例:

alt -テキストを含む-表示されない/見つからない画像のヒント。使用例:

揃える -隣接するテキストを基準にして画像の配置を設定します(テキストで画像の周りにフローを作成します)。有効な値: トップ, , 真ん中, そうだね。使用例:

この属性はHTML5ではサポートされていません。

ボーダー -画像の周囲の境界線(フレーム)の幅を設定します。有効な値: px, % および他の量。使用例:

この属性はHTML5ではサポートされていません。

身長 -画像の高さを設定します。有効な値: px, % および他の量。使用例:

-画像の幅を設定します。有効な値: px, % および他の量。使用例:

hspace -画像の水平(左右)インデントを設定します。有効な値: px, % および他の量。使用例:

この属性はHTML5ではサポートされていません。

vspace -画像の垂直(上下)インデントを設定します。有効な値: px, % および他の量。使用例:

この属性はHTML5ではサポートされていません。

ロングデスク -拡張イメージ記述へのアドレスが含まれています。有効な値: TXTファイル。 src属性と同様に、アドレスは絶対アドレスでも相対アドレスでもかまいません。使用例:

クロスオリジン -クロスドメインリクエスト(CORS)を介して別のサイトから画像を挿入できる属性。有効な値: 匿名 (資格情報のない匿名リクエスト)および 使用資格情報 (資格情報の転送を伴う要求)。使用例:

この属性はHTML5でのみサポートされています。

srcset -画面の幅または密度に応じて表示されるファイルのリストを設定します。有効な値: Nw (Nは任意の正の整数)および Kx (ここで、Kは正の10進数です)。使用例:

この属性は、AndroidおよびInternet Explorerではサポートされていません。

サイズ -srcset属性で指定された画像のサイズを設定します。有効な値: ネックス, ネレム, ネム, Nvmin, Nch, Nvh, Nvw, Nvmax, ニン, Nq, んー, NPC, Ncm, NptNpxNは正数です。使用例:

この例の原理は次のとおりです。画面の解像度が600ピクセル未満の場合、画像の幅を300ピクセルに設定します。600ピクセルを超える場合は、画像の幅を600ピクセルに固定します。

srcsetなどの属性は、AndroidおよびInternet Explorerブラウザーではサポートされていません。

usemap -タグを使用して設定されたマップに画像を関連付けます。有効な値: #name (nameはマップのname属性の値です)および #id (idはカードのid属性の値です)。使用例:

カード()がリンク()またはボタン()でラップされている場合、リンクを作成できません。

ismap -画像をサーバーカードの特定の領域に関連付けます。このような画像をクリックすると、左上隅からのクリックの座標が読み取られ、リンクで指定されたアドレスにリクエストによって送信されます。属性を機能させるには、画像をリンクで囲む必要があります()。使用例:

さらに、グローバル属性をサポートします。 クラスid、および直接埋め込みスタイル:

必要に応じて、個人属性のほとんどを適切なスタイルに置き換えることができます。

HTMLで画像(image)をリンクにする方法は?

(だけでなく)Webサイトの別のページに移動する機能を追加して、画像をクリック可能にするには、タグでラップします :

リンクは別のページにつながる可能性があるという事実に加えて、たとえば、リンクにすることができます。これで、画像チュートリアルが完了しました。

まだ質問がありますか?この記事の下のコメントに自由に投稿してください。

HTMLに画像を埋め込む方法は?

HTMLページに画像を挿入するには、単一の単純なタグが使用されます。

ここで、xxxはイメージアドレスです。画像がページと同じディレクトリにある場合、タグは次のようになります。

ただし、高速で安定したインターネットアクセスはまだ世界の隅々まで到達しておらず、Webサイト上の画像がロードされないことがあります。そのような場合には、代替テキストの概念があります。

それは、そのアクセス不能、ロード時、または「写真なし」ブラウザモードで写真のサイトに表示されます。タグのalt属性を使用して追加されます。

画像ファイルに代替テキストを追加する例:

HTML画像のサイズ変更

画像ファイルの表示サイズを変更するには、高さと幅のタグを使用します。高さは高さ、幅はピクセル単位で測定した幅です。

これらの属性を使用する場合、ブラウザは最初にグラフィックコンテンツにスペースを割り当て、一般的なページレイアウトを準備し、テキストを表示してから、画像自体をロードします。

画像は指定されたサイズの長方形に配置され、パラメータが元のサイズよりも小さいか大きい場合、画像は引き伸ばされるか圧縮されます。

高さと幅の属性が使用されていない場合、ブラウザはすぐに画像をロードし、テキストやその他のページ要素の表示を遅らせます。

これらのパラメーターは、ピクセル(画像サイズは一定でユーザーの画面解像度に依存しない)またはパーセンテージ(画像サイズは画面解像度に依存します)の両方で指定できます。

画像の元のサイズを変更するときは、その比率を維持する必要があることに注意してください。

これを行うには、1つのパラメーター(幅または高さ)の値のみを指定すると、2番目の値が自動的に計算されます。

HTML画像のレイアウト

多くのHTMLタグと同様に、

画像リンク

HTMLでリンクを作成するには、次のタグを使用します。

グラフィックリンクを設定するには、画像タグとリンクタグを組み合わせるだけです。

これは次のように行われます。

ご覧のように、グラフィック挿入はリンクであり、クリックすると完全版または短縮版で記録されたアドレスにリダイレクトできます。

HTMLで画像を背景にするにはどうすればよいですか?

画像は、目に見えるオブジェクトとしてページに挿入できるだけでなく、背景としても設定できます。画像を背景として定義するには、タグで属性background =” xxx”を指定する必要があります。xxxは、上記の例と同じ方法で指定された画像のアドレスです。

例として、このようなテクスチャ画像を背景画像として設定します。

サイトのHTMLページに画像を挿入するために必要なタグと属性に関するこの情報は使い果たされています。

Pin
Send
Share
Send
Send