【見出し・段落を付ける】

スポンサーリンク



文章を書こう

 
 

HTMLを使って基本的なwebページを作ることが出来たら、
今度は文章を書いてみましょう。

文章には、「見出し」「段落」をつけて書きます。
使用するタグはこちらの2つです。


・<h1>~<h6>  見出しを付けるタグ
・<p>  段落を示すタグ

まずは、この2つを覚えましょう。

見出しを付けるタグ<h>は1~6まであり、1つめの見出し(一番大きい見出し)に<h1>、2つめの見出しに<h2>…というように付けていきます。
<h6>が一番小さい見出しとなります。

使い方はこんな感じ。

<h1>〇〇〇〇について</h1>
<p>■■■■は△△△で~~~。○○○の☆☆☆が~~~。</p>

表示させてみると↓

〇〇〇〇について

■■■■は△△△で~~~。○○○の☆☆☆が~~~。

<h1>で囲んだ部分が、見出しらしくなりました。

改行をしよう

上の表示結果で、HTMLソースはすべて改行なしで書いたのに、
見出しと段落の間は改行されましたね。

しかし、段落中の文章は途中で改行されずに表示されています。

これはこれで、幅の広い画面に表示するなら良いのですが、

幅の狭いケータイの画面で見る場合や、

小さなテキストエリアに表示させる場合、

長い文章だと、途中で改行したいと思いませんか?

だからといって、以下のように改行しても、
ブラウザで表示する時には、改行されずに表示されてしまいます。

こういうHTMLソースを作成していても…

<h1>〇〇〇〇について</h1>
<p>■■■■は△△△で~~~。
○○○の☆☆☆が~~~。</p>

↑2行目と3行目の間で改行をして書いている

ブラウザで表示すると、こう!

〇〇〇〇について

■■■■は△△△で~~~。 ○○○の☆☆☆が~~~。

↑2行にしたつもりが、1行になってる!

そうなんです。HTMLでは、改行をしたい場合もタグが必要になるのです。
それが、改行させるタグ<br>です。

文章でも、複数個並べた画像でも、改行するには、<br>タグを使用します。
使い方は、改行したい部分に<br>を入れるだけです。

<br>には</ >で囲んだ終了タグはありません。単品で使用します。

<h1>〇〇〇〇について</h1>
<p>■■■■は△△△で~~~。<br>○○○の☆☆☆が~~~。</p>

↑こんな風に、<br>を入れておけば改行せず書いていても…

↓ブラウザで表示すると、改行される!

〇〇〇〇について

■■■■は△△△で~~~。
○○○の☆☆☆が~~~。

スッキリしましたね!
この<br>はかなり使うので、さっさと覚えちゃいましょう。

これで、ごちゃごちゃした文章も、キレイに読みやすくすることが出来ます。

 

 

 


まとめ&実践

では、段落、見出し、改行を使って自己紹介を作成してみましょう。

例えばこんな感じ。

<h1>自己紹介</h1>
<p>私は△△△の■■■町の出身です。<br>
趣味は○○○と◆◆◆で、特技は***です。</p>
<p>どうぞよろしくお願いします。</p>

表示させると↓

自己紹介

私は△△△の■■■町の出身です。
趣味は○○○と◆◆◆で、特技は***です。
どうぞよろしくお願いします。

ここまで出来てくると、なんだかもっと色々なことが
出来そうな気がしてきますよね!

楽しみながら、たくさん挑戦してみましょう。




スポンサーリンク
関連コンテンツ広告