TOPページ >  文章を修飾する(背景色、画像、枠など...) > 段落文章の横幅を指定する

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

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>

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
フィールド指定して文章を枠で囲む
文字や文章、画像の行揃えを指定する
文章や文字、画像を囲む枠の太さ、色、種類をまとめて指定する
文章や文字、画像を囲む枠の種類を指定する
文字や文章、画像を囲む枠の色を指定する
文章や文字、画像を枠で囲む
マージンとパディングの違い
余白を入れる(パディング)
余白を入れる(マージン)
改行する/改行を禁止する
文章の背景色、背景画像、配置方法をまとめて指定する
文字や文章、テーブルなどの背景画像の位置を指定する
文章の背景に画像を固定表示する
文章の背景に指定した画像を繰返し表示する
段落文章の横幅を指定する
文章の行間隔を指定する
文章の背景画像を指定する
文章の背景色を指定する
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス