■decoding属性・loading属性について

imgに付与することができる属性


decoding属性 非同期(並行して読み込む)

例)<img decoding="async" src="img/momo.svg" alt="桃の木"></a>

decoding="async"を記述
画像は通常他のコンテンツの表示を待ってから読み込まれる
decoding="async"を記述すると非同期(他のコンテンツと並行して読み込まれる)で画像を読み込ませることができる

loading属性 同期(画像遅延して読み込む)
例)<img loading="lazy" src="img/sakura.svg" alt="桜の木"></a>

loading="lazy"を追記

ページが読み込まれるとそのページで必要な画像が全て読み込まれる
 

 

■テキストをそろえたい

 text-align: (align 並べるの意味)

 例)text-align: center;

  →インラインコンテンツはラインボックス内で中央に寄せられる

 text-align: justify;

  →インラインコンテンツは両端揃え。

  テキストは最終行を除いて、その左右の端がラインボックスの左右の端に揃う

 

■テキスト記載の例

<p>  テキストテキストテキストテキストテキストテキストテキスト<br>

    テキストテキストテキストテキストテキストテキストテキスト<br> 

   テキストテキストテキストテキストテキストテキストテキスト </p>

<br> →改行