h1タグの内容が入ります

サイトトップ　>　ページ名

h2（見出し）を使うとこうなります。

ここにテキストを入力していきます。
ここにテキストを入力していきます。ここにテキストを入力していきます。

ここにテキストを入力していきます。
ここにテキストを入力していきます。ここにテキストを入力していきます。

h3（見出し）を使うとこうなります。

ここにテキストを入力していきます。
ここにテキストを入力していきます。ここにテキストを入力していきます。

ここにテキストを入力していきます。
ここにテキストを入力していきます。ここにテキストを入力していきます。

画像の回り込みの例（画像が左、テキストが右）

画像を回り込ませたい時には、<img class="right" />で画像を囲めば、画像が右、テキストが左の配置が可能です。

rightをleftにすれば、画像が左、テキストが右にできます。

画像よりテキストが長くなれば、必然的に画像のしたに回り込むような設定になっています。 画像よりテキストが長くなれば、必然的に画像のしたに回り込むような設定になっています。

画像よりテキストが長くなれば、必然的に画像のしたに回り込むような設定になっています。

画像の回り込みの例（画像が右、テキストが左）

画像を回り込ませたい時には、<img class="right" />で画像を囲めば、画像が右、テキストが左の配置が可能です。

rightをleftにすれば、画像が左、テキストが右にできます。

画像よりテキストが長くなれば、必然的に画像のしたに回り込むような設定になっています。 画像よりテキストが長くなれば、必然的に画像のしたに回り込むような設定になっています。

画像よりテキストが長くなれば、必然的に画像のしたに回り込むような設定になっています。

どこかから引用する場合

ここに引用の文章を入れましょう。
引用なのでそのまま引用してくださいね。

引用元：引用もとのサイト名

その後は普通にこうやってテキストもかけます。
引用に対する意見なども書くこともできます。

定義タグ（dl、dt、dd）

定義タグを使った例です。
dlで囲って、定義をdtで囲い、その説明をddで記載します。

定義の見出し
定義の説明を書きましょう。dtにまつわることを書いたりしていきます。
⇒ リンクを入れる場合はこのように。
画像を使いたい場合
まず画像に、class="left"を与えます。そして、次は普通にテキストを入力して、最後に「dl」にclass="clearfix"を与えます。clearfixは、floatを使った際の回りこみ解除の役割を果たします。
⇒ 画像を使ってもリンクは入れれます。

チェックリストしよう（ulとli、olとli）

ここではチェックリストの使い方です。
ulで囲って、それぞれ li を使ってリスト化していきます。

テーブルタグを使う場合

テーブルタグを使う場合は以下のように使ってください。
tableで囲って、trが行です。thはその中でも見出しの役割を果たし、tdがそれぞれの列を成します。

見出し１ 見出し２ 見出し３
見出しA 項目１ 項目２
見出しB 項目３ 項目４

テーブル内の各サイズは、必要な分だけ計算して入力してください。

その他、文字の装飾などについて

使える文字のカラー

それぞれ使える文字のカラー一覧。

赤色の文字
青色の文字
緑色の文字
黄色の文字
紺色の文字
黒色の文字
灰色の文字
紫色の文字
桃色の文字
橙色の文字
白色の文字
白色や黄色は、下にあるように背景付けて使いましょう

使える文字の背景カラー

使える文字の背景色一覧(文字は白で統一）

赤色の背景
青色の背景
緑色の背景
黄色の背景
紺色の背景
黒色の背景
灰色の背景
紫色の背景
桃色の背景
橙色の背景
白色の背景

文字のサイズの指定

使える文字のサイズ指定の一覧

90%の文字
100%の文字
110%の文字
120%の文字
130%の文字
140%の文字
150%の文字
160%の文字
170%の文字
180%の文字
190%の文字
200%の文字

テキストの装飾

打消し線や下線など装飾について

下線を引きます。
打ち消し線を引きます。

テキストの位置指定

右寄せや中央揃えなどの位置について

左寄せ

中央揃え

右寄せ

色々な使い方を駆使して、サイトを作っていきましょう。