段落文章の横幅を指定する

HTML言語を使用する ホームページやブログなどのウェブサイトでは,、ブロックタグやインラインタグで括られた文章などの領域の幅を指定することができます。幅を指定すると、ページ幅に対して余裕があっても指定した幅で文章が折り返して表示されます。

余った余白に、他の文章を回り込ませたりすることができるので、ページのレイアウトに便利です。style の width 指定を使います。

<タグ名 style="width:文章の横幅">横幅を指定する文章</タグ名>
  1. タグ名： P や DIV、SPAN タグなどが一般的ですが、ほとんどのブロックタグおよびインラインタグが使用できます。
  2. 文章の幅：文字の大きさは、下記の絶対サイズまたは相対サイズから指定することができます。
    絶対サイズ意味
    in インチ（ 1 in = 25.4 mm ）
    cm センチメートル
    mm ミリメートル
    pt ポイント（ 1 pt = 1/72 in）
    pc パイカ（ 1 pc = 12 pt ）
    px※ ピクセル（表示上の 1 ドット幅）
    相対サイズ意味
    em 基準書体の文字の高さ
    ex 基準書体の文字 x の高さ
    % 基準書体のサイズに対する百分率
    ※正確にはデバイス依存の相対サイズ

サンプルソースです。

<div style="width:50%">
段落文書の横幅を指定すると、ページの途中で折り返して文章が表示されます。同時に、段落の背景色などをしていすると、より美しく表示できるかも知れません。
このサンプルは、段落文書の横幅を表示可能最大幅の50％に指定しています。このサンプルでは、グレーの部分が表示可能最大幅ですので、その半分で折り返して表示されます。
</div>

このソースを表示すると、次のようになります。

段落文書の横幅を指定すると、ページの途中で折り返して文章が表示されます。同時に、段落の背景色などをしていすると、より美しく表示できるかも知れません。このサンプルは、段落文書の横幅を表示可能最大幅の50％に指定しています。このサンプルでは、グレーの部分が表示可能最大幅ですので、その半分で折り返して表示されます。

段落文章の横幅指定と、位置指定を組み合わせることによって、<multicol>タグのような専用タグや、テーブルを使わなくとも 段組表示をさせることができます。

段組表示の専用タグは<multicol>ですが、これはInternet Explorerが対応していませんし、テーブルはソースが複雑になりがちなうえ、むやみに使うと表示速度が遅くなる原因となりますので、段組表示にはこの指定がおすすめです。
ブログでは一般的にバナーやメインコンテンツ、サイドバーなどが設けられていますが、これは<div>タグによるスタイル指定をを複雑に組み合わせて表現しています。
実際には、段を組んでいるわけではなく 2番目の段落が 1番目の段落の横に回り込んでいます。回り込みの解除には、style="clear:left"を使います。

このサンプルのソースは、こちらです。赤字部分で、1つ目の段落の横幅を 47％に指定しています。ついでに見やすいように、余白も 10ピクセル設けています。

そこへ、青字タグでくくられた 2つ目の段落が、左側へ回りこんでいます。緑字部分でくくられた 3つ目の段落は、style="clear:left"で回り込みを解除していますので、回り込みません。

<div style="float:left;width:47%;margin-right:10px;">
段組表示の専用タグは<multicol>ですが、これはInternet Explorerが対応していませんし、テーブルはソースが複雑になりがちなうえ、むやみに使うと表示速度が遅くなる原因となりますので、段組表示にはこの指定がおすすめです。
</div>
<div>
ブログでは一般的にバナーやメインコンテンツ、サイドバーなどが設けられていますが、これは<div>タグによるスタイル指定をを複雑に組み合わせて表現しています。
</div>
<div style="clear:left">
実際には、段を組んでいるわけではなく 2番目の段落が 1番目の段落の横に回り込んでいます。回り込みの解除には、style="clear:left"を使います。
</div>