2009年5月アーカイブ

hrタグは横罫線を引くものですが、ブラウザによって見た目が異なりますし、デザイン的にもあまりよくありません。

そこで、画像を使うことにより見た目も美しく、ブラウザの差異も無くしてしまいましょう。

しかし、問題があってhrタグの横罫線は普通borderで指定されているのですが、IE6だけ違うんです。なので、IE6だけハックを使って別指定をします。

上記の理由から本当はhrタグをdivタグで囲んでしまったりしたほうがいろいろと便利なのですが、余計なタグを入れるのはソースコードが煩雑になるし、手間もかかりますよね。なので、今回はhrタグのみでやってみます。

また、画像を繰り返して使うのではなくひとつの画像を使います。

サンプル画像
横罫線の画像

(X)HTMLコード

<hr />

hr要素のデザインを個別に指定する場合はclassなどで指定してください。

CSSコード

/* IE6用 */
*html hr {
   display :list-item;
   width:0;
   margin-left:-10px;
   list-style :url(hr_line.gif) inside;
}

hr {
   border:0;
   height: 3px;
   background:url(hr_line.gif) 50% 0  no-repeat;
}

画像がセンタリングされるように指定してあります。

「*html」を先頭に記述することによりIE6にしか有効になりません。IE6ではどうやってもデフォルトの罫線が消えないので、トリッキーなやり方ですが、displayをリスト形式(list-item)にすることで罫線を消します。そして、画像をリストのマークとして表示します。

リストの位置(list-position)をinsideにして、左マージン(margin-left)を-10pxにすることで、画像をセンタリングすることができます。これはデフォルトでリストマークの横幅が10pxのためだと思います。

IE6以外では、hrの罫線はborderを0にすることで消せるので、画像を背景として表示します。注意点は、内容物が0なので、画像分の高さをheightで指定します。

参考サイト

floatを使用して横並びにした多段カラムの高さが違う場合、ボックスの下辺を揃えるには画像を利用します。

サンプル

左のボックス
余白
余白
余白
余白
余白
真ん中のボックス
右のボックス

(X)HTMLコード

<div class="wrapper">
   <div class="contents">左のボックス<br />余白<br />余白<br />余白<br />余白<br />余白</div>
   <div class="contents">真ん中のボックス</div>
   <div class="contents reset">右のボックス</div>
</div>

CSSコード

div.wrapper {
float:left;
width:320px;
background:url(bg_bottom.gif) 0 100% no-repeat;
}

div.contents {
float:left;
width:100px;
margin-right:10px;
border-top:1px solid #333;
}

div.reset {
margin-right:0;
}

カラムを横並びにする方法は当サイトの以下の記事を参考にしてください。

2段カラムの作り方(float編) - CSSデザインノート

カラムを囲っているdiv要素に以下のような画像を指定します。ポイントは、縦幅が高くてもきちんと表示されるように長めに画像を作ることです。

枠の画像

今回は四角い枠で囲んでいるタイプなので、各カラムの上部にborderをつけていますが、画像でも問題ありません。

カラムの右側にmarginで余白を空けているのですが、最後のカラムの右側のmarginは0にしておきます。これはカラム落ちになるのを防ぐためです。

ここでは記述していませんが、このfloatボックスの次に何か要素がある場合、その要素も回り込んでしまうので、「clear:both;」で回り込みを解除してください。

この方法は、画像をきっちり1pxもずらさずに作らないといけないので結構面倒ではあります。

私もきちんとしたものを作ってはいないのですが、ホームページを作る際、コーディングガイドラインがあると、複数人でも統一した書き方が出来、メンテナンスも楽になります。

秀逸なコーディングガイドラインを作っている方がいらっしゃるので今回はそちらを紹介します。

山田あかねさんのCSSのコーディングガイドラインです。山田さんは、エスカフラーチェのWebデザイナーさんで、書籍や雑誌にもよく記事を書いてらっしゃいます。

上ノ郷谷太一さんのCSSのコーディングガイドラインです。上ノ郷谷さんはMovableTypeでお馴染みのシックス・アパートに勤務されている方です。

あと、こちらはガイドラインというか、ガイドラインのまとめのような記事ですが、非常によくまとまっています。

基本的な2段カラムのテンプレートの作り方を紹介します。ヘッダー、コンテンツ(2段カラム)、フッターからなるテンプレートです。

(X)HTMLコード

<div id="top">
   <div id="header">header</div>
   <div id="contents">
      <div id="mainContents">mainContents</div>
      <div id="subContents">subContents</div>
  </div>
   <div id="footer">footer</div>
</div>
</body>
</html>

CSSコード

body {
   margin:0;
}

div#top {
   width:750px;
   margin:0 auto;
}

div#contents {
   float:left;
   width:750px;
}

div#mainContents {
   float:left;
   width:600px;
}

div#subContents {
   float:right;
   width:150px;
}

div#footer {
   clear:both;
}

HTML、CSSは最低限必要なソースコードです。レイアウトを体裁したい場合は、paddingなどの指定も必要となります。

まずHTMLソースコードですが、テンプレート全体を囲んだほうがデザインに幅が出ます。ここでは<div id=#top"></div>になります。なぜid名がtopなのかというと、ページのトップの戻りリンク先にも併用できるためです。別の名前でももちろん構いません。

2段カラム部分も囲みます。<div id="contents"></div>の部分です。これも先ほどと同様デザインに幅が出るためです。例えば、2段カラムの縦の長さが違っても、カラムの一番下まで背景画像を繰り返し表示できます。

続いて、CSSソースコードを説明します。2段カラム部分(<div id="mainContents"></div>と<div id="subContents"></div>)はfloatにより横並びにします。

また、2段カラムを囲んでいるcontetnsにもfleatを指定します。これによりcontetns領域が2段カラムをちゃんと囲めるようになり、カラムの一番下まで背景画像を繰り返し表示することなどが可能になります。これはCSSの仕様により、フロートボックスの親要素(この場合はdiv#contetns)は子要素の中身がないと計算されてしまうので、div#contetns自身にもfloatを適用することにより子要素の中身が計算されるようになります。

そしてdiv#footerで「clear:both;」を指定して回り込み(というか浮いている状態)を解除します。

注意点ですが、floatを指定した要素には必ずwidthにauto以外の値を指定しなければ内容が0になってしまいます。

CSS2.1の仕様では、内容に合わせて縮めた値になります。

10.3.5 Floating, non-replaced elements
If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.

Visual formatting model detailsより引用

当blogの以下の記事(4.マージンボックス)でも紹介しているように、隣接しているあるいは入れ子になっているボックスにおいて、垂直方向のmarginは相殺されます。marginが相殺されることをmargin collapsingsというらしいです。

ここではdivのボックスの中にp要素が二つ通常フローで流し込まれているときに、どのように垂直marginの相殺に気をつけて余白をとるか考えてみます。

サンプル

サンプルボックス

div要素をボックスA、上段のp要素をボックスB、下段のp要素をボックスCとしたとき、ボックスAとボックスBあるいはボックスCの関係は「入れ子」関係にあります。一方、ボックスBとボックスCの関係は「隣接」関係にあります。

「入れ子」関係にある場合は、内包している要素、つまりボックスAにpaddingを指定して余白を設けます。

「隣接」関係にある場合は、隣接する側には片方のブロックだけにmarginを指定して余白を設けます。

(X)HTMLコード

<div>
   <p>
      ボックスB
   </p>
   <p>
      ボックスC
   </p>
</div>

CSSコード

div {
   padding:10px;
   background:#E2DEDF;
}

p {
   margin:0 0 10px 0;
   background:#FFCAD8;
}

サンプル

サンプルボックス

しかしこれでは、下段のp要素の下に必要以上に余白が空いてしまいます。なので、下段のp要素だけ「class="bottom"」を記述し下方のmarginを0にします。

(X)HTMLコード

<div>
   <p>
      ボックスB
   </p>
   <p class="bottom">
      ボックスC
   </p>
</div>

CSSコード

div {
   padding:10px;
   background:#E2DEDF;
}

p {
   margin:0 0 10px 0;
   background:#FFCAD8;
}

p.bottom {
   margin:0;
}

ショートハンドプロパティとは、1つのプロパティタグを使用して複数のプロパティ値を指定するプロパティのことです。よくわからないと思うので、サンプルを交えながら説明していきます。

1.margin関連プロパティを一括指定する

marginでは個別にtop、bottom、left、rightを指定することができますが、これをmarginというショートハンドプロパティを用いることで一括で指定できます。

その際、以下のような組み合わせで指定できます。

CSSコード

/* 上下左右、全て10px */
margin:10px;

/* 上下10px、左右20px */
margin:10px 20px;

/* 上10px、左右20px、下30px */
margin:10px 20px 30px;

/* 上10px、右20px、下30px、左40px */
margin:10px 20px 30px 40px;

2.padding関連プロパティを一括指定する

paddingもmarginと全く同じなので説明は割愛します。

CSSコード

/* 上下左右、全て10px */
padding:10px;

/* 上下10px、左右20px */
padding:10px 20px;

/* 上10px、左右20px、下30px */
padding:10px 20px 30px;

/* 上10px、右20px、下30px、左40px */
padding:10px 20px 30px 40px;

3.list-style関連プロパティを一括指定する

list-styleではtype、image、positionを指定できます。省略したものは初期値が指定されます。順番も順不同です。

大抵、typeとimageのどちらかを指定し、あまりposionも変更することはないと思うので、以下のような使い方が多いかと思います。

CSSコード

list-style:none;

4.background関連プロパティを一括指定する

backgroundではcolor、image、repeat、position、attachmentを指定できます。省略したものは初期値が指定されます。順番も順不同です。ただし、posionは横軸、縦軸の順に指定します。

CSSコード

background:transparent url(img.gif) no-repeat 0 100% fixed;

5.border関連プロパティを一括指定する

borderには上下左右のwidth、style、colorを指定できます。そのため、様々なショートハンドプロパティがあります。

CSSコード

/* 線の幅が上1px、右2px、下3px、左4px */
border-width:1px 2px 3px 4px;

/* 線のスタイルが上solid、右solid、下solid、左dotted */
border-style: solid solid solid dotted;

/* 線の色が上red、右#ddd、下green、左#000000 */
border-color: red #ddd green #000000;

/* 線の上下左右が幅1px スタイルsolid 色red */
border:1px solid red;

/* 線の上が幅1px スタイルsolid 色red */
border-top:1px solid red;

/* 線の下が幅1px スタイルsolid 色red */
border-bottom:1px solid red;

/* 線の左が幅1px スタイルsolid 色red */
border-left:1px solid red;

/* 線の右が幅1px スタイルsolid 色red */
border-right:1px solid red;

6.font関連プロパティを一括指定する

font-style、font-variant、font-weight、font-size/line-height、font-famillyの順で指定できます。line-heightはfont~で始まらないし、直前に「/」を入れないといけないので注意が必要です。

fontに関するショートハンドプロパティはあまりお勧めしません。なぜならプロパティの数も多い上に順番が決まっているからです。ただし、font-style、font-variant、font-weightの3つは順番を入れ替えて指定できます。順番を間違えてしまうとCSSが適用されないので注意です。

また、フォントの太さと種類は省略不可です。

CSSコード

font:italic small-caps 100%/1.4 Osaka, verdana, sans-serif;

3年くらい前(2006年頃)までは、メニューのロールオーバーにCSSを使うことがトレンドでした。しかしながら、テキストを画面外に飛ばし代替画像を表示する手法(画像置換法)のため、スパム行為に抵触するんじゃないかとの懸念から現在ではあまり使われなくなりました。

現在ではCSSの代わりにJavascriptを使用しているところが多いと思います。AJAX(エイジャックス:JavaScriptのHTTP通信機能を利用して非同期通信をするもの)の流行からJavascriptが脚光を浴び、「jQuery」や「Prototype」といったライブラリが登場し、多くのところからロールオーバー機能のついたライブラリが公開されています。

JavascriptもブラウザのほうでOFFにしていたら無効になるわけで、CSSもJavascriptも一長一短なところがあるのが現状です。

さて本題ですが、このロールオーバーの手法は、テキストにリンクがはってあることが条件になります。

サンプル

(X)HTMLコード

<ul class="menu">
<li class="menu1"><a href="">メニュー1</a></li>
<li class="menu2"><a href="">メニュー2</a></li>
<li class="menu3"><a href="">メニュー3</a></li>
</ul>

CSSコード

ul.menu {
   margin:0;
   padding:0;
}

ul.menu li {
   float:left;
   text-indent:-9999px;
   overflow:hidden;
   list-style:none;
}

ul.menu li a {
   display:block;
   width:150px;
   height:30px;
}

li.menu1 a:link {
   background-image:url(menu01.gif);
}

li.menu1 a:hover {
   background-image:url(menu01_on.gif);
}

li.menu2 a {
   background-image:url(menu02.gif);
}

li.menu2 a:hover {
   background-image:url(menu02_on.gif);
}

li.menu3 a {
   background-image:url(menu03.gif);
}

li.menu3 a:hover {
    background-image:url(menu03_on.gif) ;
}


/* モダンブラウザ(Firefox Opera Safari)対策 */
ul.menu:after {
   content:".";
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
   font-size:0;
}

/* Win版IE7とMac版IE5対策 */
ul.menu {
   display:inline-block;
}

/* Win版IE5および6対策 */
/* Hides from IE-mac \*/
* html ul.menu {
   height:1px;
}

ul.menu {
   display:block;
}
/* End hide from IE-mac */

メニューを横並びにするのにfloatを使用している都合上、リスト以降の要素の回り込みを解除するためにclearfixハックを使っています。

CSSの読み込みの遅さを防ぐ

今回説明した方法だと、オンマウスにした瞬間ちらつきが発生します。その後は画像がキャッシュされるためちらつきは発生しなくなります。この問題を解決する手としては、オンとオフの画像をくっつけて作成し、部分的に呼び出す方法があるのですが、また別の機会に紹介します。

また、IE6などだとブラウザの設定によって毎回ページのキャッシュを取得するため、マウスを置いた際画像の読み込みが遅く、ちらついてしまう現象が起きます。この現象はFirefoxなどのほかのブラウザでは起こりません。

IE6対策に以下のコードをCSSファイルに記述します。

CSSコード


html {
  filter: expression(document.execCommand("BackgroundImageCache", 
  false, true));
}

これは、CSSファイル中にJavascriptコードを書いているのですが、IEの独自の書き方です。他のブラウザでは無視されるのでハックの必要はありません。背景画像をキャッシュしています。

Javascriptでメニューのロールオーバーをしたいときは

本サイトの趣向とは違いますが、Javascriptでメニューのロールオーバーができるライブラリをいくつか紹介します。