HTML CSS 講座 トップページへ

ホームページ作成 いまさらHTML,CSS講座
|  Home  |  ホームページ作成の知識  |  HTML 講座  |  HTML TABLE 講座  |  スタイルシート(CSS) 講座  |  携帯サイト 作成 講座  |
[HTMLテンプレートカテゴリ] [未分類カテゴリ]

いまさらHTML,CSS講座トップ > HTML4.01 講座インデックス > 段落 p要素
様々なブックマークサービスがご利用頂けます。

段　落

HTML文書も、一般的な文書と同じく、その内容を分りやすく表現する為に、段落を組み合わせて構成します。
かつて、ワープロソフトで、文章を作成する際の段落は、連続した改行によって作成されていました。
その名残か、HTML文書においても br要素 を連続して指定する事で段落のように表現するソースが見受けられます。
これは、HTML文書における段落という意味を示すための正しい手法ではありません。
■p 要素
ソース  基本ソース
<p>ブラウザが正しい表現が行えるように、〜・・・云々</p>
<p>各要素が持つ意味に沿った正しいMarkupで・・・云々</p>
<p>文書を作成する事が大切です。・・・云々</p>
表示  表　示
※上記の表示は、フォントサイズ：12pxが設定してあります。
ポイント  基本的に段落の前後が１行空きとなります
■p要素内のテキストや画像の水平方向の指定
ソース  ソース
<p align="center">ブラウザが正しい表現が行えるように、〜・・・云々</p>
表示  表　示

ブラウザが正しい表現が行えるように、〜・・・云々

align属性で指定します。
  • left  (インライン内容を左揃えに表示)
  • center  (インライン内容を中央揃えに表示)
  • right  (インライン内容を右揃えに表示)
ポイント  align属性は、CSSの text-alignプロパティで代替指定する事が推奨されています。
ポイント  p要素は、段落を定義する要素なので、p要素の中にブロック要素を含めることはできません。

マーク スタイルシートでの様々な指定方法
■ <head>要素に記述する場合
ソース  ソース

<style type="text/css">
<!--
p { color : red ; font-size : 12px ; text-align : center ; }
-->
</style>

p要素内を、フォントカラー：赤、フォントサイズ：12px、中央揃えと指定しました。またclass指定も出来ます。
⇒ colorプロパティ　fontプロパティ
■ p要素に、style属性で指定する場合
ソース  ソース
<p style="color : red ; font-size : 12px ; text-align : center ;">フォントカラー：赤、サイズ：12px、中央揃え</p>
表示  表　示

フォントカラー：赤、サイズ：12px、中央揃え


(C) いまさらHTML CSS講座 2002-2008 All right reserved