最初から付いているスタイル

Lism CSS を読み込むと、クラスを何も付けなくても、HTML の要素にいくつかのスタイルが付きます。ブラウザごとの違いをそろえる Reset CSS と、見出しやリンクなどの基本のスタイルです。どちらも lism-base といういちばん弱いレイヤーに入っているので、クラスを付ければかんたんに上書きできます（CSS のレイヤーと強さの順番）。

Reset CSS#

ブラウザは、何も指定しなくても、要素ごとに少しずつ見た目を持っています。この見た目はブラウザによって違うことがあります。Reset CSS は、そのくせをそろえるための CSS です。

Lism の Reset CSS は、lism-base の中の reset という段に入っています。考え方は次のとおりです。

• ブラウザの見た目は、なるべくそのまま生かす
• レイアウトが崩れるのを防ぎ、だれでも使いやすい最低限の形にする
• 文書の組み立てが分かりにくくなるような消し方はしない

中身はとても少なく、必要なところだけです。主なものを表にします。

reset.css だけを読み込む#

Lism の Reset CSS だけを使いたいときは、reset.css を読み込みます。

import 'lism-css/reset.css';

CDN（ネット上に置かれたファイル）から読むときは、次のように書きます。

<link href="https://cdn.jsdelivr.net/npm/lism-css@1.0.1/dist/css/reset.css" rel="stylesheet" />

基本のスタイル#

Reset CSS のほかに、lism-base の段では、:root に用意したトークン（決まった段階の値）を使って、HTML の要素に最初の見た目を付けています。使われているトークンは デザイントークン で説明しています。

body#

--hl には、ハーフレディング（1行の上と下に付く余白の片側ぶん）の量が入ります。body に入れた値が、中のすべての要素に受け継がれます。

すべての要素の行の高さ#

すべての要素に、次のスタイルが付いています。

* {
  line-height: var(--lh, calc(1em + var(--hl) * 2));
}

文字の高さ（だいたい 1em）の上と下に、--hl ぶんの余白を足して行の高さを決めます。--lh に値があれば、そちらが使われます。こうすると、文字が大きくなっても行のすきまが広がりすぎず、見出しから本文まで、縦の並びの調子（リズム）がそろいます。くわしくは 行の高さ（ハーフレディング）。

見出し（h1〜h6）#

見出しの文字の形と太さは、変数で一度に変えられます。

<div class="l--stack -g:10">
  <h2>h2 の見出し</h2>
  <h3>h3 の見出し</h3>
  <h4>h4 の見出し</h4>
  <h5>h5 の見出し</h5>
</div>

リンク（a）#

<p><a href="#">ふつうのリンク</a> と <a href="#" class="-fz:l -fw:700" style="--link-c: var(--red); --link-td: none">色を変えて下線を消したリンク</a></p>

文の中の要素#

small・sup・sub は、文字が小さいぶん、行の上下の余白も小さめにしてつり合いをとっています。

<p>ふつうの文字 <small>small の文字</small> <strong>strong の文字</strong> x<sup>2</sup> <code>code</code></p>

引用#

<blockquote>
  <p>引用の1段落め。</p>
  <p>引用の2段落め。</p>
</blockquote>

そのほかの文字の要素#

caption（表の題）と figcaption（図の説明）は、文字が var(--fz--s) で少し小さくなります。

区切り（hr）#

hr は、ブラウザの線を消してから、上側（block-start）に 1px の線を引きます。線の色は var(--divider) です。

<div>
  <p>上の文章</p>
  <hr>
  <p>下の文章</p>
</div>

リスト（ul・ol）#

クラスを1つも持たないリストには、ブラウザのいつもの見た目（行頭の点や番号）がもどります。左の余白は変数で変えられます。

<ul class="-fz:l"> のように Property Class を付けたリストは、クラスを持つので点が消えたままです。点を残したいときは set--revert も付けます（Set Class（set--*））。

<div class="l--stack -g:20">
  <ul>
    <li>クラスの無いリスト</li>
    <li>点が付く</li>
  </ul>
  <ul class="-fz:l set--revert">
    <li>-fz:l と set--revert</li>
    <li>点が付く</li>
  </ul>
</div>

定義リスト（dl）#

dt（言葉）は太字になります。dd（説明）のあとに次の dt が来ると、そのあいだに var(--s20) のすきまが空き、項目の区切りが分かりやすくなります。

<dl>
  <dt>言葉1</dt>
  <dd>言葉1の説明</dd>
  <dt>言葉2</dt>
  <dd>言葉2の説明</dd>
</dl>

表（table）#

td・th（表のマス）の内側の余白は、変数で変えられます。

フォームの部品#

input（範囲スライダー type="range" を除く）・button・textarea・select・ファイル選択のボタンには、そろった見た目が付きます。

<div class="l--cluster -g:10">
  <input type="text" placeholder="入力欄">
  <button type="button">ボタン</button>
</div>

角の丸みは付けていません（ブラウザの見た目のまま）。サイト全体でそろえたいときは、それぞれの要素に border-radius を自分で書きます。

そのほか#

調整に使える CSS 変数の一覧#

関連するページ#

• 行の高さ（ハーフレディング）
• デザイントークン（余白・角丸・影など）
• CSS のレイヤーと強さの順番
• CSS ファイルの種類