Pタグ・要素

Pタグ・要素とは

　ホームページ作成方法1/ホームページ作成方法2/ホームページ作成方法3までの3ステップで文章をhtmlファイルとして記述できるようになったところでちょっぴり高度な構造化とレイアウト編第一弾です。

　ここで使用するタグは<p>です。

　pタグとは、段落を構成する為のタグでparagraph(パラグラフ＝段落)の頭文字です。

◆例題５

　というわけで<p></p>となります。

　早速使ってみましょう。

　これを保存して、表示っと。。。おや？何もかわりませんねぇ。。でもご心配なく。

　何も指定しないと『左揃え』が指定されたのと同じ状態になります。

　ですから『例題５』は見た目は何も変わっていませんが、ブラウザに「<p>から</p>までは段落だよ」と教えていることになります。

　このタグはお約束事に沿わず同じタグで必ずしもくくらなくてよいタグですが、やはりくくるくせをつけておくためにもここではくくることにします。

　ちなみに HTML / Hypertext Markup Language (単なる文字列に印付けすることで多様な使い方ができるすっごい文字列になっちゃう言語)は、それだけの手間をかけたとしてもそれ以上に有用となる様にWeb利用上の仕様として誕生し、実際に重宝するからこそ広く世界中で利用されているので仮に今はピンと来なくても手間をかけておく価値は十二分にあります。

pタグで表示位置を指定

　pタグで括っただけでも構造化とレイアウトをしたことになりますが、レイアウトというからには、位置決めもできるはず。

　さてそれでは、位置を指定するにはどのようにしたらよいでしょうか？

<p align="center"></p>

　実はHTMLの要素の開始タグにはアトリビュート(属性)といわれるものを持たせることができます。

　例えば『中央揃え』にしたい場合には、 align 属性(非推奨、後述)を使って次のように記述します。

◆例題６

　これをhtmlファイルとして保存して開くと文章が中央揃えになっているはずです。

　但し、「やったー！できた！ホームページって簡単！」と一行で表示されていると思いますが、それが正常です。

　htmlファイル内での改行はブラウザ上では反映されません。

　もし、ブラウザでの表示上も改行を入れたい場合には<br>タグを入れましょう。

　どうですか？できましたか？

　『右揃え』にしたい場合は「center」の部分を「right」に『左揃え』にしたい場合は「left」にそれぞれ変更すれば、段落の配置を変えることができるようになります。

　このように「align=""」は横方向に対して位置決めをする事ができるもので他のタグでも汎用的に使用可能な属性として定義されていましたが、後に仕様を決めているW3CのHTML4としては非推奨とされ、代わりにCSSを利用することが推奨されますので大きく3通りの指定方法があるCSSを覚えたらCSSで設定しましょう。(ちなみにCSSでは属性のことをプロパティと呼びます。)

　例えばHTMLの align 属性と同様の効果を持つCSSプロパティには、「text-align プロパティ」があります。

　text-alignプロパティを例えばスタイル情報インライン設定によってテキスト位置を調整する場合、このように書きます。

※尚、他1つを含め、3つあるCSS設定方法の内、その利便性からもCSSスタイルシート外部ファイルの利用がより推奨されていますので後ほど外部CSSの作り方を覚えたら、pタグに限らず、出来得る限り、そちらで位置決めしましょう。

HTMLのコメント

　HTMLでは、ブラウザ上に表示されない編集上のコメントを書くことができます。

　コメントを書く場合には、このように「<!--」と「-->」(いずれも[-]ハイフン2つ)でくくった単一行または複数行をコメント化する事ができます。

　各例題の「必要に応じて doctype 変更」部分もコメントになっています。

引用文

　URLや参考文献、文章など引用には、pタグではなく、下記のような要素・タグが用意されています。

関連リンク