CSS Summoner

Component Docs

Img コンポーネント

画像コンテナの基本スタイル。すべての画像要素の親要素に適用します。 .img-base

バリアント

Border

ボーダー付き画像
.img-border

ボーダーを適用した画像スタイル。画像に枠線を追加します。

Border Double

二重ボーダー画像
.img-border-double

二重ボーダーを適用した画像スタイル。特別感を出したい画像に使用します。

Caption

画像説明
画像のキャプション
.img-caption

画像の下部にキャプションを表示するスタイル。figcaption要素と組み合わせて使用します。

Caption Hover

画像説明
ホバー時に表示されるキャプション
.img-caption-hover

ホバー時にのみキャプションを表示するスタイル。ユーザーが画像にマウスを乗せた時に追加情報を表示します。

Caption Overlay

画像説明
オーバーレイキャプション
.img-caption-overlay

画像の上にキャプションをオーバーレイ表示するスタイル。画像の視認性を維持しながら説明を追加します。

使用例

ボーダー付き画像 

							
								<figure class="img-base img-border theme-neutral">
<img src="/images/sample-girl.png" width=250 height=250 alt="ボーダー付き画像" />
</figure>
二重ボーダー画像 

							
								<figure class="img-base img-border-double theme-primary">
<img src="/images/sample-girl.png" width=250 height=250 alt="二重ボーダー画像" />
</figure>
画像説明
画像のキャプション

							
								<figure class="img-base img-caption theme-neutral"><img src="/images/sample-girl.png" width=250 height=250 alt="画像説明" /><figcaption>画像のキャプション</figcaption></figure>
画像説明
オーバーレイキャプション

							
								<figure class="img-base img-caption-overlay theme-neutral">
<img src="/images/sample-girl.png" width=250 height=250 alt="画像説明" />
<figcaption>オーバーレイキャプション</figcaption>
</figure>
画像説明
ホバー時に表示されるキャプション

							
								<figure class="img-base img-caption-hover theme-neutral">
<img src="/images/sample-girl.png" width=250 height=250 alt="画像説明" />
<figcaption>ホバー時に表示されるキャプション</figcaption>
</figure>
説明 

							
								<figure class="img-base theme-neutral">
<img src="/images/sample-girl.png" width=250 height=250 alt="説明" />
</figure>

Component Docs

← back to css-summoner