img 画像 コピペで使えるHTML+CSS

スポンサーリンク
LINEで送る
Pocket

img要素の概要

画像HTML
<img>
目的画像を表示
関連<picture> <source>
<img src="pic01.png" /> //src属性によって画像のURLを指定

属性

alt

画像が表示できないときに代替として表示されるテキスト

<img src="pic01none.png" alt="画像がなければこのテキストを表示する" />
画像がなければこのテキストを表示する
decording

画像の読み込みタイミングを指定できる。同期デコードに sync 非同期デコードに async を指定する。デフォルト値はautoであり、自動的に指定されます。特にwordpressでlazyプラグインを使っている場合は指定する必要はないでしょう。chrome系に限りますがloading=”lazy”属性も同等の効果を得られる。テキストの読み込みを優先したい場合などはasyncを指定するとよいことになります。いずれにしても、実装するのであればPageSpeed Insightsなどで実際のスコアを確認しながら調整すると良いでしょう。

<img src="pic01.png" decording="async" />
sizes

<picture> にて解説

src

画像のURLを指定する

srcset

<picture>にて解説

width,height

画像の幅、高さを指定する。下のサンプルでは、元は横に長い画像であったが、縦に長くpxを指定した。

<img style="width: 100px; height: 150px;" src="pic01.png" />
その他

crossorigin , ismap , referrerpolicy の属性があるが、通常は使用しない。

CSSデザイン

文字や画像に影をつける

文字や画像に影をつける コピペで使えるHTML+CSS
影を描くCSSプロパティにはテキスト向けのtext-shadowと要素全体に対して適用されるbox-shadowがあります。このページでは2つが、どう違うのかを比較しやすい具体例を出しながら適用方法について解説します。
LINEで送る
Pocket

タイトルとURLをコピーしました