ASH | サーバ | セキュリティ | Linux | FreeBSD | DB | Web | CGI | Perl | Java | XML | プログラム | ネットワーク | 標準 | Tips集

スタイルシートで画像を使ったhrタグ

　スタイルシートを使うと、hrタグに画像を使うことができます。
　しかし、IE7以前の仕様では、画像に枠が表示されてしまい、消すことはできません。
　imgタグを使って記述すると、スタイルシートによって、デザインの変更ができなくなってしまいます。
　divタグを使えば、解決できるのですが、HTMLに意味の無いdivタグを書くことは、避けたいところです。

　そこで、 <hr class="img***"> を <div class="img***"></div> に変換するJavaScriptプログラムを作成してみました。 JavaScriptがOFFの場合でも、枠が表示されるだけですので、特に問題は発生しません。
　JavaScriptを汎用的に利用可能とするため、クラス名がimgで始まるクラスのみ、自動変換する仕様となっています。プログラムの著作権は放棄していませんが、そのまま利用したり、カスタマイズして利用することは、自由に行って頂いて構いません。
　この画像を使ったhrタグは、IE8, IE7, IE6, Firefox3, Safari4, Opera10, Sleipnir2で動作することを確認済みです。

画像を使ったhrタグのサンプル

画像を使ったhrタグ（IE7以前では、divタグに変換）

クラス指定をしたhrタグ（変換対象外）

クラス指定のないhrタグ（変換対象外）


画像を使ったhrタグのHTMLソース

　上記の「画像を使ったhrタグ」を利用するには、下記のようにヘッダを記述します。
HTMLヘッダの記述 
<link rel="stylesheet" type="text/css" href="hr_img.css" />
　IE7以下に対応する場合、コンディショナルコメントで、hr2div.jsを利用する必要があります。 コンディショナルコメントを利用していますので、その他のブラウザではコメントとして扱われます。
HTMLヘッダの追加記述（IE7対応の場合） 
<!--[if lt IE 8]>
  <script type="text/javascript src="hr2div.js""></script>
<![endif]-->
　画像を使ったhrタグは、下記の例のようにHTMLを記述します。
　hrタグに、imgで始まるクラス名を指定するだけで、利用できます。
HTMLの記述 
<hr class="img_dot" />

<hr class="dot" />

<hr />

スタイルシートの記述方法

　スタイルシートには、下記のように記述します。
　スタイルシート記述上の注意は、hr.img***, div.img***のように、divタグのクラスに対しても、同じスタイルを指定する必要があります。
　hr2div.jsで、スタイルの定義もコピーする方法もありますが、そこまでは対応していません。
スタイルシートの記述 
hr.img_dot, div.img_dot {
  background: transparent url(img/bg_hr_dot.gif) repeat-x center center;
  height: 6px;
  border: none;
}
hr.dot {
  background: #000060;
  height: 4px;
  border: none;
}

JavaScriptのソース（hr2div.js）

　hr2div.jsのソースを紹介します。
　HTMLの中から、imgで始まるクラス名のhrタグを探し、同じクラス名のdivタグを作成し、置き換えているだけです。
　プログラムの著作権は放棄していませんが、そのまま利用したり、カスタマイズして利用することは、自由に行って頂いて構いません。
JavaScriptのソース 
/* hr to div converter v1.0 */
/* Copyright(C) ASH (http://ash.jp/) */

window.onload = function() {
  hr2div();
}

/* convert hr to div */
function hr2div() {
  var hr_ary = document.getElementsByTagName("hr");
  for (var i = 0; i < hr_ary.length; i++) {
    var hr = hr_ary[i];
    if (/^img/.test(hr.className)) {
      var div = document.createElement("div");
      div.className = hr.className;
      hr.parentNode.replaceChild(div, hr);
    }
  }
}

[WebデザインTips] [ASHのホームページ]
Copyright (C) 1995-2009 ASH.
URL:http://ash.jp/ Mail:info@ash.jp