2014年04月05日

改行と空行

改行と空行

ホームページの文章が途中で改行されていないと、音声では別に気にならないのですが、晴眼者(と弱視者)には、読みにくいページになってしまうことがあります。
段落の文章量が多い時や、一行ずつ句切って表示したい時は、途中で改行して下さい。

■前回のHTMLの見本を改行させてみる

それでは、前回 紹介したHTMLの見本を改行させてみます。

<html>
<head>
<title>
○○のはじめてのホームページ
</title>
</head>
<body>

<p>
ようこそ、
○○のはじめてのホームページへ
</p>

<p>
私は、○○と言います。
これは私のはじめてのホームページです。
</p>

</body>
</html>

これを Internet Explorerに表示させてみます。
あれっ、改行されていませんね。
そう、MyEditでEnterキーを押して改行しても、ブラウザのページでは改行されて表示されないのです。

では、どうしたらブラウザのページで改行して表示させられるかというと、「改行タグ」というのを入れてやる必要があります。

■改行タグ

<br>

これが「改行タグ」です。br は line break の略です。
この改行タグは、開始と終了のセットがなく、この一つだけで機能します。

■HTMLタグの入力支援メニュー

改行タグは、メニューの中の「基本タグ」のサブメニューの中にあります。
サブメニューを開き、上下矢印キーで「改行」を選んで Enterキーを押すと、カーソル位置に改行タグが挿入されます。

これでは面倒くさいという場合は、MS-IMEやATOKなどの日本語変換辞書のユーザー辞書に単語を登録しましょう(私もそうしています)。

私の登録の例:
登録単語 <br>
読み(入力文字) br

■改行タグの記述例

では、先ほどの例に改行タグを書き加えてみます。わかりやすいように、改行タグを、行を変えて書いています。
これで、ブラウザ上でも改行されて表示されるようになります。

<html>
<head>
<title>
○○のはじめてのホームページ
</title>
</head>
<body>

<p>
ようこそ、
<br>
○○のはじめてのホームページへ
</p>

<p>
私は、○○と言います。
<br>
これは私のはじめてのホームページです。
</p>

</body>
</html>

■空行

改行と同じように、空行もまた、MyEditでいくら空行を作っても、ブラウザには反映されません。
ブラウザ上で空行を作る = 表示させるには、次の三つの方法を使います。

1.段落 … 前回の記事で説明したように、段落タグで囲った文章は、その後に空行が一つ出来て表示されます。

2.見出し … 後の記事で紹介しますが、見出しタグを付けた文字列の後には空行が一つ表示されます。

3.改行 … 次のように、改行タグを二つ続けて入力すると、空行を一つ作ることが出来ます。

<br><br>
posted by yanikun at 14:54| Comment(0) | 日記

ページの中の本分と段落

ページの中の本分と段落

■ページの本分を記述する場所

ホームページの本分は <body> と </body> の間に記述します。

<body>

(※ページの本分)

</body>

この本分の中の記述の仕方も規則が決められていますので、これから順次説明していきます。

■段落

ホームページの本分の部分に文章を表示させる時、基本的な単位となるのが「段落」です。段落は、普通の文書と同じように、ある程度の文章のまとまりを表しています。

■段落タグ

<p> 段落 ここから
</p> 段落 ここまで

<p> の P は、段落=paragraphの頭文字から来ています。
<p> と </p>の間の文章が、ひとつのまとまり=段落としてブラウザに表示されます。すると、その括った部分と、次の段落の間に1行分のスキマ=空行が入り、ページを閲覧する人が視覚的に読みやすくなります(音声ではあまり意識されませんが)。

では、実際に段落タグを使って本文を書いてみましょう。
○○のところに、あなたの名前を入れて下さい。

<html>
<head>
<title>
○○のはじめてのホームページ
</title>
</head>
<body>

<p>
ようこそ、○○のはじめてのホームページへ
</p>

<p>
私は、○○と言います。これは私のはじめてのホームページです。
</p>

</body>
</html>

■ブラウザで確認

前回の記事で紹介した手順で、ブラウザに表示して確認してみましょう。
Internet Explorerが起動したら、下矢印キー(または Ctrlキー+下矢印キー)を押して本文を読んでみて下さい。音声ではわかりませんが、次のように、文章の間には空白行が表示されています。

ようこそ、○○のはじめてのホームページへ

私は、○○と言います。これは私のはじめてのホームページです。

■MyEditのHTMLタグの入力支援を使って効率的に入力する

段落タグは、コピー&ペーストでも挿入することが出来ますが、MyEditのHTMLタグの入力支援メニューを使うと、効率的に入力することが出来ます。

1.段落タグではさみたい文字列を範囲選択します。ここでは例として、次の文字列を範囲選択することにします。

ようこそ、○○のはじめてのホームページへ

2.Ctrlキー+Tで、HTMLタグの入力支援メニューを開きます。

3.上矢印キーで「タグの入力」を選んで、右矢印キーでサブメニューを開きます。

4.上下矢印キーで「前後 選択範囲の前後に開始 終了タグを挿入」を選んでEnterキーを押します。

5.ダイアログボックスが開いて、挿入するタグを入力するボックスにフォーカスされていますので、半角英数小文字で p と入力します。
< や > を入力する必要はありません。

6.Tabキーで「OK」のボタンに移動してEnterキーを押します。
次のように、選択範囲の前後に段落タグが挿入されます。

<p>ようこそ、○○のはじめてのホームページへ</p>

※「開始終了タグを行で挿入する」のチェックボックスにチェックを付けると、次のように挿入されます。

<p>
ようこそ、○○のはじめてのホームページへ
</p>

また、範囲選択の仕方によっても、タグが挿入される位置を調整することが出来ます。
自分の好みに合うように、試してみて下さい。
posted by yanikun at 05:05| Comment(0) | 日記