Lism Tips

バナー

Lism のクラスを組み合わせて、画像1枚をまるごとリンクにしたバナーと、画像の上に文字を重ねたバナーを作る例です。

バナー（広告や案内のための、横長の画像リンク）は、Lism のクラスを組み合わせるだけで作れます。新しい CSS は要りません。ここでは、画像だけのバナーと、画像の上に文字を重ねたバナーの2つを紹介します。

使うクラス#

クラス このバナーでの役目
l--frame 画像を枠いっぱいに収める
is--boxLink 箱ごとクリックできるリンクにする
has--transition マウスを乗せたときの変化をなめらかにする
-hov:-o マウスを乗せると少し透ける（-o は opacity（不透明度）の略）
-bdrs:20 角を丸くする（-bdrs は border-radius の略）
is--layer 画像を後ろに敷いて、上に文字を重ねる

画像だけのバナー#

<a> に上のクラスを付けて、中に画像を1枚入れます。マウスを乗せると、少し透けて見えます。

表示例

html
<a class="l--frame is--boxLink has--transition -hov:-o -bdrs:20" href="#">
  <img src="/img/sample-landscape.svg" alt="" width="800" height="450" />
</a>

画像の上に文字を重ねたバナー#

画像に is--layer を付けると、画像が箱の後ろいっぱいに広がります。その上に、半透明の黒い背景を付けた l--flex を重ねて、見出しと矢印のアイコンを左右に分けて置きます。

表示例

バナー

ここに短い説明の文を入れます。
html
<a class="l--frame is--boxLink has--transition -hov:-o -bdrs:20" href="#">
  <img class="is--layer" src="/img/sample-landscape.svg" alt="" width="960" height="640" />
  <div class="l--flex -jc:between -ai:center -pos:relative -g:20 -p:30 -c -bgc -min-h" style="--c: #fff; --bgc: rgb(0 0 0 / 50%); --min-h: 12rem">
    <div class="l--stack -g:10">
      <p class="-fz:xl -fw:bold">バナー</p>
      <p class="-fz:s -hl:s">ここに短い説明の文を入れます。</p>
    </div>
    <svg class="a--icon -fz:3xl" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true">
      <path d="M180.24,132.24l-80,80a6,6,0,0,1-8.48-8.48L167.51,128,91.76,52.24a6,6,0,0,1,8.48-8.48l80,80A6,6,0,0,1,180.24,132.24Z"></path>
    </svg>
  </div>
</a>

ポイントは次のとおりです。

  • 文字の箱に -pos:relative（position: relative）を付けて、後ろの画像より手前に出しています
  • -jc:between（justify-content: space-between）で、文章を左、矢印を右に分けています
  • 文字の色・背景・最低の高さは、-c・-bgc・-min-h のクラスを付けて、値を style の CSS 変数（--c・--bgc・--min-h）で渡しています
  • 最低の高さは、ここでは 12rem にしています。公式の例では --min-h: 30cqw と書いています。cqw は、まわりの入れ物（is--container などの箱）の幅を 100 としたときの割合の単位で、入れ物の幅に合わせたいときに使えます

React・Astro で書く場合#

コンポーネントでは <BoxLink> に layout="frame" を渡すと、上と同じ形になります。

jsx
<BoxLink layout="frame" href="#banner-link" hov="-o" hasTransition bdrs="20">
  <img src="/img/sample-landscape.svg" alt="" width="800" height="450" />
</BoxLink>

文字を重ねる形では、画像に <Media isLayer … />、文字の箱に <Flex jc="between" ai="center" pos="relative" …> を使います。

関連するページ#

公式ドキュメント

2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

ページの一覧