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

文章を修飾する(背景色、画像、枠など...)

文字や文章の修飾には 文字自体の修飾以外にも、背景色や背景画像を指定したり、枠線を表示させたりといろいろな方法があります。

文章を修飾する(背景色、画像、枠など...) 項目一覧

<fieldset>タグを使ってフィールド指定(複数エレメントのグループ化)することで、文章を枠で囲むことができます。 <fieldset&g...

ホームページやブログなどのウェブサイトに HTML言語を使って 文字や文章、画像などを表示する際に、位置(行揃え)を指定することができます。ALIGN属性による...

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

HTML文書を使った ホームページやブログなどのウェブサイトで、BORDER-WIDTHを使って文章や文字、画像を枠で囲んで表示する際に、枠線の種類を指定するこ...

HTML文書を使った ホームページやブログなどのウェブサイトで、BORDER-WIDHTを使って文章や文字、画像を枠で囲んで表示する際に、枠線の色を指定すること...

HTML文書を使った ホームページやブログなどのウェブサイトにでは、文章や文字、画像を枠で囲んで表示することができます。 四辺の太さを同一で指定する場合 &l...

マージン、パディングそれぞれについては、各項目をご覧ください。ここでは、マージンとパディングの違いについてご説明します。 いま、グレーの部分が表示領域と考えてく...

ホームページやブログなどのウェブサイトで HTML言語を使って ページを表示する際に、表示領域と本文の間に余白を入れることができます。タグで括られた領域に背景色...

ホームページやブログなどのウェブサイトで HTML言語を使って ページを表示する際に、表示領域と本文の間に余白を入れることができます。タグで括られた領域に背景色...

HTML言語を使用したホームページやブログなどのウェブサイトでは、ソースで改行しても表示には反映されません。改行を行いたい場合は、<br>タグを使用...

文章の背景色、背景画像、配置方法は、まとめて指定することができます。 <タグ名 style="background: 背景色 背景画像URL 画...

文字や文章、テーブルなどの背景画像にBACKGROUND-IMAGE を使って背景画像を指定した際に、背景画像の表示位置を指定することができます。 <タ...

文章の背景に画像を指定した際に、スクロールバーを操作しても背景画像が一緒にスクロールしない固定表示にすることができます。 <タグ名 style=&quo...

ホームページやブログなどのHTML言語を使用したウェブサイトで 文章の背景に画像を指定した場合、これを繰返し表示(タイリング)させることができます。上下左右にタ...

HTML言語を使用する ホームページやブログなどのウェブサイトでは,、ブロックタグやインラインタグで括られた文章などの領域の幅を指定することができます。幅を指定...

HTML言語を使用して表示する ホームページやブログなどのウェブサイトでは ブロックタグやインラインタグで括られた領域内の文章の 行間隔(行の高さ)を指定するこ...

HTML言語を使用して表示する ホームページやブログなどのウェブサイトでは、ブロックタグやインラインタグで括られた文章などの領域の背景に、画像を指定することが...

HTML言語を使用して表示している ホームページやブログなどのウェブサイトでは、ブロックタグやインラインタグで括られた文章などの領域に、部分的に 背景色を指定す...

2006年03月18日

<fieldset>タグを使ってフィールド指定(複数エレメントのグループ化)することで、文章を枠で囲むことができます。

<fieldset>
<legend>見出しとする語句</legend>
フィールド内の文章
</fieldset>

という形式になります

フィールド指定(複数エレメントのグループ化)

fieldsetタグを使ってフィールド指定をすると、こんなふうに四角で囲 むことができます。

このサンプルのソースは、次のようになっています。

<fieldset>
<legend>フィールド指定(複数エレメントのグループ化)</legend>
<p>fieldsetタグを使ってフィールド指定をすると、こんなふうに四角で囲
むことができます。</p>
</fieldset>

スタイル指定で、枠の色、太さ、種類、幅、高さおよび余白なども指定することができます。

続きを読む "フィールド指定して文章を枠で囲む" »

2006年02月09日

ホームページやブログなどのウェブサイトに HTML言語を使って 文字や文章、画像などを表示する際に、位置(行揃え)を指定することができます。ALIGN属性による指定、STYLEでの指定、専用タグでの指定(中央揃えのみ)などいろいろな方法があります。

ALIGN属性で指定する
<タグ名 align="行揃えの指定"></タグ名>
スタイル指定を使う
<タグ名 style="text-align:行揃えの指定"></タグ名>
専用タグを使用する(中揃えのみ)
<center></center>
  1. タグ名:P や DIV タグが一般的ですが、たいていのブロックタグが使用できます。
  2. 行揃えの指定:下記のキーワードで指定できます。
    キーワード行揃えの位置
    left左詰め
    center中央揃え
    right右詰め
    justify均等配置
    ※均等配置とは、各行の先頭文字と末尾文字の位置を揃え、各行の文字を均等に配置するものです。
    ※この指定は、スタイル指定の場合のみ使用できます。
    ※この指定は、InternetExplorer にのみ有効です。

サンプルソースです。

続きを読む "文字や文章、画像の行揃えを指定する" »

2006年02月08日

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

<タグ名 style="border:枠の太さ 枠の色 枠の種類"></タグ名>

続きを読む "文章や文字、画像を囲む枠の太さ、色、種類をまとめて指定する" »

HTML文書を使った ホームページやブログなどのウェブサイトで、BORDER-WIDTHを使って文章や文字、画像を枠で囲んで表示する際に、枠線の種類を指定することができます。BORDER-STYLEで指定します。

四辺の枠線の種類をまとめて指定する場合
<タグ名 style="border-style:枠線の種類"></タグ名>
上辺の枠線の種類のみを指定する場合
<タグ名 style="border-top-style:枠線の種類"></タグ名>
下辺の枠線の種類のみを指定する場合
<タグ名 style="border-bottom-style:枠線の種類"></タグ名>
左辺の枠線の種類のみを指定する場合
<タグ名 style="border-left-style:枠線の種類"></タグ名>
右辺の枠線の種類のみを指定する場合
<タグ名 style="border-right-style:枠線の種類"></タグ名>
  1. タグ名:P、DIV および SPAN タグなどが一般的ですが、ほとんどのブロックタグおよびインラインタグが使用可能です。
  2. 枠線の種類:下記の中から指定できます。
    枠線の種類説明サンプル
    noneなし
    hiddenなし
    dotted丸い点線
    dashed四角い点線
    solid実線
    枠線の種類説明サンプル
    double二重線
    groove凹んだような立体枠
    ridge尖ったような立体枠
    inset中央が凹の立体枠
    outset中央が凸の立体枠

サンプルです。この中から、『 double 』で枠線を指定してみます。

続きを読む "文章や文字、画像を囲む枠の種類を指定する" »

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

<タグ名 style="border-color:色番号または色名称">~</タグ名>
  1. タグ名:P、DIV および SPAN タグなどが一般的ですが、ほとんどのブロックタグおよびインラインタグが使用可能です。
  2. 色番号または色名称l:『#FF0000』などの 16進数表記、または『 red 』などの色名称で指定します。カラー見本はこちらでご紹介しています。

サンプルです。

続きを読む "文字や文章、画像を囲む枠の色を指定する" »

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中程度の太さの線
    ※正確にはデバイス依存の相対サイズ

サンプルです。

続きを読む "文章や文字、画像を枠で囲む" »

マージンパディングそれぞれについては、各項目をご覧ください。ここでは、マージンとパディングの違いについてご説明します。

いま、グレーの部分が表示領域と考えてください。ここで、

  • マージンを  上:5px、右:15px、下:5px、左:25px
  • パディングを 上:5px、右:20px、下:5px、左:10px
として表示させてみます。また、わかりやすいように、段落の背景色を黄色に、段落の枠線を太さ 10ピクセル、ライム色で表示させます。

パリ、1870年代。オペラ座では"ファントム"(オペラ座の怪人)のしわざとされる謎の事件が続いていた。
リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。
だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに...

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

<div style="margin:5px 15px 5px 25px;padding:5px 20px 5px 10px;background-color:yellow;border:10px lime solid;">
パリ、1870年代。オペラ座では"ファントム"(オペラ座の怪人)のしわざとされる謎の事件が続いていた。<br>リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。<br>だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに... </div>

このとき、マージンとパディングは下図のようになっています。マージンは、段落などのブロックタグ要素が表示される領域(グレーの部分の端末)と、それより内側に発生するブロックタグ枠(ライム色の枠線の外側)との間の空白です。またパディングは、そのブロックタグ枠(ライム色の枠線の内側)と、さらに内側に表示されるブロックタグ文書(破線で囲まれた段落文章の端末)との間の空白です。

表示領域とマージン、パディングの間には必ず、

表示領域 = 左マージン + 左枠の太さ + 左パディング + 段落文章 +
      右マージン + 右枠の太さ + 右パディング

の関係が成り立つようになります。

mag-pad.jpg

ホームページやブログなどのウェブサイトで HTML言語を使って ページを表示する際に、表示領域と本文の間に余白を入れることができます。タグで括られた領域に背景色や枠線を設定した際に、枠と文章がくっついてしまって見づらい場合などに 便利です。

上下左右の余白を同一に指定する場合
<タグ名 style="padding:上下左右の余白"></タグ名>
上下の余白、左右の余白をそれぞれ同一に指定する場合
<タグ名 style="padding:上下の余白 左右の余白"></タグ名>
上下左右の余白をそれぞれ別々の値で指定する場合
<タグ名 style="padding:上余白 右余白 下余白 左余白"></タグ名>
上の余白だけを指定する場合
<タグ名 style="padding-top:上余白"></タグ名>
下の余白だけを指定する場合
<タグ名 style="padding-bottom:下余白"></タグ名>
左の余白だけを指定する場合
<タグ名 style="padding-left:左余白"></タグ名>
右の余白だけを指定する場合
<タグ名 style="padding-right:右余白"></タグ名>
  1. タグ名:P、DIVタグなどが一般的ですが、ほとんどのインラインタグおよびブロックタグが使用できます。
  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 の高さ
    %基準書体のサイズに対する百分率
    ※正確にはデバイス依存の相対サイズ

サンプルです。いま、表示領域はグレーの部分だと思ってください。余白を指定しないと、下記のようになります。グレーの領域と、文字の範囲がぴったりしすぎて すこし見映えがわるいかもしれません。

続きを読む "余白を入れる(パディング)" »

ホームページやブログなどのウェブサイトで HTML言語を使って ページを表示する際に、表示領域と本文の間に余白を入れることができます。タグで括られた領域に背景色や枠線を設定した際に、枠と文章がくっついてしまって見づらい場合などに 便利です。

上下左右の余白を同一に指定する場合
<タグ名 style="margin:上下左右の余白"></タグ名>
上下の余白、左右の余白をそれぞれ同一に指定する場合
<タグ名 style="margin:上下の余白 左右の余白"></タグ名>
上下左右の余白をそれぞれ別々の値で指定する場合
<タグ名 style="margin:上余白 右余白 下余白 左余白"></タグ名>
上の余白だけを指定する場合
<タグ名 style="margin-top:上余白"></タグ名>
下の余白だけを指定する場合
<タグ名 style="margin-bottom:下余白"></タグ名>
左の余白だけを指定する場合
<タグ名 style="margin-left:左余白"></タグ名>
右の余白だけを指定する場合
<タグ名 style="margin-right:右余白"></タグ名>
  1. タグ名:P、DIVタグなどが一般的ですが、ほとんどのインラインタグおよびブロックタグが使用できます。
  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 の高さ
    %基準書体のサイズに対する百分率
    ※正確にはデバイス依存の相対サイズ

サンプルです。いま、表示領域はグレーの部分だと思ってください。余白を指定しないと、下記のようになります。グレーの領域と、文字の範囲がぴったりしすぎて すこし見映えがわるいかもしれません。

続きを読む "余白を入れる(マージン)" »

2006年02月07日

HTML言語を使用したホームページやブログなどのウェブサイトでは、ソースで改行しても表示には反映されません。改行を行いたい場合は、<br>タグを使用します。改行したい部分に<br>タグを挿入します。

<br>改行する
<nobr>改行を禁止する
<wbr>改行禁止タグ内で改行を行う候補を指定する

■BRタグ(改行)の使用例

続きを読む "改行する/改行を禁止する" »

2006年02月04日

文章の背景色、背景画像、配置方法は、まとめて指定することができます。

<タグ名 style="background: 背景色 背景画像URL 画像繰返し方法 画像固定方法 画像表示位置"> 背景色や画像を表示する文章</タグ名>

続きを読む "文章の背景色、背景画像、配置方法をまとめて指定する" »

文字や文章、テーブルなどの背景画像にBACKGROUND-IMAGE を使って背景画像を指定した際に、背景画像の表示位置を指定することができます。

<タグ名 style="background-position:背景画像表示位置"></タグ名>
  1. タグ名:P や DIV、SPAN タグなどが一般的ですが、他にもほとんどのブロックタグおよびインラインタグが使用可能です。
  2. 背景画像表示位置:背景画像の表示位置を、下記の絶対サイズ、相対サイズまたはキーワードから指定することができます。
    指定方法表示位置
    絶対サイズ、
    相対サイズ
    表示領域の右上から、背景画像の左上までの距離を横距離、 縦距離の順番で指定
    表示領域の各辺から、背景画像の各辺までの距離を、 左右の距離合計に対する左側距離の比率、上下距離の合計に対する上側距離の比率、の順番で指定
    キーワード 左右の配置(left , right , center)、 上下の配置(top , bottom , center)の順番で指定
    絶対サイズ、相対サイズは以下の単位が使用できます。相対サイズは、その場面で使われている書体のサイズが基準です。
    絶対サイズ意味
    inインチ( 1 in = 25.4 mm )
    cmセンチメートル
    mmミリメートル
    ptポイント( 1 pt = 1/72 in)
    pcパイカ( 1 pc = 12 pt )
    pxピクセル(表示上の 1 ドット幅)
    相対サイズ意味
    em基準書体の文字の高さ
    ex基準書体の文字 x の高さ
    %基準書体のサイズに対する百分率
    ※正確にはデバイス依存の相対サイズ

続きを読む "文字や文章、テーブルなどの背景画像の位置を指定する" »

2006年02月01日

文章の背景に画像を指定した際に、スクロールバーを操作しても背景画像が一緒にスクロールしない固定表示にすることができます。

<タグ名 style="background-attachment:固定方法"></タグ名>
  1. タグ名:P、DIV および SPAN タグなどが一般的ですが、ほとんどのブロックタグおよびインラインタグが使用可能です。
  2. 固定方法:下記のキーワードで指定できます。
    キーワード文字のスタイル
    scroll 固定しない。ユーザーがスクロールバーで画面をスクロールすると、それにあわせて背景画面も移動する。
    fixed 固定する。スクロールバーを操作しても背景画像は常に同じ位置に表示される。

続きを読む "文章の背景に画像を固定表示する" »

ホームページやブログなどのHTML言語を使用したウェブサイトで 文章の背景に画像を指定した場合、これを繰返し表示(タイリング)させることができます。上下左右にタイリング、縦方向のみの繰返し、横方向のみの繰返しから選択できます。

<タグ名 style="background-repeat:繰返し方法">背景画像を表示する文章</タグ名>
  1. タグ名: P や DIV、SPAN などが一般的ですが、その他にもほとんどのブロックタグおよびインラインタグが使用可能です。
  2. 繰返し方法:繰返し方法は、下記の中から指定できます。
    キーワード繰返し方法
    repeat上下左右にパターンを繰り返す(通常の繰返し)
    repeat-x左右にパターンを繰り返す
    repeat-y上下にパターンを繰り返す
    no-repeat繰り返さない

サンプルソースです。元画像は、この50x50ピクセルの小さな画像ですが、これを y(上下)方向に繰返し表示させます。

続きを読む "文章の背景に指定した画像を繰返し表示する" »

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 の高さ
    %基準書体のサイズに対する百分率
    ※正確にはデバイス依存の相対サイズ

サンプルソースです。

続きを読む "段落文章の横幅を指定する" »

HTML言語を使用して表示する ホームページやブログなどのウェブサイトでは ブロックタグやインラインタグで括られた領域内の文章の 行間隔(行の高さ)を指定することができます。style の line-height 指定を使います。

<タグ名 style="line-height:行の高さ">行の高さを指定する文章</タグ名>
  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 の高さ
    %基準書体のサイズに対する百分率
    数字のみ基準書体サイズに対する倍率
    ※正確にはデバイス依存の相対サイズ

続きを読む "文章の行間隔を指定する" »

2006年01月26日

HTML言語を使用して表示する ホームページやブログなどのウェブサイトでは、ブロックタグやインラインタグで括られた文章などの領域の背景に、画像を指定することができます。

<タグ名style="background-image:url(背景画像URL)">背景色を指定する文章</タグ名>
  1. タグ名:P や DIV、SPAN タグなどが一般的ですが、ほとんとのブロックタグおよびインラインタグが使用可能です。
  2. 背景画像URL:背景画像URLを相対パスまたは絶対パスで指定します。URLは、'(シングルクォート)または ”(ダブルクォート)で括っても構いません。

続きを読む "文章の背景画像を指定する" »

HTML言語を使用して表示している ホームページやブログなどのウェブサイトでは、ブロックタグやインラインタグで括られた文章などの領域に、部分的に 背景色を指定することができます。

<タグ名 style="background-color:色番号または色名称">背景色を指定する文字</タグ名>
  1. タグ名:P、DIV および SPAN タグなどが一般的ですが、ほとんどのブロックタグおよびインラインタグが使用できます。
  2. 色番号または色名称:色は、『 #008000 』などの、16進数表記または色名称で指定します。 HTML4.0で定義されているWEB基本カラー16色以外では、ブラウザによっては近似色に統合されて表示される場合もあります。またこの場合、16進数表記のほうが安全です。

続きを読む "文章の背景色を指定する" »

IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス