Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTML5
入門編

トップページ
HTML5入門編 - 文字を表示させてみよう

文字を表示させてみよう

みなさまこんにちわ。今回は文字の表示について色々解説をしていきたいと思います。

では『ボクの初めてのウェブサイトを製作中です。でもお腹空きましたのでご飯食べてきます。』という文字を表示させてみましょう。

というわけで文字を表示させる時に良く使用するタグ、『pタグ』のご紹介です。このタグは文章の段落を表し、文章に段落をつけたいときに使用するタグです。以下のように使用します。

<p>ここが段落になります。</p>

では軽く書いてみましょう。前回の記事で記述した以下のHTMLをご用意してください。ダウンロードしたい方はこちらからどうぞ。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ボクの初めてのウェブサイト</title>
</head>
<body>

</body>
</html>

準備ができましたらpタグを使って『ボクの初めてのウェブサイトを製作中です。でもお腹空きましたのでご飯食べてきます。』という文章をブラウザで表示させてみましょう。こんな感じになりますね。みなさんもご自身で記述してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ボクの初めてのウェブサイト</title>
</head>
<body>

<p>ボクの初めてのウェブサイトを製作中です。でもお腹空きましたのでご飯食べてきます。</p>

</body>
</html>

サンプルページをみてみる

テキストエディタで記述したら保存してブラウザでチェックしてみましょう。ちゃんと表示されましたでしょうか。ちゃんと文字が表示されていれば問題ないです。

さて、HTMLファイルの注意点として『改行』というものがあります。『ボクの初めてのウェブサイトを製作中です。でもお腹空きましたのでご飯食べてきます。』という文章を改行してみましょう。こんな感じですね。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ボクの初めてのウェブサイト</title>
</head>
<body>

<p>ボクの初めてのウェブサイトを製作中です。
でもお腹空きましたのでご飯食べてきます。</p>

</body>
</html>

さてこちら表示してみるとどうでしょうか。

サンプルページをみてみる

改行されていないかと思います。このようにHTMLソース上で改行をしてもブラウザで同じように改行されるわけではありません。ではこちらをちょっと書き換えてみましょう。今度はp要素を２つ用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ボクの初めてのウェブサイト</title>
</head>
<body>

<p>ボクの初めてのウェブサイトを製作中です。</p>
<p>でもお腹空きましたのでご飯食べてきます。</p>

</body>
</html>

p要素でわけてみました。こちらをブラウザで確認してみましょう。

サンプルページをみてみる

今度は改行されていますね。このように改行をさせたい場合のひとつの方法としてp要素を複数使う、というものがあります。

ただし、p要素を使った改行は注意点があります。上記のようにp要素を複数用意して文章を表示させた場合、見た目は改行されているように見えますが実は内部的には改行されているというわけではありません。p要素は『ブロック要素』というボックスとして扱われるので改行されているように見えているだけだったりします。ちょっと難しい話なので『ブロック要素』についての詳しい解説はCSSの方で解説します。

というわけでHTMLで純粋に改行させたい場合は『brタグ』というものを使用します。brタグは空要素タグなので閉じタグは必要ありません。
※空要素タグについてはこちらの記事を参照

使い方は以下のようになります。

<p>この右側で<br>改行されます</p>

では先ほどのソースをbrタグを使って改行させてみましょう。このような形になりますね。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ボクの初めてのウェブサイト</title>
</head>
<body>

<p>ボクの初めてのウェブサイトを製作中です。<br>でもお腹空きましたのでご飯食べてきます。</p>

</body>
</html>

サンプルページをみてみる

しっかり改行されましたでしょうか？このように純粋に改行させたい場合はbrタグを使用します。よく使うタグなので覚えておきましょう。

さて、今回紹介した要素やタグを使ってみていかがでしたでしょうか？

みなさんの中で
「p要素を使わないとどうなるの？」
と思った方がいらっしゃると思います。

実は『文字を表示させる』という目的だけでHTMLを記述するとなると非常に簡単です。なんとbody要素の中に文字をいれちゃえばOKだったりします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ボクの初めてのウェブサイト</title>
</head>
<body>

文字を表示させるだけのHTMLファイルです。

</body>
</html>

サンプルページをみてみる

このように文字を表示させるだけならばタグなんて使わなくても何の問題もありません。

じゃあなぜタグを使用するかというとずばり『要素を特定するため』となります。

HTMLに関連する他の言語で『CSS』や『JavaScript』というものがあります。これらを使うと文字の色を変更させたり動的なアクションを組み込んだりと色々なことができるのですが、そのような処理を組み込む際は『タグ』を使って要素を特定していく処理が一番簡単です。

例えば「p要素の文字色を赤色にして！」という処理は簡単に構築できます。しかし、もしも色を変更したい文字をタグで囲んでおらず要素として特定できない場合は「『文字を表示させるだけのHTMLファイルです。』という文字を赤色にして！」というような処理になってしまい、かなりややこしいプログラミングをしないと実現できません。

なのでHTMLソースを記述する際は必ず何かしらのタグで囲ってあげるよう書くのがスマートです。文章を表示したい場合は基本的にp要素などを使っていくようにしましょう。

この辺は勉強を進めていくと段々実感してくるかと思います。最初は難しいと思いますが少しずつタグの扱いになれていきましょうね。

次の記事ではimg要素について色々やっていきたいと思います。引き続き頑張っていきましょう。ではでは～。

この記事は桜舞が執筆致しました。