TOPページ >  文章を修飾する(背景色、画像、枠など...) > 文章や文字、画像を枠で囲む

文章や文字、画像を枠で囲む

HTML文書を使った ホームページやブログなどのウェブサイトにでは、文章や文字、画像を枠で囲んで表示することができます。

四辺の太さを同一で指定する場合
<タグ名 style="border-width:四辺の太さ">~</タグ名>
上下の辺および左右の辺の太さをそれぞれ同一で指定する場合
<タグ名 style="border-width:上下の辺の太さ 左右の辺の太さ">~</タグ名>
上下左右の辺の太さをそれぞれ個別で指定する場合
<タグ名 style="border-width:上辺の太さ 右辺の太さ 下辺の太さ 左辺の太さ">~</タグ名>
上辺の太さのみを指定する場合
<タグ名 style="border-top-width:上辺の太さ">~</タグ名>
下辺の太さのみを指定する場合
<タグ名 style="border-bottom-width:下辺の太さ">~</タグ名>
左辺の太さのみを指定する場合
<タグ名 style="border-left-width:左辺の太さ">~</タグ名>
右辺の太さのみを指定する場合
<タグ名 style="border-right-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 の高さ
    キーワード枠の太さ
    thin細線
    thick太線
    medium中程度の太さの線
    ※正確にはデバイス依存の相対サイズ

サンプルです。

この段落は、上辺を5ピクセル、右辺を10ピクセル、下辺を15ピクセル、左辺を20ピクセルの実線で指定しています。
border-width を使用する場合は、border-style で枠線の種類も指定しないと正しく表示されないことがあります。

このソースは、次のようになります。

<div style="border-width:5px 10px 15px 20px;border-style:solid;">
この段落は、上辺を5ピクセル、右辺を10ピクセル、下辺を15ピクセル、左辺を20ピクセルの実線で指定しています。<br>
border-width を使用する場合は、border-style で枠線の種類も指定しないと正しく表示されないことがあります。
</div>

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

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