Base Styles

HTML Base Styles

HTMLのそれぞれのタグのデフォルトスタイルを紹介します。

Demo Page preview

↓

Preview

大きい画面で見る

Base Set Utility

@lism.baseの階層で定義され、トークン再定義や変数のセット、HTMLスタイルの再定義などを行うクラスを set:{style} の形式で定義しています。

`set-revert`

ブラウザ標準スタイル、またはそれに近いスタイルを再定義するためのクラスです。

現状、基本的には ol,ul に対してのみ有効です。

リストタグのベーススタイルについては次のようになっており、ul,liの標準スタイルは reset.css で打ち消した上で、classを持たないかProps Class で始まるリスト、もしくはset-revertクラスを指定したリストについては、ブラウザ標準のスタイルへ上書きするような仕様になっています。

↓

CSS

:where(ul, ol) {
  list-style: none;
  padding: 0;
  padding-inline-start: var(--list-px-s, 0);
}

:is(ul, ol):where(:not([class]), [class^='-'], .set-revert) { {
  --list-px-s: 1.5em;
  list-style: revert;
}

↓

Preview

List item 1
List item 2
- Nested item
- …
  - Nested item
  - …
List item 3
1. Nested item
2. …

<ul class='set-revert'>
  <li>List item 1</li>
  <li>
    List item 2
    <ul>
      <li>Nested item</li>
      <li>...</li>
    </ul>
  </li>
  <li>
    List item 3
    <ol>
      <li>Nested item</li>
      <li>...</li>
    </ol>
  </li>
</ul>

↓

Ordered List

List item 1
List item 2
1. Nested item
2. …
  1. Nested item
  2. …
List item 3
- Nested item
- …

<ol class='set-revert'>
  <li>List item 1</li>
  <li>
    List item 2
    <ol>
      <li>Nested item</li>
      <li>...</li>
    </ol>
  </li>
  <li>
    List item 3
    <ul>
      <li>Nested item</li>
      <li>...</li>
    </ul>
  </li>
</ol>

Base階層の最後で定義されている、スタイルをリセット・再定義するためのユーティリティクラスを紹介します。

`set-plain`

主要スタイルをリセットするためのクラスです。

.set-plain {
  font: inherit;
  width: auto;
  height: auto;
  color: inherit;
  background: none;
  border: none;
  text-decoration: none;
  padding: 0;
}

↓

set-plainをbuttonに適用する例

<div class='l--flex -g:30 -ff:mono'>
  <button class='set-plain'>button</button>
</div>

`set-shadow`

.set-shadow クラスを指定した要素では、シャドウを構成する各CSS変数が再定義されます。

ここで変数を上書きすることで、シャドウの色味などを調整することが可能です。

↓

シャドウの上書き例

Default:

Box

set-shadow して変数を上書きした例:

Box

<div class="set-shadow l--flex -g:40" style="--sh-hsl:200 50% 50%;--sh-a:20%">
  <div class="l--box -bxsh:20 -p:40 -bdrs:20">Box</div>
  <div class="l--box -bxsh:40 -p:40 -bdrs:20">Box</div>
</div>

`set-transition`

専用の変数を用いて、transitionプロパティをセットします。

活用例は hoverの解説ページを参照してください。

`set-hov`

ホバースタイル管理用のCSS変数をセットします。主に子要素のホバースタイルを制御するために使用します。

@media (any-hover: hover) {
  .set-hov:hover {
    --notHov_: ;
  }
  .set-hov:not(:hover) {
    --isHov_: ;
  }
}
@media (any-hover: none) {
  .set-hov {
    --isHov_: ;
  }
}

活用例は hoverの解説ページを参照してください。

`set-snap`

scroll-snap-系のプロパティをCSS変数でセットできるようにします。

`set-mask`

--mask変数と組み合わせて、自身にmaskを適用します。

.set-mask {
  --maskPos: 50%;
  --maskSize: contain;
  --maskRepeat: no-repeat;
  mask: var(--maskImg) var(--maskRepeat) var(--maskPos) / var(--maskSize);
}

Lismが提供するコンポーネントでは、setMaskプロパティに指定した文字列が--maskImgとして出力されるようになっています。（この時、<svg>~</svg>だけを渡すと、base64へエンコードされます。

↓

例

<HTML.img
  src="https://cdn.lism-css.com/img/u-2.jpg" width="960" height="640" loading="lazy" ar='og'
  setMask={`<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path fill="#000000" d="M170.4,25.7c16.1,14.2,23.2,38.5,24.8,61.7c1.7,23.3-1.8,45.5-12.9,62.3c-11,16.9-29.3,28.6-48.8,34.5 c-19.4,5.9-40,6.1-59.5,0.4c-19.5-5.6-37.9-17.4-51.7-34.9c-14-17.5-23.2-40.8-18-60.2c5-19.4,24.5-34.7,43.5-48.4 s37.6-25.7,59.5-29.7C129.1,7.3,154.2,11.4,170.4,25.7z" /></svg>`}
/>

<img
  class="set-mask -ar:og" src="https://cdn.lism-css.com/img/u-2.jpg" width="960" height="640" loading="lazy"
  style="--maskImg:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNMTcwLjQsMjUuN2MxNi4xLDE0LjIsMjMuMiwzOC41LDI0LjgsNjEuN2MxLjcsMjMuMy0xLjgsNDUuNS0xMi45LDYyLjNjLTExLDE2LjktMjkuMywyOC42LTQ4LjgsMzQuNSBjLTE5LjQsNS45LTQwLDYuMS01OS41LDAuNGMtMTkuNS01LjYtMzcuOS0xNy40LTUxLjctMzQuOWMtMTQtMTcuNS0yMy4yLTQwLjgtMTgtNjAuMmM1LTE5LjQsMjQuNS0zNC43LDQzLjUtNDguNCBzMzcuNi0yNS43LDU5LjUtMjkuN0MxMjkuMSw3LjMsMTU0LjIsMTEuNCwxNzAuNCwyNS43eiIgLz48L3N2Zz4=)"
>

`set-innerRs`

親要素の角丸とPaddingの値から、内側の要素の角丸(--bdrs--inner)を計算するユーティリティクラスです。親要素(set--innerRs)の p(--p), bdrs(--bdrs) を元に計算します。（これらの指定が必須となります。）

計算された--bdrs--innerをセットするには、子要素で-bdrs:innerを指定します。

↓

使用例

<Lism className='set-innerRs' p='20' bd bxsh='20' bdrs='50'>
  <Frame bdrs='inner' ar='og'>
    <img src='https://cdn.lism-css.com/img/u-5.jpg' width='1920' height='1280' alt='' />
  </Frame>
</Lism>

<div class="set-innerRs -p:20 -bd -bxsh:20 -bdrs:50">
  <div class="l--frame -bdrs:inner -ar:og">
    <img src="https://cdn.lism-css.com/img/u-5.jpg" width="1920" height="1280" alt="" />
  </div>
</div>

p, bdrsはブレイクポイントで値を変えても変数管理されているため、set-innerRsの角丸もレスポンシブ対応できます。

↓

使用例

Example

リサイズ可能

<Lism p={[10, 20, 30]} bd bdw='2px' bdrs={['40',null,'50']} class='set-innerRs'>
  <Lism bd p='20' bdrs='inner'>
    Example
  </Lism>
</Lism>