HTML と CSS のきほん

Lism CSS は、HTML に書くクラスで見た目を付けます。そのため、HTML と CSS の言葉を少し知っておくと、ほかのページがぐっと読みやすくなります。このページでは、Lism を使うのに必要なところだけを説明します。

HTML：ページに何を載せるか#

HTML は、ページの中身を書くための言葉です。文章や画像を タグ（< と > で囲んだ印）ではさんで、「これは見出し」「これは段落」と伝えます。

<h1>わたしのページ</h1>
<p>こんにちは。これは段落です。</p>

要素とタグ#

• <p> を 開始タグ、</p> を 終了タグ と呼びます。
• 開始タグから終了タグまでのひとかたまりを 要素 と呼びます。上の例では「<p>こんにちは。…</p>」が1つの段落の要素です。
• 要素の中に、別の要素を入れることもできます。外側を 親要素、内側を 子要素 と呼びます。

よく使う要素をいくつか挙げます。

属性と class#

開始タグの中には、属性（要素に付ける追加の情報）を書けます。名前="値" の形です。

<a href="#">リンク</a>
<img src="/img/sample-square.svg" alt="人の形">

href はリンク先、src は画像の場所、alt は画像の説明です。

Lism でいちばん大事なのが class 属性 です。要素に名前の札を付けるもので、空白で区切れば札をいくつでも付けられます。

<div class="l--stack -g:20 -p:30">…</div>

この <div> には l--stack・-g:20・-p:30 の3つのクラスが付いています。Lism では、このクラスを選んで書くことで見た目を決めます。

CSS：どう見せるか#

CSS は、HTML の要素の見た目を決める言葉です。1つのまとまりは、次の形をしています。

.box {
  padding: 16px;
  background-color: lightgray;
}

上の例は「box というクラスが付いた要素に、内側の余白 16px と、明るい灰色の背景を付ける」という意味です。

よく出てくるプロパティ#

padding と margin はまちがえやすいので気をつけてください。枠線の内側のすきまが padding、外側のすきまが margin です。

CSS 変数#

CSS では、値に名前を付けて使い回せます。これを CSS 変数（カスタムプロパティ）と呼びます。名前は -- で始めます。

:root {
  --main-color: tomato;
}
.title {
  color: var(--main-color);
}

var(--main-color) と書いたところに、--main-color の値が入ります。値を1か所で変えれば、使っているところが全部変わります。CSS 変数は、HTML の style 属性で要素ごとに入れることもできます。

<div style="--main-color: navy">…</div>

Lism のクラスは「プロパティと値」を1つにしたもの#

ここまでの言葉で、Lism のクラスが読めるようになります。Lism の -p:20 は、CSS の「padding に決まった値を入れる」を1つのクラスにしたものです。

クラス名は -{プロパティの略}:{値} の形です。プロパティの名前は短く略してあります。たとえば p は padding、ta は text-align、fz は font-size の略です。この形のクラスを Lism では Property Class と呼びます。

値の 20 や l は、Lism が用意した決まった段階の値（デザイントークン）の名前です。center や none のように、CSS の値をそのまま使うものもあります。

<p class="-p:20 -bd -ta:center">-p:20 と -ta:center を付けた段落</p>

略し方のルールは 名前のルール（省略のしかた）、Property Class の全体は Property Class の書き方 で説明しています。

CSS 変数で値を渡すクラス#

Lism には、値を CSS 変数で受け取るクラスもあります。-p だけを書き、style 属性で --p に好きな値を入れます。

<p class="-p -bd" style="--p: 2em">--p に 2em を入れた段落</p>

決まった段階の値にないものを使いたいときに便利です。画面の幅で値を切り替えるとき（レスポンシブ）も、この CSS 変数のしくみを使います。

次に読むページ#

• 読み込み方（インストール）：Lism CSS を自分のページで使えるようにする