トップページ > ホームページ作成 > テキストでマーク挿入
スタイルシートを利用したホームページの作成方法です。「テキストでマークを挿入」では、「新着情報」や「おすすめ」などのマークをテキストとして挿入する方法をお教えします。スタイルシートで設定しますので、数箇所のマークを一度に変更したりする時や、SEO対策にもなります。
画像でマークを表示する例
もちろん<img scr"">をつかえば、画像としてマークを挿入できます。マークの画像ファイルは、「../img/mark/new_50x12.gif」とします。HTLMファイルに
これは、画像としてマーク<img src="../img/mark/new_50x12.gif" alt="新着" />を入れています。
と書けば、「img」にフロート（回り込み）指定が無い場合は、問題なく次のように表示されます。
これは、画像としてマーク
を入れています。
でも、「img」にフロート指定があると、マークが左に行ったり右に行ったりして思うところに表示されません。その場合は、マークにスタイルシートで「float:none;」をいちいち指定する必要があります。また、マークを更新したい場合など全ての場所にあるイメージファイルを変更しなければならず、非常に不便です。
テキストでマークを挿入する
それでは、「img」のフロート指定を気にせずに、テキスト情報としていつも文中にマークを挿入する方法を紹介します。スタイルシートの背景画像を利用します。次は、外部スタイルシートを利用したHTLMファイルの例です。「<link href="css_mark.css" rel="stylesheet">」で、外部スタイルシート（css_mark.css）を読み込んでいます。「<span class="mark_new"> </span>」が、マークを挿入される所です。テキストは、HTLMで見えない文字 （スペース）を使用しました。続いて書いてある[<span class="d_non">「新着」</span>]は、スタイルシートに対応していないブラウザにはマークの変わりに「新着」を表示させるために付け加えてあります。SEO的にも意味があると思います。古いブラウザを気にしない場合は、この部分は、無くてもかまいません。（2006年7月29日追加：この方法は、間違っているかも知れません。スタイルシートで文字を見えなくすると検索エンジンが隠し文字と思い、ページのランクが下がる恐れがあります。注意してください。ただいま、検証中です。）
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<link href="css_mark.css" rel="stylesheet type="text/css"">
<title>文章の中にマーク</title>
</head>
<body>
<h1>文章の中にマークを入れる</h1>
<p>
「最新情報」や「おすすめ」等のマークが入ったページです。
</p>
<ul>
<li>これは、「最新情報」<span class="mark_new"> </span><span class="d_non">「新着」</span>です。</li>
<li>これは、「おすすめ情報」<span class="mark_osusume"> </span><span class="d_non">「おすすめ」</span>です。</li>
</ul>
</body>
</html>
外部スタイルシート（css_mark.css）には、次のように書きます。「.mark_new { }」が「新着マーク」の定義です。「.mark_osusume { }」は、「おすすめマーク」の定義です。マークの画像は背景画像として「background-image:url(ファイル名);」で指定します。今回のサイズは45px（45ピクセル）位なので「padding-left:45px;」で、背景画像の右端くらいに一つスペースが来るようにしました。何も文字を指定しないと、マーク自体も表示しません。「background-position」で、マークの位置も指定できます。今回は、上付きに指定してみました。
HTLMではスタイルシートのみ定義しているだけですので、HTLMで同じマークを何箇所使っていたとしても、マークを変更する場合は、スタイルシートの内容のみ変更すれば大丈夫です。
「.d_non { }」では、マーク指定に続けて書いた文字を消しています。スタイルシートに対応していないブラウザでは、この文字のみ表示されることになります。
.mark_new {
margin:0px 5px; /* 上下 左右のマージン */
padding-left:45px; /* マーク画像の幅を指定 */
background-image:url(../../img/mark/new_50x12.gif); /* マーク画像 */
background-position:0px 5%; /* 画像は、左から0px上から5% */
background-repeat:no-repeat; /* 画像の繰り返し無し */
}
.mark_osusume {
margin:0px 5px;
padding-left:40px;
background-image:url(../../img/mark/osusume_45x15.gif);
background-position:0px 5%;
background-repeat:no-repeat;
}
.d_non {
display:none; /* 文字を表示しない */
}
テキストでマークを入れた上記リストを実行するサンプルは、「文章の中にマーク」にあります。
がお薦め、
PHP5を使うなら