このテンプレートで使えるタグをまとめたページです。
各項目の「コピー」ボタンを押すとコードをコピーできます。貼り付けて、文字の部分を自分のものに書き換えてください。
「表示」の欄は、そのコードが実際にどう見えるかの見本です。
このページはサイトを作る人向けの控えです。サーバーにアップする時は、消してしまって構いません。
1. 改行と段落
文章を書く時に一番よく使う2つです。
改行
行を折り返します。閉じタグは不要です。
1行目<br>
2行目2行目
空行
<br> だけの行を足すと、その分だけ行があきます。
1行目<br>
<br>
1行あけた行1行あけた行
段落 <p>
文章のかたまりを作ります。前後に自動で余白が入ります。
<p>ひとつめの段落です。</p>
<p>ふたつめの段落です。</p>ひとつめの段落です。
ふたつめの段落です。
コメント
ブラウザには表示されません。自分用のメモを残す時に使います。
<!-- ここはメモです。表示されません -->2. 見出し
h1が一番大きく、h6が一番小さい見出しです。h1はページに1つだけにします。
h1 〜 h6
ページの中の階層を作ります。数字を飛ばさずに使うのが基本です。
<h1>大見出し</h1>
<h2>小見出し</h2>
<h3>区切りの見出し</h3>
<h4>その下の見出し</h4>大見出し
小見出し
区切りの見出し
その下の見出し
h3 に副題を付ける
h3の中に <span> を入れると、下に小さく副題が出ます。
<h3>見出し<span>subtitle</span></h3>見出しsubtitle
3. リンク
個人サイトで一番よく使い、一番つまずきやすい部分です。
別のタブで開く
target="_blank" を足すと、新しいタブで開きます。
<a href="https://example.com/" target="_blank">サイト名</a>同じページの中を移動
飛び先に id を付けておいて、# で呼び出します。
<a href="#tobisaki">下へ移動</a>
<p id="tobisaki">ここに移動してきます</p>メールを送る
押すとメールソフトが立ち上がります。
<a href="mailto:you@example.com">メールを送る</a>4. サイトの中のリンク（相対パス）
「今いるファイルから見て、どこにあるか」を書きます。ここだけは仕組みを覚えてしまった方が早いです。
たとえば novel/y26/y260101.html にいる時、それぞれの書き方はこうなります。
site01/
├─ top.html ← ../../top.html
├─ style.css ← ../../style.css
└─ novel/
├─ novel.html ← ../novel.html
└─ y26/
├─ y260101.html ← 今ここ
└─ y260215.html ← y260215.html
・同じフォルダの中 → ファイル名をそのまま書く
・ひとつ上のフォルダ → 先頭に ../ を付ける
・ふたつ上のフォルダ → ../../ と2回重ねる
リンクや画像が出ない時は、まずこの ../ の数が合っているかを疑ってください。原因のほとんどがこれです。
5. 画像
画像を出す
src に画像の場所、alt に画像の説明を書きます。
<img src="sample_01.png" alt="作品タイトル01">alt は、画像が読み込めなかった時に代わりに出る文字です。読み上げソフトもここを読みます。空でも動きますが、書いておくと親切です。
画像に影を付ける
class="img1" を足すと、うっすら影が付きます。
<img src="sample_01.png" alt="作品タイトル01" class="img1">画像自体をリンクにする
画像を <a> で挟みます。バナーによく使う形です。
<a href="https://example.com/"><img src="banner.png" alt="バナー"></a>6. 文字の見た目
小さい字 <small>
日付や補足に。目次でよく使います。
本文の文字<small>（ここだけ小さい）</small>大きい字 <big>
少しだけ大きくします。
本文の文字<big>ここだけ大きい</big>マーカー <em>
蛍光ペンを引いたような見た目になります。
<p>ここに<em>マーカー</em>を引きます。</p>ここにマーカーを引きます。
小説本文（class="text" の中）ではマーカーが出ないようにしてあります。本文の中で使いたい時は style.css の「.text em」の行を消してください。
二重の傍線 <strong>
上下に二重線が入ります。
<p>ここが<strong>強調</strong>されます。</p>ここが強調されます。
斜体 <i>
欧文に使うと自然です。
<p><i>italic</i></p>italic
追記 <ins>
背景に薄い色が付きます。あとから足した部分の印に。
<p><ins>あとから追記した部分</ins></p>あとから追記した部分
ルビ（ふりがな）
漢字の上に読みを振ります。rt がふりがなの部分です。
<ruby>王<rt>ファラオ</rt></ruby>rp は、ルビに対応していない環境で「王（ファラオ）」と括弧付きで出すための保険です。省いても構いません。
ルビ（保険付き）
括弧を出す指定も入れた、丁寧な書き方です。
<ruby>王<rp>（</rp><rt>ファラオ</rt><rp>）</rp></ruby>7. 区切り線
3種類を用意してあります。使い分けると読みやすくなります。
hr1 — 薄い線
場面転換など、作品の中の細かい区切りに。
前の場面<hr class="hr1">次の場面次の場面
hr2 — はっきりした線
章の区切りなど、強めに切りたい時に。
前の章<hr class="hr2">次の章次の章
hr3 — 見えない区切り
線は出ず、すき間だけがあきます。余白をあけたい時に。
上<hr class="hr3">下下
8. 囲み枠
注意書きや、まとめて見せたい部分に。
p1 — 四方を囲む
全体を線で囲みます。
<p class="p1">四方を線で囲んだ枠です。</p>四方を線で囲んだ枠です。
p2 — 左右だけ
左右に線が入ります。
<p class="p2">左右だけ線が入る枠です。</p>左右だけ線が入る枠です。
p3 — 上下だけ
上下に線が入ります。
<p class="p3">上下だけ線が入る枠です。</p>上下だけ線が入る枠です。
引用 <blockquote>
よそから引いてきた文章に。左に線が入った箱になります。
<blockquote>引用したい文章をここに入れます。</blockquote>引用したい文章をここに入れます。
9. 箇条書き
順番なし <ul>
点で並べます。
<ul>
<li>ひとつめ</li>
<li>ふたつめ</li>
</ul>- ひとつめ
- ふたつめ
順番あり <ol>
自動で番号が振られます。
<ol>
<li>ひとつめ</li>
<li>ふたつめ</li>
</ol>- ひとつめ
- ふたつめ
記号を変える
class="list1" で白丸、class="list2" でローマ数字になります。
<ul class="list1">
<li>白丸で並びます</li>
</ul>
<ol class="list2">
<li>ローマ数字で並びます</li>
</ol>- 白丸で並びます
- ローマ数字で並びます
10. ページの部品
このテンプレートで使っている、まとまりを作るための入れ物です。
本文を入れる箱
小説やイラストの本文はこの中に書きます。行間が広めになります。
<div class="text">
ここに本文を書きます。<br>
</div>メニュー
ボタンが横に並びます。増やす時は item の行をコピーします。
<div class="menu">
<div class="item"><a href="top.html">Top</a></div>
<div class="item"><a href="novel/novel.html">Novel</a></div>
</div>更新履歴の箱
決まった高さの中でスクロールします。トップページで使っています。
<div class="memo">
260101<br>
サイトを公開しました<br>
</div>サイトを公開しました
補足文
少し小さめの、明朝寄りの文字になります。注意書きなどに。
<p class="note">取り扱い: ジャンル名<br>注意書きをここに書きます。</p>取り扱い: ジャンル名
注意書きをここに書きます。
ページ上部へ戻るボタン
画面の右下に貼り付いて、スクロールしても動きません。</div> の手前あたりに置きます。
<a href="#top" class="pagetop"><img src="top.png" alt="Page Top"></a>一番外側の箱に id="top" が付いている必要があります。
11. シリーズもの用
続きものの小説で使います。
各話のタイトル
「第1話 ○○」のような見出しになります。
<p class="chaptertitle">第1話 各話のタイトル</p>第1話 各話のタイトル
前後の話へのリンク
話と話を行き来するためのナビです。本文の上と下、両方に置くと親切です。
<p class="chapternav"><a href="s01_01.html">← 前の話</a> <a href="../novel.html">目次</a> <a href="s01_03.html">次の話 →</a></p>12. 記号の書き方
記号の中には、HTMLの部品として使われているものがあります。ただし、置き換えが必要なものは思っているより少ないです。
必ず置き換えるもの
この2つだけは、そのまま書くとタグの一部だと解釈されてしまいます。
< → < （小なり）
& → & （アンド）
本文に「<br>」という文字そのものを出したい時は、
<br> と書きます。
本文ならそのまま書けるもの
会話文の引用符などは、置き換えずにそのまま打って構いません。
"Why did it turn out like that..."<br>
5 > 3 です<br>5 > 3 です
英語の小説など、会話文をダブルクォートで囲む書き方でも、そのまま打って問題ありません。
タグの中で使う時だけ注意
置き換えが要るのは、タグの中の " " で囲まれた部分に、同じ記号を入れたい時だけです。囲みの終わりと区別がつかなくなるためです。
<!-- これはうまくいかない -->
<img src="a.png" alt=""Ready?"のカット">
<!-- 書き方1: " に置き換える -->
<img src="a.png" alt=""Ready?"のカット">
<!-- 書き方2: 囲みの方をシングルクォートにする -->
<img src="a.png" alt='"Ready?"のカット'>alt や title に会話文を入れる時くらいしか出番はありません。 本文を書いている限りは気にしなくて大丈夫です。
すき間をあける
HTMLでは半角スペースをいくつ並べても1つ分にまとめられてしまいます。字下げや間をあけたい時に使います。
→ 半角スペース（詰められずに残ります）
  → 全角スペース（1文字ぶんの字下げに）字下げした行 ←  
13. ページの骨組み
新しいページを作る時の、最低限の中身です。
実際は、今あるページをコピーして書き換えるのが一番早くて確実です。中身がどうなっているかだけ載せておきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ページのタイトル</title>
<meta name="description" content="ページの説明文">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="base" id="top">
<div class="header">
<h1>ページのタイトル</h1>
<h2>小見出し</h2>
</div>
<div class="menu">
<div class="item"><a href="top.html">Top</a></div>
</div>
<hr class="hr3">
<div class="text">
ここに中身を書きます。<br>
</div>
<a href="#top" class="pagetop"><img src="top.png" alt="Page Top"></a>
</div>
</body>
</html>
・<head> の中はブラウザに表示されない設定の部分です
・<body> の中が、実際に画面に出る部分です
・href="style.css" の部分は、階層が深いページでは
../style.css のように書き換えが必要です
ここに載っていないタグを使いたくなったら、「HTML タグ 一覧」などで検索すると出てきます。
ただし、このテンプレートの style.css で見た目を決めていないタグは、飾りの付かない素の状態で表示されます。
