pタグを使って文字を表示してみよう

このページでは、文字を表示するpタグについて

以下の内容で解説していきます。

▼HTMLの基本形

▼pタグの使い方

▼文字を太字にする、文字の下線を引く

▼fontを使って文字を装飾する（文字サイズと文字色）

▼文字の背景色を指定する

▼文字の右寄せ、左寄せ、中央寄せ

まずはhtmlの基本形を学ぼう

htmlでホームページを作成するにはまず基本の形を学ぶ必要があります。

学ぶと言ってもそんな難しいことではありません。

ただ、これだけです。

htmlでホームページを作るにはこれらを入力する必要があります。

では、その内容について簡単に説明していきます。

最初のDOCTYPE htmlというのは、ここからhtmlの内容です・・・という説明書きです。

これは特に書かなくても良いのですが、html以外にcssも同じファイル内で書いていると

どっちかわからなくなる事もあるので見分けるための文章です。

続いて見ていくと、不等号で囲われたhtmlで始まり

同じく最後には不等号で囲われた/htmlで終わっています。

これはhtmlのコードをここから入力しています。

ここまでがhtmlのコードです。という宣言をしているのです。

こっちはパソコンがhtmlのコードだと理解するために必要なものなので

欠かさずに入力しなければいけません。

また、lang="ja"　となっているのは

日本語がメインのホームページというのを表しています。

そして、これらの<>で囲われた文字列をタグと言います。

さらにhtmlと/htmlの間にはheadとbodyが存在します。

簡単に言えばheadは色々なものを準備する場所です。

今使用しているhtml以外に必要なものを取り寄せたり、

文字はどんな文字を使用すれば良いのか？

他に参照するファイルがあるのか？

といったことを入力する場所です。

そしてbodyの部分がホームページとして表示する場所となります。

まずはこれが基本の形となるのでぜひ覚えておきましょう。

文字コードについての記述も追加

文字化けしてホームページがおかしな状態になるのを回避するため、

文字コードを指定する必要があります。

これは入力しなくても問題無く表示される場合もありますが

パソコンが判断を間違えるとホームページが変な状態で表示されてしまうので

とりあえず文字コードについての記述はしておきましょう。

headタグ内に

<meta charset="utf-8">

というコードを入力するだけです。

最近はほとんどのパソコンがutf-8の文字コードを使用しているので

とりあえずutf-8としておけば問題ないかと思います。

もし、文字化けするのであればShift-JISに書き換えてください。

先ほどの基本形と合わせると、

といった感じになります。

<p></p>タグを使って文章を表示してみよう

ということで、最初は文字を表示するpタグの説明です。

説明するほどのものでもないですが、

まずはメモ帳（テキストファイル）を新規作成して

<p>おはよう！</p>

と入力してみましょう。

そしてそのテキストファイルの名前を

.txtから.htmlへ書き換えて開いてみましょう。

するとそこには「おはよう！」という

文字が表示されていると思います。

説明は以上です！

おっと、先ほどの基本形も忘れてはいけないですね。

ホームページのメイン部分、bodyの中に入れて

という形にしましょう。

先ほどのhtmlファイルの名前を.txtに直してから修正です。

これをFFFTPでサーバーへ転送すればホームページの完成です。

pタグの使い方に注意

pタグのpとは、paragraphの略で、段落というのを意味します。

そのため、改行したい場合にはpタグを閉じるのが正しい使い方です。

改行するタグとしてbrなどがありますが、それを使って文章の改行を行うのは

あまり良くないので注意しましょう。

×間違い

<p>あいうえお<br>かきくけこ<br>さしすせそ</p>

〇正しい

<p>あいうえお</p>

<p>かきくけこ</p>

<p>さしすせそ</p>

文字を太字にする、文字の下線を引く

文字を太くするにはstrongタグを使います。

strongタグはただ太字にするだけではなく

強調という意味があり、重要なポイントを読者に伝えるのが

主な役割となっています。

そのため、強調した文字が検索エンジンでもヒットしやすい効果もあるようです。

同じく文字を太くするタグとしてbタグがありますが、

ただ文字を太くするだけなので基本的にはstrongタグを

使ったほうが良いようです。使い方は

といった感じになります。表示するとこのようになります。

下線を引くことが出来るuタグも似たようなものになります。

fontを使って文字を装飾する

fontタグを使うことで文字サイズや色を指定することができます。

これが使いこなせると文字で表現できる幅がずっと広がるので

ぜひ使いこなしたい項目です。

文字のサイズを指定する

文字サイズは７段階存在し、標準サイズは３となっています。

そして１に近いほど小さい、７に近いほど大きい文字となるのです。

試しにやってみましょう。

と入力してみましょう。

結果は以下のようになります。

ちなみに、標準サイズから１段階小さくする。

標準サイズから３段階大きくするという指定方法もあります。

また、部分的に変更することもできます。

結果はこんな感じです

文字の色を指定する

同じくfontタグで文字の色を変更できます。

例：

結果：

font colorで色を指定するのですが、

#000000というようなカラーコードというもので指定しています。

カラーコードについてはネットで調べれば色々と出てきますが、

わからない場合には

<font color="red">

というように、英語で色を指定しても大丈夫です。

ただ、カラーコードのほうが細かい色の指定まで出来るので

基本的にはカラーコードのほうが良いでしょう。

カラーコードについての詳しい説明は別のページで改めて紹介したいと思います。

文字の背景色を指定する

同じように文字の背景色も指定できます。

しかし、背景色の場合はfontタグではなく、spanタグを使います。

spanタグ自体は特に意味などはありませんが、

区切りをつけて部分的に属性を付け加えたりするのに使います。

例：

結果：

ネット上でよく使われるパターンとしては

strongタグと組み合わせて文章で重要なポイントを目立たせるのに使います。

例えば、こんな感じ

右寄せ、左寄せ、中央寄せ

文字を右に寄せたりすることが出来ます。

使い方はこんな感じ、

例：

結果：

ホームページやブログでは文字を寄せて表示することが

よくあるのでぜひ覚えておきたいコードです。