ホームページ作成 - 画像を使用して下線を引きたい

ホームページ作成ＴＯＰ > 文章や文字 > 画像を使用して下線を引きたい

画像を使用して下線を引きたい

通常文中の一部に特殊な下線を引く場合には、画像を使用して下線を引いた様に見せる事で可能になります。

下線の色や線種（点線・破線・二重線）を変更するのみの場合は、下線を引きたい（線種や色も変えたい）を参考にして下さい。

sample

文章の一部に下線を引く方法です。
文章の一部に下線を引く方法です。

ＨＴＭＬ　

スタイルシートと、画像を使用して実現します。

ホームページ作成ＴＯＰ > 文章や文字 > 画像を使用して下線を引きたい > このページのＴＯＰ　▲

スタイルシート　background-image,background

下線を通常の方法ではなく画像を使用して様々なものを表現するには、対象となる文字部分の背景に下線を表現する画像を設置する事で可能になります。

この例で使用している画像を拡大して表示すると下記２点になります。

連続して表示すると

スタイル	意味
`background-image:url(画像)`	背景に画像を設置
`background-position:bottom;`	表示位置を垂直方向の下
`background-repeat:repeat-x;`	水平方法のみに繰り返し表示

下記では、を使用した結果になります。

要素に直接書く

書き方は


<p>
文章の一部に<span style="background-image:url(画像);
background-position:bottom;
background-repeat:repeat-x;">下線を引く</span>方法です。
</p>

headに書く

書き方は


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">

 <style type="text/css">
 <!--

        span {
              background-image:url(画像);
              background-position:bottom;
              background-repeat:repeat-x;
             }

 -->
 </style>
 </head>
 <body>

        <p>文章の一部に<span>下線を引く</span>方法です。</p>

 </body>
</html>

こうなります