セマンティックコンポーネント

セマンティックコンポーネント

LismCSS のスタイルシステムを継承しつつ、HTMLのセマンティクス（意味論）とタグの制限を明示的に持たせたコンポーネント群の解説です。

これらのコンポーネントは、as プロパティで許可されるタグ名（AllowedTag）が厳格に型定義されており、エディタ上で安全かつ快適にコーディングできるよう設計されています。内部的にはすべて Lism コンポーネントを使用しており、すべての Lism Props が利用可能です。

LismText

テキストコンテンツを構成するブロックレベル要素のためのコンポーネントです。段落や引用などのテキストのまとまりを表現します。

仕様

  • デフォルトタグ: p

  • 許可されるタグ (TextAllowedTag): p, div, blockquote, address, figcaption, pre

使用例

<template>
  <LismText fz="l" lh="l">基本的な段落です。</LismText>
  
  <LismText as="blockquote" bd="l" pl="20" bgc="base-2">
    引用テキストなどにも使用できます。
  </LismText>
</template>

LismInline

文中の要素（インライン要素）のためのコンポーネントです。テキストの一部を強調したり、部分的にスタイルを変更する場合に使用します。

仕様

  • デフォルトタグ: span

  • 許可されるタグ (InlineAllowedTag): span, em, strong, small, code, time, i, b, mark 等

使用例

<template>
  <LismText>
    このテキストの<LismInline c="red" fw="bold">赤い部分</LismInline>は強調されています。
  </LismText>
</template>

LismHeading

見出し（h1〜h6）のためのコンポーネントです。lv（レベル）プロパティを指定することで、適切な見出しタグが自動決定されます。

仕様

  • デフォルトタグ: h2 （lv が未指定の場合）

  • 便利なプロパティ: lv (1〜6 の数値または文字列)

使用例

<template>
  <LismHeading lv="1" fz="3xl">メインタイトル</LismHeading>
  <LismHeading lv="2" fz="xl" mt="40">セクションタイトル</LismHeading>
</template>

LismGroup

複数の要素をグループ化するためのセマンティックなラッパーコンポーネントです。div だけでなく、section や article などの構造化タグとしても利用します。

仕様

  • デフォルトタグ: div

  • 許可されるタグ (GroupAllowedTag): div, section, article, figure, nav, aside, header, footer, main, fieldset, hgroup

使用例

<template>
  <LismGroup as="section" py="50">
    <LismHeading lv="2">セクションタイトル</LismHeading>
    <LismText>セクション内のコンテンツです。</LismText>
  </LismGroup>
  
  <LismGroup as="footer" bgc="base-2" p="20">
    フッターコンテンツ
  </LismGroup>
</template>

LismLink

リンク（aタグ）のためのコンポーネントです。標準のHTMLのリンク属性を透過的にサポートしています。

仕様

  • デフォルトタグ: a

  • 便利なプロパティ: href, target, rel, download

使用例

<template>
  <LismLink href="https://lism-css.com/" target="_blank" c="brand" td="u">
    LismCSS公式サイト
  </LismLink>
</template>

LismList & LismListItem

リスト（ul, ol, dl）とリストアイテム（li, dt, dd）のためのコンポーネントです。

仕様

  • デフォルトタグ (LismList): ul

  • 許可されるタグ (ListAllowedTag): ul, ol, dl

  • デフォルトタグ (LismListItem): li

  • 許可されるタグ (ListItemAllowedTag): li, dt, dd

使用例

<template>
  <!-- 通常の箇条書きリスト -->
  <LismList g="10">
    <LismListItem>アイテム 1</LismListItem>
    <LismListItem>アイテム 2</LismListItem>
  </LismList>

  <!-- 説明リスト (dl) -->
  <LismList as="dl" mt="20">
    <LismListItem as="dt" fw="bold">Vue.js</LismListItem>
    <LismListItem as="dd">プログレッシブフレームワーク</LismListItem>
  </LismList>
</template>

LismMedia

画像、動画、iframeなどのメディア要素を統括するコンポーネントです。

仕様

  • デフォルトタグ: img

  • 許可されるタグ (MediaAllowedTag): img, video, iframe, picture

使用例

<template>
  <LismMedia src="/images/sample.jpg" alt="サンプル画像" width="800" height="600" bdrs="2" />
  
  <LismMedia as="video" src="/videos/intro.mp4" controls autoplay loop />
</template>