HTMLでは 改行を行うためには専用のタグを利用する必要があります。、命令を書かないと改行できません。
HTML文章を編集中に Enter キーで改行をしても、実際の画面ではつながって表示されてしまいます。
改行を行うためには、<br> タグを使います。HTML入力
普通に文字を書いて
2行目もかいてみた。
3行目もかいてみた
しかしこれでは改行できない<br>
<br>
ちょっと改行してみた<br>
うまくいったかな出力
普通に文字を書いて 2行目もかいてみた。 3行目もかいてみた しかしこれでは改行できない
ちょっと改行してみた
うまくいったかな
ウェブページには、段落 を作成できます。
段落を作成すると 文章の上下に1行分 空行が開き見やすくなります。段落を作成する場合は <p> と</p> タグを使います。
HTML入力
<p>これから段落をつくってみます</p>
<p>これがいわゆる一つの段落です。</p>
<p>これが二つ目の段落です。</p>出力
これから段落をつくってみます
これがいわゆる一つの段落です。
これが二つ目の段落です。
段落と段落の間が自動的に1行空いている様子がわかりますか？
少し読みやすくなると思います。
HTMLでは、画面に水平に線を入れることができます。
線を入れたい場所に、<hr> タグを挿入します。
HTML入力
区切り線を引いてみた。
<hr>
このように引けました。出力
区切り線を引いてみた。
このように引けました。要所要所に水平線を挿入すると、文章が読みやすくなります。
タイトルなど、大きく太い文字で見出しをつけたいときに便利なのが 見出し です。
見出しはさまざまな大きさのものが用意されています用意されています。
<h1>〜</h1> が最も大きな見出しで、<h2> <h3> … <h6> の順に小さな文字の見出しになります。HTML入力
<h1> 1番大きな見出し </h1>
<h2> 2番目に大きな見出し </h2>
<h3> 3番目に大きな見出し </h3>
<h4> 4番目に大きな見出し </h4>
<h5> 5番目に大きな見出し </h5>
<h6> 6番目に大きな見出し </h6>出力
1番大きな見出し
2番目に大きな見出し
3番目に大きな見出し
4番目に大きな見出し
5番目に大きな見出し
6番目に大きな見出し
見出し<h1> や 段落<p> や 画像<img> などに、 align 属性を書き加えると、
[ 左揃え ] ・ [ 中央揃え ] ・ [ 右揃え ] で文章を配置できます。
左揃えの場合 [ left ]
中央揃えの場合 [ center ]
右揃えの場合 [ right ] を指定します。HTML入力
<h2 align="left">左揃え</h2>
<p align="left">align="left"</p>
<h2 align="center">中央揃え</h2>
<p align="center">align="center"</p>
<h2 align="right">右揃え</h2>
<p align="right">align="right"</p>出力
左揃え
align="left"
中央揃え
align="center"
右揃え
align="right"
文章中で太字を使用したい場合は<b>〜</b>タグを使います。
HTML入力
普通の文章の中に<b>ちょっとだけ</b>太字出力
普通の文章の中にちょっとだけ太字b は bold という英単語が語源です。
文章中で 斜体 を使用したい場合は <i>〜</i> タグを使います。
HTML入力
ちょっと<i>斜体を使っておしゃれな表現</i>をしてみました。出力
ちょっと斜体を使っておしゃれな表現をしてみました。i は italic が語源です。
一般的に斜体を多用すると、読みにくくなる傾向があります。
文字を強調するために、下線を引く ことができます。
<u> 〜 </u> タグを使います。HTML入力
ここは<u>重要なので</u>要チェック出力
ここは重要なので要チェックu は underline が語源です。
特定の文字の色を変えるには font タグに color 属性をつけます。
属性値として、カラーコードかカラーネームで指定します。
HTML入力 <font color="#808080">グレー</font><br>
<font color="#ff0000">赤</font><br>
<font color="#008000">緑</font><br>
<font color="#ffff00">黄色</font><br>
<font color="#0000ff">青</font><br>
特定の文字の大きさを変えるには font タグに size 属性をつけます。
HTML入力 <font size="1">サイズ1</font>
<font size="2">サイズ2</font>
<font size="3">サイズ3</font>
<font size="4">サイズ4</font>
<font size="5">サイズ5</font><br>
<font size="6">サイズ6</font>
<font size="7">サイズ7</font>
出力 サイズ1 サイズ2 サイズ3 サイズ4 サイズ5
サイズ6 サイズ7
リストを利用すると箇条書きで文字を表示できます。
箇条書きの種類によってさまざまなタグを使い分けます。
もっともシンプルなリストが記号つきリストです。
記号つきリストは、頭に「・」印をつけて箇条書きをします。
HTML入力 <ul>
<li>第1章 序章
<li>第2章 本題
<li>第3章 まとめ
</ul>
出力
- 第1章 序章
- 第2章 本題
- 第3章 まとめ
順位をつける際など、数字をつけて箇条書きをしたい場合は、番号つきリストを使用します。
HTML入力 <ol>
<li> 一番好きなもの
<li> 二番目に好きなもの
<li> 三番目に好きなもの
</ol>
出力
- 一番好きなもの
- 二番目に好きなもの
- 三番目に好きなもの
- <OL> と </OL>で囲んだ範囲が箇条書き対象になります。
- <LI> タグを先頭につけた行が1つの項目として扱われます。
各項目ごとに、見出しをつけて箇条書きをするのが、見出しつきリストです。
HTML入力 <dl>
<dt>見出し1
<dd>ここに文章を書きます。<br>たくさん書いてもうまくインデントで調整されるので見やすいかもしれません。
<dt>見出し2
<dd>ここに文章を書きます。<br>たくさん書いてもうまくインデントで調整されるので見やすいかもしれません。
</dl>
出力
- 見出し1
- ここに文章を書きます。
たくさん書いてもうまくインデントで調整されるので見やすいかもしれません。- 見出し2
- ここに文章を書きます。
たくさん書いてもうまくインデントで調整されるので見やすいかもしれません。
- <DL>〜</DL>で囲まれた範囲が箇条書き対象になります。
- <DT>に続けて書いた文章は、見出しとして表示されます。
- <DD>に続けて書いた文章は、右にずれて表示されます。