site name

tags

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

見出し（h1 〜 h6）

h1 見出し — サイトタイトルクラス

h2 見出し — 章タイトルクラス

h3 見出し — 節タイトルクラス

h4 見出し — 小見出し

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

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

通常の段落テキストです。em で囲んだ語句は italic + キャラメル色で表示されます。 strong で囲んだ語句は太字 + 深煎り色の下線塗りになります。 mark で囲んだ語句はラテ色の蛍光ペン風に下塗りされます。

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

リンク（a）

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

リスト（ul / ol / dl）

ul — 順序なしリスト（行頭がコーヒー豆になります）

ol — 順序ありリスト

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

dl — 定義リスト

HTML
HyperText Markup Language の略。Web ページの構造を記述する言語。
CSS
Cascading Style Sheets の略。Web ページの装飾を記述する言語。

引用（blockquote）

いい豆は、挽く前から香りが違う。淹れる時間まで含めてコーヒーだと思う。

表（table）

豆 焙煎 感想
エチオピア 浅煎り 華やか
マンデリン 深煎り どっしり

画像（img）

サンプル画像（プレースホルダー）

区切り（hr）

区切り線の代わりにコーヒー豆がひと粒置かれます。

区切りの下のテキスト。

コード（code / pre）

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

function brew(beans) {
  return `本日のコーヒー: ${beans}`;
}

ユーティリティ class

.inline-list — 横並びリンクリスト

<ul class="inline-list"> でリンクや項目を横並びに並べる装飾です。top ページの links セクションで使われているクラスですが、本文中でも利用できます。

.news-list — 日付つきのお知らせリスト

<ul class="news-list"> で日付 + 短文の一覧を作る装飾です。top ページの news セクション以外でも利用できます。

form / .form-actions — 入力フォーム

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

Top