トップページ > 初心者向けホームページ作成講座 > 段落・改行で文章を整える/文章の位置を変更
段落・改行で文章を整える/文章の位置を変更
ブラウザはテキストエディタの改行を無視する
メモ帳で文章を改行して整えても、ブラウザはその改行を無視して表示してしまいます。（赤文字部分）
<HTML>
<HEAD>
<TITLE>改行無視</TITLE>
</HEAD>
<BODY>
長い文章をエンターキーを
使って改行しても、
ブラウザは改行を無視して
表示してしまいます。
</BODY>
</HTML>
<HEAD>
<TITLE>改行無視</TITLE>
</HEAD>
<BODY>
長い文章をエンターキーを
使って改行しても、
ブラウザは改行を無視して
表示してしまいます。
</BODY>
</HTML>
以下はブラウザで表示したところ。改行されていません。
長い文章をエンターキーを使って改行しても、ブラウザは改行を無視して表示してしまいます。
エンターキーで行開を作ってもブラウザは無視します。
<HTML>
<HEAD>
<TITLE>改行無視</TITLE>
</HEAD>
<BODY>
エンターキーで行間を空けても
ブラウザは行間を無視して表示されます。
</BODY>
</HTML>
<HEAD>
<TITLE>改行無視</TITLE>
</HEAD>
<BODY>
エンターキーで行間を空けても
ブラウザは行間を無視して表示されます。
</BODY>
</HTML>
先ほどと同様、改行されていません(代わりに半角スペースが入ります)。
エンターキーで行間を空けても
ブラウザは行間を無視して表示されます。
HTMLで改行を行うには<P>〜</P>や<BR>タグを使用する必要があります。
spacer
段落タグ
段落に指定したい範囲を<P>〜</P>で囲みます。段落とは、長い文章の中の、一つの主題をもってまとまった部分です。
記述例
<HTML>
<HEAD>
<TITLE>段落タグ</TITLE>
</HEAD>
<BODY>
<P>コンピューターには、データの送受信を行うための住所があり「IPアドレス」と呼ばれています。213.222.156.12 という文字列がIPアドレスです。</P>
<P>また www.qsefthuk.co.jp というようにIPアドレスの代わりにドメイン名が指定されていることもあります。</P>
</BODY>
</HTML>
<HEAD>
<TITLE>段落タグ</TITLE>
</HEAD>
<BODY>
<P>コンピューターには、データの送受信を行うための住所があり「IPアドレス」と呼ばれています。213.222.156.12 という文字列がIPアドレスです。</P>
<P>また www.qsefthuk.co.jp というようにIPアドレスの代わりにドメイン名が指定されていることもあります。</P>
</BODY>
</HTML>
ブラウザでプレビュー
コンピューターには、データの送受信を行うための住所があり「IPアドレス」と呼ばれています。213.222.156.12 という文字列がIPアドレスです。
また www.qsefthuk.co.jp というようにIPアドレスの代わりにドメイン名が指定されていることもあります。
段落の最初だけに<P>を使い、終了タグを省略できますが、できるだけ
終了タグを付けておきましょう。
spacer
改行タグ
改行は<BR>で行います。改行したい箇所に<BR>を挿入します。
終了タグは必要ありません。
改行タグを連続で入れることにより空きができます。
記述例
<HTML>
<HEAD>
<TITLE>改行タグ</TITLE>
</HEAD>
<BODY>
長い文章をエンターキーを使って改行しても、<BR>
ブラウザは改行を無視して表示してしまいますが<BR>
改行タグを改行したい箇所に記述することで<BR>
改行が行われます。<BR><BR>
２つ改行タグを入れることにより空きが１つできます。
</BODY>
</HTML>
<HEAD>
<TITLE>改行タグ</TITLE>
</HEAD>
<BODY>
長い文章をエンターキーを使って改行しても、<BR>
ブラウザは改行を無視して表示してしまいますが<BR>
改行タグを改行したい箇所に記述することで<BR>
改行が行われます。<BR><BR>
２つ改行タグを入れることにより空きが１つできます。
</BODY>
</HTML>
ブラウザでプレビュー
長い文章をエンターキーを使って改行しても、
ブラウザは改行を無視して表示してしまいますが
改行タグを改行したい箇所に記述することで
改行が行われます。
２つ改行タグを入れることにより空きが１つできます。
ブラウザは改行を無視して表示してしまいますが
改行タグを改行したい箇所に記述することで
改行が行われます。
２つ改行タグを入れることにより空きが１つできます。
spacer
Pタグ・DIVタグで文章の位置を変える
<P>または<DIV>タグを使用して、右寄せ・左寄せ・中央揃えが可能です。<P>または<DIV>タグ内にstyle属性とtext-alignを記述します。
まず <DIVまたは<Pと入力
<DIV
<P
半角スペース(全角はダメ)を入力し、続けてstyle="と入力。
（半角スペースによる区切りは今後使うことが多いので覚えておきましょう）
「=」は、入力モードが半角になっている状態で
を押しながら
を押して入力し「"」は、入力モードが半角になっている状態で
を押しながら
を押して入力します。
<DIV style="
<P style="
続けてtext-align:と入力します。
text-align:は文章の配置位置を変更できるスタイルシートの記述です。
位置の指定方法に・・・
「text-align:left」文章を左に揃える
「text-align:center」文章を中央に揃える
「text-align:right」文章を右に揃える
があります。
ここでは「center」を入力します。
<DIV style="text-align:center
<P style="text-align:center
最後に">を入力し、文章を入れて</DIV>または</P>で閉じます。（上下のあいう・・は比較用です）
<HTML>
<HEAD>
<TITLE>DIVタグで文字揃え</TITLE>
</HEAD>
<BODY>
あいうえおかきくけこ
<DIV style="text-align:center">中央揃えの文章</DIV>
あいうえおかきくけこ
</BODY>
</HTML>
<HEAD>
<TITLE>DIVタグで文字揃え</TITLE>
</HEAD>
<BODY>
あいうえおかきくけこ
<DIV style="text-align:center">中央揃えの文章</DIV>
あいうえおかきくけこ
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Pタグで文字揃え</TITLE>
</HEAD>
<BODY>
あいうえおかきくけこ
<P style="text-align:center">中央揃えの文章</P>
あいうえおかきくけこ
</BODY>
</HTML>
<HEAD>
<TITLE>Pタグで文字揃え</TITLE>
</HEAD>
<BODY>
あいうえおかきくけこ
<P style="text-align:center">中央揃えの文章</P>
あいうえおかきくけこ
</BODY>
</HTML>
実際に表示してみましょう。
ブラウザでプレビュー（上はDIV、下はPです）
あいうえおかきくけこ
中央揃えの文章
あいうえおかきくけこ
あいうえおかきくけこ
<DIV>で囲んだ場合上下に空行はできませんが、<P>で囲んだ場合上下に空行ができます。
中央揃えの文章
あいうえおかきくけこ前の講座：使ってはいけない文字 | 次の講座：ホームページの文字・背景・リンクの色を変更する | トップページ | ページの一番上へ▲