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タグではなく、下記のような要素・タグが用意されています。

HTMLのアンカーリンク

　HTMLのようなマークアップ言語で最も特徴的なポイントは、文字や画像を使っていろんなページにリンクを張ることによってページを行き来することができることです。

　リンクを張るには、aタグを使います。

HTMLでリストを作成

　HTMLでは、次のようなリストを作成する為のタグ・要素も用意されています。

　ulとol、dl(data list)タグは、最初と最後だけを括り、liタグは、ul、または、olタグの内側に必要なリスト数分だけ記述、dt(data title)タグは、dd(data definition)タグに記述される定義(となる簡易説明)のタイトル用でdt/ddのセットをdlタグ内に必要数分、記述します。

　ブラウザで表示される際、ulは、四角や丸などのマークが、olは、ローマ数字やアルファベットなどの数字や文字が、各リストの先頭に付き、既定で表示される記号や数字・文字の設定を変更したい場合はCSSで行います。

　CSS・スタイル設定を使うと何でもアリになるほど柔軟にいろいろできてしまう為、標準化されている目的に沿うか沿わないかに関わらず、divタグやpタグでリスト表現することも出来てしまいますが、divはともかくpタグは、こうした用途に使うことが想定されたタグではないですし、CSSを使うにしてもHTMLには、リスト用のタグが用意されているので、それを使うのが無難かつ、たいていの場合、賢明です。

レイアウトと表組み

　さてHTMLには行と列から成る表を作る為のタグがあるので次はそれを見ていきましょう。

　ちなみに特にCSSに長けていないHTMLタグ利用者を中心に手軽なレイアウト方法としてこの作表の為のタグを使用するケースが多々あり、HTML4では、これを非推奨とし、レイアウトには、あくまでCSSの仕様を推奨していましたが、現実問題として既存の(特にすっかり放置された)サイトでのレイアウト崩壊を回避する為、勧告が近づいてきたかに見える HTML5 では、苦肉の策として table 要素の border 属性を表組み(値1)、または、レイアウト(未設定)としての利用のフラグとして利用する案があります。

Pタグ・要素詳細仕様

　ちなみにpタグの詳細仕様は下記の通りです。

要素	意味		用途	使用例
p	paragraph	段落	段落に利用	<p></p> または <p>

各要素・タグの属性

　pタグでW3C非推奨となっているタグは下記の通りです。

非推奨
属性	意味	用途
align	align/alignment	位置指定／設定値：left | center | right | justify

　pタグに設定可能な属性は下記の通りです。

属性	意味	用途
id	identify	タグ識別子・参照設定(セレクタ)
class	class	参照設定(セレクタ)
lang	language	国・地域言語を設定
dir	direction	右書き・左書きの方向指定
title	title	ブラウザ上でタグをポイントすると表示されるテキストを設定
style	style	CSSインライン設定用
※イベント	イベントハンドル	(マウス)ポインタの動作や状態に応じて処理を記述するための設定

id

　idはファイル内での一意の識別子(唯一特定できる値で区別できるもの)としての役割を持ちます。

• (アンカーリンクの識別子)
• アンカー(aタグ)以外のタグの識別子
• scriptやobjectタグの識別子
• 外部CSS設定用idセレクタ

等々です。

class

　classは、idと異なり、同じファイル内で(aタグを含む)複数のタグに同じ名称を設定することが可能です。

　また、idの値が一意という条件が満たされれば、同じタグ内に別途classを設定することも可能です。

　主な用途は

• 外部CSS設定用classセレクタ

です。

id と class

　id と class は、両方設定することも可能ですし、異なる属性値を設定することもできます(idはそのページで一意でなければならないので複数設定する場合はそれぞれの属性値が他にないものにする必要あり)。

　id と class をCSSのセレクタとして見た場合、id は class の設定より優先されます。

lang

　langは、[ lang="en" ]、[ lang="ja" ]のように国や地域の言語を設定することができます。

dir

　dirは、direction(方向)の略で右から左に向かって書く右書き(right to left)か左から右に向かって書く左書き(left to right)の記述書式の方向指定で国際化における指定可能属性です。

　dirの属性値は、right to leftの略語、[ rtl ]か、left to rightの略語[ ltr ]です。

title

　titleは、ブラウザ上でポイントされた場合に、titleに設定された属性値が表示されます。

style

　styleは、CSSのインライン設定を行うことができる属性です。

イベント

　HTMLではユーザーの操作によって何らかの処理を行いたい場合にそのタイミングにあたる属性がいくつか用意されています。

　こうしたタイミングにあたる属性はイベントハンドル、イベントハンドラなどと呼ばれ、JavaScriptやvbscriptの関数等を設定することができます。

　詳細は、イベントハンドル・イベントハンドラ参照。