リモートリンクの表示#
ローカル画像の表示#
カスタムローカル画像#
画像を HTML 形式に変更し、style="width: 320px;"を設定します。
<img src="/spinner.gif" data-src="/images/pexels-photo-20523844.jpeg" style="width:320px;">
1 行 2 列#
<div class="image-cols-2">
<img src="/images/pexels-photo-8536415.jpeg">
<img src="/spinner.gif" data-src="/images/pexels-kyle-miller-20582700.jpg">
</div>
遅延読み込みを実現するためには、srcに/spinner.gifを入力し、data-srcに実際の画像のアドレスを入力する必要があります。この機能を使用したくない場合は、srcに実際の画像のアドレスを直接入力してください。
ただし、画像のインターフェースの書式はhtmlの形式に変更され、スタイルが少し追加されています。
1 行 3 列#
<div class="image-cols-3">
<img src="/spinner.gif" data-src="/images/pexels-photo-8536415.jpeg">
<img src="/spinner.gif" data-src="/images/pexels-kyle-miller-20582700.jpg">
<img src="/spinner.gif" data-src="/images/pexels-photo-20523844.jpeg">
</div>
1 行 4 列#
<div class="image-cols-4">
<img src="/spinner.gif" data-src="/images/pexels-photo-8536415.jpeg">
<img src="/spinner.gif" data-src="/images/pexels-kyle-miller-20582700.jpg">
<img src="/spinner.gif" data-src="/images/pexels-photo-20523844.jpeg">
<img src="/spinner.gif" data-src="/images/pexels-photo-8536415.jpeg">
</div>
どちらでも#
実際にはどのように表示するかは自由ですが、TailwindCss の知識が必要です。
<div class="image-cols-2">
<img src="/spinner.gif" data-src="/images/pexels-photo-8536415.jpeg">
<img class="row-span-2" src="/spinner.gif" data-src="/images/pexels-jeffer-berrire-9027257.jpg">
<img src="/spinner.gif" data-src="/images/pexels-kyle-miller-20582700.jpg">
</div>
覚えておいてください#
テーマには 3 つのシンプルなスタイルクラスが用意されており、直接使用することができます。
- 1 行 2 列：
class="image-cols-2" - 1 行 3 列：
class="image-cols-3" - 1 行 4 列：
class="image-cols-4"
より複雑な表示を実現したい場合は、TailwindCss を学んでください。