tags

このページはテンプレートが用意している基本 HTML タグの見た目サンプルです。

見出し（h1 〜 h6）

h1 見出し — 雪の朝の話

h2 見出し — 章タイトル

h3 見出し — 節タイトル

h4 見出し — 小見出し

h5 見出し — さらに小さい見出し

h6 見出し — 最小見出し

段落（p）と強調（em / strong / mark）

通常の段落テキストです。em で囲んだ語句は Cormorant Garamond の italic で表示されます。strong で囲んだ語句は背景にハイライト風の塗りが入ります。 mark で囲んだ語句は点線の下線で控えめに目立たせます。

この 3 つは 視覚的に区別できる別の装飾 として定義されています。 重要 な語と、あとで読み返したい箇所と、声に出して読みたい語句を、それぞれ書き分けてください。

リンク（a）

本文中に トップへ戻るリンクを置く例です。

リスト（ul / ol / dl）

ul — 順序なしリスト

• 項目 A
• 項目 B
  • ネスト項目 B-1
  • ネスト項目 B-2
• 項目 C

ol — 順序ありリスト

1. 最初に
2. 次に
3. 最後に

dl — 定義リスト

HTML

HyperText Markup Language の略。Web ページの構造を記述する言語。

CSS

Cascading Style Sheets の略。Web ページの装飾を記述する言語。

引用（blockquote）

The shadow is not the absence of light — it is light, of another colour. — a note, somewhere in a sketchbook

表（table）

画像（img）

区切り（hr）

区切り線の上のテキスト。

区切り線の下のテキスト。

コード（code / pre）

本文中のコードは <code> でマークアップします。

function greet(name) {
  return `こんにちは、${name}さん`;
}

ユーティリティ class

.tagcloud — タグ雲（4 段階のサイズ）

サイドメニューに置くタグ雲です。 <a class="s1"> 〜 <a class="s4"> で大きさを 4 段階に変えられます。class を付けない場合は s2 相当の大きさになります。

.banner / .banner-self — バナー枠（200 × 40）

友達サイトのバナーと、配布用の自サイトバナーを並べる枠です。リンクは <a class="banner"><img></a> 、配布用の自サイトバナーは <span class="banner banner-self"><img></span> の形で、 <div class="banners-grid"> の中に並べます。img の src を実際の 200 × 40 のバナー画像に差し替えてください。

.empty — 一覧が空のときの表示

記事の一覧がまだ無いときに、 <p class="empty"> で「まだありません」のような案内を出すための装飾です。

まだ記事はありません。

form — 入力フォーム

<form> 内の input / textarea / button / select に統一スタイルが当たります。 送信ボタンを中央寄せにしたい場合は .form-actions でラップしてください。