テキスト内に画像でマークを表示する例

次のように、<img scr"">をつかえば、HTLM のテキスト文の中に画像としてマークを挿入できます。マークの画像ファイルは、HTLM ファイルと同じディレクトリに置いてある画像「new_50x12.gif」とします。

これは、画像としてマーク<img src="new_50x12.gif" alt="新着" style="float:none">を入れています。

style="float:none" を書いているのは、もし、CSS で「img」にフロート(回り込み)指定がある場合は、画像の位置がずれてしまうからです。Web ブラウザには、次のように表示されます。

これは、画像としてマーク新着を入れています。

但し、この方法は、マークを変更したり更新したい場合など、全ての場所にある HTLM の記述を変更しなければならず、非常に不便です。

テキストでマークを挿入する

それでは、テキスト情報として文中にマークを挿入する方法を紹介します。スタイルシートの背景画像を利用します。「<span class="mark_new">&nbsp;</span>」が、マークを挿入する所です。テキストが何もないと背景画像は表示されないので、HTLM で見えない文字 &nbsp;(スペース)を使用しました。スタイルシートに対応していない古い Web ブラウザには、背景画像は表示されませんが、スペースが表示され違和感はないと思います。

css_mark.html のソースコード

<html>
<head>
<title>CSS テキストでマーク挿入</title>
<link rel="stylesheet" href="css_mark.css" type="text/css">
</head>
<body>
<p>
これは、「最新情報」<span class="mark_new">&nbsp;</span>で、次は、「おすすめ情報」<span class="mark_osusume">&nbsp;</span>です。 </p>
</body>
</html>

スタイルシート(css_mark.css)には、次のように書きます。「.mark_new { }」が「新着マーク」の定義です。「.mark_osusume { }」は、「おすすめマーク」の定義です。マークの画像は背景画像として「background-image:url(ファイル名);」で指定します。今回のサイズは45px(45ピクセル)位なので「padding-left:45px;」で、背景画像の右端くらいに一つスペースが来るようにしました。何も文字を指定しないと、マーク自体も表示しません。「background-position」で、マークの位置も指定できます。今回は、上付きに指定してみました。
HTLM ではスタイルシートのみ定義しているだけですので、HTLM で同じマークを何箇所使っていたとしても、マークを変更する場合は、スタイルシートの内容のみ変更すれば大丈夫です。今回のサンプルのように、外部スタイルシートを使用すれば、スペテのページのマークを一度に変更することも出来ます。

css_mark.css のソースコード

.mark_new {
    margin:0px 5px; /* 上下 左右のマージン */
    padding-left:45px;
    background-image:url(../../pict/mark/new_50x12.gif);
    background-position:0px 5%; /* 左から0px 上から5% */
    background-repeat:no-repeat;
    /* display:block; */
}

.mark_osusume {
    margin:0px 5px;
    padding-left:40px;
    background-image:url(../../pict/mark/osusume_45x15.gif);
    background-position:0px 5%;
    background-repeat:no-repeat;
}

この CSS を適用すると、上記 css_mark.html は、Web ブラウザでは、次のサンプルプログラムのように表示されます。
サンプル: CSS テキストでマーク挿入のサンプル

PR amazon

author

サイト管理人:パワーデジット
管理人への連絡フォーム

ロリポップ! レンタルサーバーは、高機能なのに236円/月~
月額125円からの「さくらのレンタルサーバ
レンタルサーバー

スポンサード リンク

このページは 

トップページ > CSS > マーク挿入