2010年10月15日

印刷対応 その2

こんにちは、木田です。
今回は前回の記事でご紹介した「印刷対応」について実際に対応方法についてご紹介したいと思います。

実装方法


 ■グローバルナビなどのメイン部分以外が印刷出来なくてOKな場合

ざっくりと、印刷出来なくてもOKな部分を、 display:none; します。

例えば:
(cssサンプル)
/* 印刷に不要な要素を消す */
#headerNavi,
#globalNavi,
#subNavi,
#leftNavi {

display:none;

}
メイン部分以外の、印刷が不要な要素をdisplay:none;しています。

あとは微調整です。


 ■display:none しないで対応したい!場合

各ブラウザの印刷対応について、対応していきます。
避けては通れません。


IE系

・ページの横幅が、プレビュー時の横幅よりも大きい場合に、はみ出た部分にfloatが掛かっていると、表示が崩れてしまう場合がある
これは、左にあるものは、float:left。右にあるものは、float:rightで指定することで対応出来ます。
メインが左で、サブが右にあるのに、#mainも#subも、float:left にしている場合に、よく発生するので、正しく設定しましょう。

・用紙のサイズに合わせて縮小が使えない
bodyに、zoomを指定します。
これには、IE6用にhackを使います。
でないと、IE7でもIE8でも適用されてしまうので。
普段hackを使うことはほとんどありませんが、印刷対応時のみ特別に使用します。

例えば:
(cssサンプル)
body {

_zoom:0.75;

}
zoomの値は、適宜変更します。


Firefox

・floatがclearされる前にページをまたぐと、それ以降のページが正しく印刷出来なくなる
これは、floatを取ることで対応出来ます。が。それだと、メインもサブも関係なく、縦にずらっと並んでしまいます。 それを解消する為に、 display:table、display:table-cell を使用します。
display:table は、要素をtableとして処理します。
display:table-cell は、要素をtdとして処理します。まんまですね。

例えば、以下のような階層構造のHTMLだった場合
html階層
#container
#header
#contents

#main
#sub

#footer
印刷用のCSSでは、以下のように記述します。
(cssサンプル)
#contents {

_display:table;

}

#main {

display:table-cell;
float:none;
vertical-align:top;

}

#sub {

display:table-cell;
float:none;
vertical-align:top;

}
vertical-align:top; は、テーブルを思い出してもらいたいのですが、td ってデフォルトだと、左寄せの上下中央揃えになります。
vertical-alignを指定しないと、上下中央揃えになってしまって、表示がズレてしまいます。
そのための指定です。

※注意点
  • ・メインとサブの間に空白があるのであれば、それは padding で指定すること
  • ・display:table-cell; を指定する要素と同列要素に、display:table-cell; 以外の要素があってはならない

さて、これでOKかと言いますと、そんなことはないのです・・・。
なぜならば、IE6、IE7で display:table; display:table-cell; が使えないのです・・・。
ということで、両方に対応しましょう・・・

全ブラウザ対応(Chrome, Safari除く)
今までご紹介した印刷対応を組み合わせていきましょう。

Firefoxの例と同じ構成の場合:
html階層
#container
#header
#contents

#main
#sub

#footer
印刷用のCSSに、Firefox用の記述をします。これは前述のものと同じです。
(cssサンプル)
#contents {

_display:table;

}

#main {

display:table-cell;
float:none;
vertical-align:top;

}

#sub {

display:table-cell;
float:none;
vertical-align:top;

}
それに、IE6、7用の記述を追記します。
(cssサンプル)
body {

__zoom:0.75;

} #contents {

_display:table;

}

#main {

display:table-cell;
float:none;
/float:left;
vertical-align:top;

}

#sub {

display:table-cell;
float:none;
/float:right;
vertical-align:top;

}
bodyの記述と、「/float:〜」が追加されました。
「/float:〜」はIE6、7用のhackです。
これで、IE6、7の場合は、floatがnoneではなくなります。

以上の対応で、見れるレベルになったのではないでしょうか。

より良くする為には更に対応が必要ですが、それは次回ご紹介しようと思います。
posted by baba at 20:26 | Comment(0) | TrackBack(0) | テクニック

2010年09月28日

印刷対応 その1

こんにちは、木田です。
ホームページを印刷した時に、ブラウザと見た目がまったく違うものが印刷されてしまった事ってありませんか?
今回は、そんな印刷時の見た目の違いを解消するCSSの技術「印刷対応」についてご紹介したいと思います。

印刷対応とは

印刷対応とは、各ブラウザに内蔵されている印刷機能を使った印刷時に、可能な限りデザインされた状態で印刷を行えるように調整する事を言います。


どのように対応するのか

印刷対応を行うには、一般的に印刷用のCSSを用意します。
例えば:
(htmlコーディング)
<link href="/css/print.css" rel="stylesheet" type="text/css" media="print" />
media="print"がキモです。
media="print"と書くと、それは印刷(印刷プレビュー)時にしか使用されません。
普段は media="all" になっているはず。指定しなくても all が指定されていることになります。


注意点

印刷対応でもっとも注意しなければならないのは、背景画像の対応についてです。
これは印刷対応時ではなく、最初のコーディング時点で確認する必要があります。これを怠ると、下手をすれば、全部はじめからやり直しなんて事になりかねません。

 ■背景画像の対応とは

大体のブラウザでは、印刷時に背景画像を印刷するか、しないかを選択出来るようになっています。
で、デフォルトは背景画像を印刷しません。
背景画像を印刷しない場合、ページのタイトルを背景画像で指定している場合などに印刷時のみタイトルが分からなくなってしまいます。
リテラシーの高いひとなら、背景を印刷するように設定を変えて、印刷することなど容易に出来ますが
そうでない方が多い(設定を変える方法が分かりにくいのもあります)ため、背景を印刷する設定でなくても問題が無いように対応を行う必要があるのです。

各ブラウザの印刷対応について
続いて、各ブラウザの印刷についてです。どのブラウザもイマイチな感じです。

IE

ページの横幅が、プレビュー時の横幅よりも大きい場合に、はみ出た部分にfloatが掛かっていると、表示が崩れてしまう場合がある

 ■IE6

用紙のサイズに合わせて縮小が使えない
IE6の対応は「用紙のサイズに合わせて縮小する」機能がないその点をどうするかを考える必要があります。
IE7以降は、縮小出来るので、IE6向けの対応となります。


Firefox

floatがclearされる前にページをまたぐと、それ以降のページが正しく印刷出来なくなる
この点が無ければほぼ完璧なFirefoxさん。
mainとsubで分けて、2カラムにしている場合などに、よく発生します。


その他

Chrome、SafariなどのWebKit?系ブラウザでは、今現在、対応を行っていません。
理由は「印刷プレビューが出来ないから」ですが、Chromeについては、そのうち実装されそうなので、実装された後は、何かしら対応が必要になるかもしれません。


次回の私の記事では、
印刷対応について
実装方法をご紹介します。
posted by baba at 20:42 | Comment(0) | TrackBack(0) | テクニック

2010年05月31日

画像の縦方向のセンタリング その2

こんにちは、馬場です。


ものすごく以前(半年前?)になってしまうのですが、
画像の縦方向のセンタリングについてのお話が
途中になっているので、今回はその第2回目、
「displayを使ったセンタリング」のお話をさせていただきます。

「なんのことだか忘れちゃったよ〜。」という方がほとんどだと思いますので、
下記より、前回の記事をご覧いただければと思います。



displayを使ったセンタリング(IE6〜7未対応)


前回の記事で書いているように、
tableであれば
縦方向のセンタリングも全く難なく対応可能です。


ということで、tableと同じ動きになるように
スタイルを設定すれば良いことになります。


下記、サンプルをご確認ください。

▼スクリーンショット

※スクリーンショットは、Windows Firefox 3.5のものです。

(htmlコーディング)
<div class="wrapper2">
<div><img src="yoko.gif" alt="" /></div>
<div class="none">&nbsp;</div>
<div><img src="tate.gif" alt="" /></div>
</div>
(cssサンプル)
* {
margin:0;
padding:0;
}
.wrapper2 {
margin:10px;
}
.wrapper2 div {
display:table-cell;
width:200px;
height:200px;
border:1px solid #71BED9;
background-color:#DBEDFA;
text-align:center;
vertical-align:middle;
}
.wrapper2 div.none {
width:10px;
border:0;
background-color:transparent;
}
サンプルを表示


サンプルのように
display:table-cell
を設定することで
tableのセルと同じ振る舞いをすることとなるため、
画像の真ん中寄せを実現することができました。


ただ、IE7以前は「table-cell」に対応していないため、
別の対応をする必要があります。

inline-blockと同等の効果を持たせると実現できるようですが、
またの機会に検証したいと思います。
(まだinline-blockについても述べていないので・・・)

次回の私の記事では、
画像の縦方向のセンタリングについて
ダミーイメージとvertical-alignを使ったセンタリング
をご紹介します。
posted by baba at 21:16 | Comment(0) | TrackBack(0) | テクニック

2009年11月13日

画像の縦方向のセンタリング その1

こんにちは、馬場です。


ホームページを制作する際に、
例えば、ショップサイトの場合は
取り扱う商品の写真を
サムネイル表示することがあると思います。


写真をサムネイル表示する際に、
写真が正方形の枠で囲まれていて、
その中で、写真がまん中に配置されているのを
見かけることがあると思います。

横方向のセンタリングは難なく対応できますが、
縦方向のセンタリングは少し考えてしまいますよね?


今回から、3回に分けて、
画像の縦方向のセンタリングについて
お話しします。

ただ、IE6に対応しようと思った際に
完全にcssのみで対応することが難しいため、
すっきりしない可能性大です。
(私が知らないだけかも知れませんが・・・)





▼tableタグを使ったセンタリング


恐らく、一番最初に思いつく
(他に対応のしようがない?)
のがtableタグを使用した縦方向のセンタリングだと思います。

スタイルを使用しなくても
属性だけで対応できますので、
説明の必要はないかも知れませんが
確認の意味も込めてサンプルをご覧ください。

▼スクリーンショット

※スクリーンショットは、Windows Firefox 3.0のものです。

(htmlコーディング)
<div class="wrapper1">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="yoko.gif" alt="" /></td>
<td class="none">&nbsp;</td>
<td><img src="tate.gif" alt="" /></td>
</tr>
</table>
</div>
(cssサンプル)
* {
margin:0;
padding:0;
}
.wrapper1 {
margin:10px;
}
.wrapper1 td {
width:200px;
border:1px solid #71BED9;
background-color:#DBEDFA;
text-align:center;
vertical-align:middle;
}
.wrapper1 td.none {
width:10px;
border:0;
background-color:transparent;
}

サンプルのように
text-align:center
vertical-align:middle
を設定することで
簡単に真ん中寄せを実現可能です。


tdはvertical-alignの初期値がmiddleなので、
特に意識しなくても、真ん中に寄ってしまいます。


次回の私の記事では、
画像の縦方向のセンタリングについて
displayを使ったセンタリングをご紹介します。
posted by baba at 19:37 | Comment(0) | TrackBack(0) | テクニック

2009年10月16日

widthを決めずにfloatさせたい

こんにちは、溝上です。

今回はちょっと便利なfloatの使い方をご紹介したいと思います。
以前紹介したfloatを使う際の注意点に反してしまいますが
幅が決められない(決めたくない)要素をfloatさせたいときってありますよね。
例えばフッターにテキストリンクを多数並べたい場合などが考えられます。

| 会社概要 | お問い合わせ | 個人情報保護方針 | 採用情報 | サイトマップ |

↑こんなリンクです。

「それなら以前紹介したこの方法でいいんじゃない?」

と先輩に突っ込まれましたので、今回は違う方法で実現してみたいと思います。
まずは前回の先輩のサンプルを応用(拝借)してみます。

(htmlコーディング)
<div class="list">
<ul>
<li>テストです</li><li>テストですよ</li><li>テストですね</li><li>テストなんだな</li><li>テストかぁ・・・</li>
</ul>
</div>
(cssサンプル)
* {
padding:0;
margin:0;
}
.list {
width:400px;
padding:10px;
background-color:#9FF;
list-style-type:none;
list-style-position:outside;
}
.list li {
display:inline;
padding-right:10px;
margin-right:10px;
border-right:1px solid #000000;
}


この方法は非常にシンプルにかけてとても使いやすいのですが、弱点があります。

▼スクリーンショット

※スクリーンショットは、Windows Firefox 3.0のものです。

このサンプルのように親要素のwidthが小さい場合、
テキストの途中で改行されてしまう場合があります。

これはこれで有りですが、ひとつのaタグ内では改行してほしくない場合もあるかと思います。
例えばこうなってほしい場合です。

▼こうなってほしい!ってことありますよね

※これは「こうしたいなぁ」というサンプルです。よくありますよね?

aタグの終わりで次が入りきらない場合に改行したい!って時です。

これを実現する為には、white-spacefloatを同時に指定します。

(htmlコーディング)
<div class="list">
<ul>
<li>テストです</li>
<li>テストですよ</li>
<li>テストですね</li>
<li>テストなんだな</li>
<li>テストかぁ・・・</li>
</ul>
<div class="clear">&nbsp;</div>
</div>
(cssサンプル)
* {
padding:0;
margin:0;
}
.list {
width:400px;
padding:10px;
background-color:#9FF;
list-style-type:none;
list-style-position:outside;
}
.list li {
display:block;
float:left;
white-space:nowrap;
padding-right:10px;
margin-right:10px;
border-right:1px solid #000000;
}
.clear {
clear:both;
height:0;
visibility:hidden;
font-size:1px;
line-height:0px;
}
さて、実行結果はどうなるでしょうか。

▼スクリーンショット

※スクリーンショットは、Windows Firefox 3.0のものです。

うまくいきました。
ちなみにwhite-space:nowrap;を指定しなくてもFirefoxでは問題ありませんが、
例のごとくInternet Explorer では表示が崩れてしまいます。

▼スクリーンショット

またIEかと思わずにはいられません。
    スクリーンショットは、Internet Explorer6です。ちなみにIE7でも崩れました。

white-space:nowrap;はもともとは改行をさせなくさせるプロパティで
tableタグ内でthを改行させたくない場合などに良く使われますが
こんな使い方もあるんですね。

この方法の利点には『displayをinlineにしなくていい』ということもあります。
その為、インライン要素では指定できないpaddingの上下などを使うこともできます。

以前紹介した方法と、今回の方法、状況に合わせて使い分けるとかなり便利だと思います。

posted by baba at 17:29 | Comment(0) | TrackBack(0) | テクニック

2009年10月09日

縦で区切るリストの表現(上下にボーダーが無い場合)

こんにちは、馬場です。


今回は前回の続きで、
「縦で区切るリストの表現」の
上下にボーダーが無い場合の対応について
お話しします。






▼縦で区切るリストの表現(上下にボーダーが無い場合)


縦で区切るリストの表現で
リストの上下にボーダーが無い場合は、
ある場合に比べると、
少し考えさせられますよね。
(私だけ?)

いつものように、サンプルをご覧ください。

▼スクリーンショット

※スクリーンショットは、Windows Firefox 3.0のものです。

(htmlコーディング)
<div id="wrap1" class="wrapper">
<ul>
<li class="first"><a href="#">あなたは</a></li>
<li><a href="#">イヌ派?</a></li>
<li><a href="#">ネコ派?</a></li>
<li><a href="#">私は</a></li>
<li><a href="#">イヌ派です。</a></li>
</ul>
</div>
(cssサンプル)
* {

margin:0;
padding:0;

}
.wrapper {

width:200px;
margin:10px auto;
padding:0 10px;
border:1px solid #71BED9;

}
.wrapper ul {

list-style-type:none;

}
.wrapper li {

padding:13px 10px 10px;
background-image:url(line.gif);
background-repeat:repeat-x;
background-position:left top;

}
.wrapper li.first {

background:none;

}


liの上にボーダーを表示すると
一番上のボーダーが余分に出てしまうことになります。

サンプルのように、一番上のliにclassを設定し
ボーダー(今回は背景画像)をスタイルの上書きで非表示にすれば
対応可能です。
(ボーダーをliの下に付ければ、一番下のliにclassを設定することになります。)


ただ、
「プログラムで書き出すため、classを付けるのは面倒だ。」
という局面にぶち当たるかもしれません。


そんなときは、
下記のサンプルをお試しください。


▼スクリーンショット

※スクリーンショットは、Windows Firefox 3.0のものです。

(htmlコーディング)
<div id="wrap2" class="wrapper">
<ul>
<li><a href="#">犬派の人は、</a></li>
<li><a href="#">猫っぽい正確の人が</a></li>
<li><a href="#">多いと聞きますが</a></li>
<li><a href="#">私は</a></li>
<li><a href="#">猫っぽいですか?</a></li>
</ul>
</div>
(cssサンプル)
* {

margin:0;
padding:0;

}
.wrapper {

width:200px;
margin:10px auto;
padding:0 10px;
border:1px solid #71BED9;

}
.wrapper ul {

list-style-type:none;

}
.wrapper li {

padding:13px 10px 10px;
background-image:url(line.gif);
background-repeat:repeat-x;
background-position:left top;

}
#wrap2 {

overflow:hidden;

}
#wrap2 ul {

margin-top:-5px;

}


上記のサンプルは
ボーダーを付けた要素(li)の親要素である
ulにmargin-top:-5pxを付け、
ulの親要素のdiv(以降、親1と呼びます)
にoverflow:hiddenを付けることで
ボーダーをめり込ませて見えなくしています。

親1に、
padding-topが付いている際は
そのpadding分、
さらにmarginをマイナスにする必要がありますので
ご注意ください。


また、
めり込ませているため、
普通にclassを付けて消す対応に比べ
上の開きが小さくなってしまいます。
(上記のサンプルなら、5px分狭くなります。)

1〜2pxのボーダーなら、
あまり問題なさそうですが、
あまりに太いボーダーの場合は、
違いが明らかとなってしまいます。

そんなときは、
デザインにもよりますが、
親1のmargin-topで
開きを調整する等の対応が
必要となりそうです。

今回のようなサンプルの場合は、
親1にborderが付いてしまっているので
margin-topを設定しても、
borderとの間隔は
広くなりません。

親1をさらにdivなどで囲み
その要素にborderの設定を
移す必要がありそうです。


IEを無視して問題ない場合は
(超レアケースだと思いますが・・・)
疑似クラスの「first-child」が使えるので
こんなに苦労する必要はないですね。

posted by baba at 19:41 | Comment(0) | TrackBack(0) | テクニック

2009年09月11日

縦で区切るリストの表現(上下にボーダーがある場合)

こんにちは、馬場です。


webページ内で、
メニューの表示や新着の表示等、
1行ずつ枠線で区切って表示することが
良くあるかと思います。


少し簡単ですが、
縦で区切るリストの表現について
上下にボーダーがある場合と、
上下にボーダーが無い場合を
2回に分けて、ご紹介します。


ちなみに横で区切る場合の対応は
以前のページをご確認ください。
(以前のものを見れば、ほぼ解決してしまいそうですが・・・)
フッタ部分リンクメニューのリストタグによる実現方法




▼縦で区切るリストの表現(上下にボーダーがある場合)


縦で区切るリストの表現で
リストの上下にもボーダーがある場合は、
比較的簡単にできてしまうかと思います。

▼スクリーンショット

※スクリーンショットは、Windows Firefox 3.0のものです。

(htmlコーディング)
<div id="wrapper">
<ul>
<li><a href="#">テストテキスト1</a></li>
<li><a href="#">テストテキスト2</a></li>
<li><a href="#">テストテキスト3</a></li>
<li><a href="#">テストテキスト4</a></li>
<li><a href="#">テストテキスト5</a></li>
</ul>
</div>
(cssサンプル)
* {

margin:0;
padding:0;

}
#wrapper {

width:200px;
margin:auto;
padding:10px;

}
#wrapper ul {

list-style-type:none;
background-image:url(line.gif);
background-repeat:repeat-x;
background-position:left top;

}
#wrapper li {

padding:10px;
background-image:url(line.gif);
background-repeat:repeat-x;
background-position:left bottom;

}


上記サンプルのように
liの下にボーダーを表示し、
ulの上へボーダーを表示すれば
問題無く対応できます。
(liの上とulの下でも問題ありません。また、borderでも対応可能です。)

・・・今回は簡単でしたが、
「上下にボーダーが無い場合」では
少しひねりを加えていますので、
ご安心を。

ホントに少しなので、
過度の期待は厳禁です。
posted by baba at 20:22 | Comment(0) | TrackBack(0) | テクニック

2009年07月24日

block要素の横幅を要素の内容によって伸縮させる方法 その3

こんにちは、馬場です。


今回は、
block要素の横幅を
要素の内容によって
伸び縮みさせる方法について、
positionを使った実現方法を
ご紹介します。





▼positionを使った実現方法


block要素の横幅を
要素の内容によって
伸び縮みさせる方法について
positionを使って実現する場合は、
relativeではなく、「absolute」を使います。


私のイメージですが、
block要素の横幅を伸縮させるには、
そのblock要素を周りから見て、
浮かせる
(floatやposition:absoluteなどで、
その要素の高さが周りから認識されないようにする)
と、キュっとなるようです。

(↑私のイメージですので、聞き流してください。)


▼スクリーンショット

※スクリーンショットは、windows Firefox3.0のものです。

(htmlコーディング)
<div class="wrapper03">

<div class="balloon03">花火を観にいきます!!</div>
<p>あしたは・・・。</p>

</div>
(cssサンプル)
* {

margin:0;
padding:0;

}
body {

font-size:75%;

}
.wrapper03 {

padding:10px;

}
.wrapper03 p {

padding-top:50px;

}
.balloon03 {

position:absolute;
padding:10px 10px 25px 10px;
background-color:#67C3EC;
background-image:url(images/bg01.gif);
background-repeat:no-repeat;
background-position:center bottom;

}
.clear {

clear:both;
height:0;
font-size:1px;
line-height:0;
visibility:hidden;

}


position:absoluteを使用すると
topやleftを設定することで
表示位置の調整がしやすいのですが、
floatのように
clearで解除する、ということができません。

浮きっぱなしになるため、
要素のheightが増えた際に、
それに合わせて、
その下の要素が下へズレることはありません。


▼スクリーンショット

※スクリーンショットは、windows Firefox3.0のものです。
吹き出しで、下の要素が隠れてしまっています。


(htmlコーディング)
<div class="wrapper03">
<div class="balloon03">

花火を観にいきます!!<br />
今年も、あの橋まで

</div>
<p>1時間くらい、歩いていきます。・・・いい運動になります。</p>
</div>
(cssサンプル)
* {

margin:0;
padding:0;

}
body {

font-size:75%;

}
.wrapper03 {

padding:10px;

}
.wrapper03 p {

padding-top:50px;

}
.balloon03 {

position:absolute;
padding:10px 10px 25px 10px;
background-color:#67C3EC;
background-image:url(images/bg01.gif);
background-repeat:no-repeat;
background-position:center bottom;

}
.clear {

clear:both;
height:0;
font-size:1px;
line-height:0;
visibility:hidden;

}

また、
position:absoluteは
positionプロパティで
static以外の値が指定された親要素に対しての
絶対位置
になるため、
topやleftなどで位置を調整する際は、
どの要素からの絶対位置になるかも
意識する必要があります。



block要素の横幅を
要素の内容によって
伸び縮みさせる方法について、

displayを使った実現方法、
floatを使った実現方法、
positionを使った実現方法の3つをご紹介しましたが、

サンプルのように
吹き出しを表示する場合は、
マウスオーバーした時だけ表示されるような
一時的に表示する吹き出しは、
positionで、

常に表示しておく吹き出しについては
floatで対応するのが良いかと思います。
posted by baba at 20:14 | Comment(0) | TrackBack(0) | テクニック

2009年06月26日

block要素の横幅を要素の内容によって伸縮させる方法 その2

こんにちは、馬場です。


今回は、
block要素の横幅を
要素の内容によって
伸び縮みさせる方法について、
floatを使った実現方法を
ご紹介します。





▼floatを使った実現方法


floatは
cssコーディングを行う際に
なくてはならない
代表的なプロパティの1つなので、
お気づきの方も多いと思いますが、
floatを使うと
要素の横幅が
要素の内容によって伸縮します。
(要素の内容に依存します。)

▼スクリーンショット

※スクリーンショットは、windows Firefox3.0のものです。

(htmlコーディング)
<div class="wrapper02">

<div class="balloon02">あのマイケルが!!?</div>
<div class="clear">&nbsp;</div>
<p>きょうは・・・。</p>

</div>
(cssサンプル)
* {

margin:0;
padding:0;

}
body {

font-size:75%;

}
.wrapper02 {

padding:10px;

}
.balloon02 {

float:left;
padding:10px 10px 25px 10px;
background-color:#67C3EC;
background-image:url(images/bg01.gif);
background-repeat:no-repeat;
background-position:center bottom;

}
.clear {

clear:both;
height:0;
font-size:1px;
line-height:0;
visibility:hidden;

}
・・・floatを使った実現方法と
言いますか、floatを使っているだけです。

私は、floatを使用する際は
widthを設定することがほとんどだったため、
なかなか気付くことができませんでした。


前回ご紹介した、
「displayを使った実現方法」は
inline要素になってしまうのに対し、
今回は、
block要素のままなので、
例のように吹き出しを表現する場合は、
前回より、今回の方が
向いているかもしれません。



positionを使った実現方法については、
次回以降にご紹介させていただきます。
posted by baba at 20:11 | Comment(0) | TrackBack(0) | テクニック

2009年05月22日

block要素の横幅を要素の内容によって伸縮させる方法 その1

こんにちは
馬場です。

divタグやpタグのような
block要素の横幅は
要素の内容に関係なく、
横幅いっぱいに広がります。
(親要素の横幅に依存する)

しかし、
中のテキストの横幅によって
伸び縮みして欲しいときがあります。

今回から3回に分けて、
block要素の横幅を
要素の内容によって
伸縮させる方法を
ご紹介します。




▼displayを使った実現方法


divタグやpタグは
block要素ですので、
横幅はいっぱいいっぱいに伸びます。
(block要素のwidthは親要素のwidthに依存)

それに対し、
inline要素は内容によって
横幅が伸縮します。
(inline要素のwidthは内容に依存)

スタイルで
divタグやpタグの
displayをinlineにすれば、
もちろん要素の内容によって
横幅が伸縮します。



・・・すでにタイトルの

「block要素の横幅を
要素の内容によって
伸縮させる方法」


には反してしまっているような気がしてしかたありませんが。。。

▼スクリーンショット

※スクリーンショットは、windows InternetExplorer6.0のものです。

(htmlコーディング)
<div class="wrapper01">

<div class="balloon01">花金ですから!!</div>
<p>きょうは・・・。</p>

</div>
(cssサンプル)
* {

margin:0;
padding:0;

}
body {

font-size:75%;

}
.wrapper01 {

padding:10px;

}
.wrapper01 p {

padding-top:30px;

}
.balloon01 {

display:inline;
padding:10px 10px 25px 10px;
background-color:#67C3EC;
background-image:url(images/bg01.gif);
background-repeat:no-repeat;
background-position:center bottom;

}
上記のサンプルのように、
吹き出しのように使用する場合は、
inline要素だと上下のpaddingが開いてくれないので、
親要素などでpaddingを開けることになります。





今回は、
block要素の横幅を
要素の内容によって
伸縮させる方法について
displayを使った実現方法を
ご紹介いたしました。


floatを使った実現方法や
positionを使った実現方法については、
次回以降にご紹介させていただきます。 中のテキストの横幅によって
伸び縮みして欲しいときがあります。

今回から3回に分けて、
block要素の横幅を
要素の内容によって
伸縮させる方法を
ご紹介します。




▼displayを使った実現方法


divタグやpタグは
block要素ですので、
横幅はいっぱいいっぱいに伸びます。
(block要素のwidthは親要素のwidthに依存)

それに対し、
inline要素は内容によって
横幅が伸縮します。
(inline要素のwidthは内容に依存)

スタイルで
divタグやpタグの
displayをinlineにすれば、
もちろん要素の内容によって
横幅が伸縮します。



・・・すでにタイトルの

「block要素の横幅を
要素の内容によって
伸縮させる方法」


には反してしまっているような気がしてしかたありませんが。。。

▼スクリーンショット

※スクリーンショットは、windows InternetExplorer6.0のものです。

(htmlコーディング)
<div class="wrapper01">

<div class="balloon01">花金ですから!!</div>
<p>きょうは・・・。</p>

</div>
(cssサンプル)
* {

margin:0;
padding:0;

}
body {

font-size:75%;

}
.wrapper01 {

padding:10px;

}
.wrapper01 p {

padding-top:30px;

}
.balloon01 {

display:inline;
padding:10px 10px 25px 10px;
background-color:#67C3EC;
background-image:url(images/bg01.gif);
background-repeat:no-repeat;
background-position:center bottom;

}
上記のサンプルのように、
吹き出しのように使用する場合は、
inline要素だと上下のpaddingが開いてくれないので、
親要素などでpaddingを開けることになります。





今回は、
block要素の横幅を
要素の内容によって
伸縮させる方法について
displayを使った実現方法を
ご紹介いたしました。


floatを使った実現方法や
positionを使った実現方法については、
次回以降にご紹介させていただきます。
posted by baba at 17:59 | Comment(0) | TrackBack(0) | テクニック

2009年05月08日

widthを使うときの注意点 その2

こんにちは。
溝上です。

前回に引き続き「widthを使うときの注意点 その2」をお送りします。

前回の最後にも書きましたが、Internet Explorerで表示崩れが起きたらまず一番にwidthを疑いましょう。
borderが正しく表示されない場合などもwidthを指定すれば直ることが良くあります。
それでは早速、表示崩れするサンプルを試してみます。
borderで囲んだdivの中で、左右にfloatします。
htmlコーディング例
<div class="box">
<div class="left">left</div>
<div class="right">right</div>
<div class="clear">&nbsp;</div>
</div>
(cssサンプル)
.box{
  border:1px solid #000000;
}
.right {
  float:right;
  width:150px;
  height:150px;
}
.left {
  float:left;
  width:150px;
  height:150px;
}
.clear {
  clear:both;
  height:0;
  font-size:1px;
  line-height:0;
  visibility:hidden;
}
このサンプルをInternet Explorer6とFirefox1.5で見てみました。

▼Firefoxの場合▼

▼Internet Explorerの場合▼


「ちゃんとborderが表示されているじゃないか」

と思われたのではないでしょうか。
左右にfloatしたdivタグの下に隙間が出来てしまっていますが、border自体は正しく表示されているように見えます。
これがです。

一度Internet Explorerを最小化した後、最大化してみましょう。

▼Internet Explorerの場合(最小化→最大化)▼


みごとな表示崩れです。
borderが下だけ表示されています。

この現象は画面をスクロールした場合や、長いページで元から画面に表示されていなかった箇所、お気に入りの表示、非表示を切り替えた場合などにも発生します。

発生する場合が多いわりに、なかなか気づきにくい厄介な表示崩れでは無いでしょうか。

この表示崩れはfloatしている要素を囲んでいるタグにwidthをつければ解決します。
(cssサンプル)
.box{   
width:400px;
border:1px solid #000000;
}
▼Internet Explorerの場合(最小化→最大化)▼


borderだけではなく下にあった隙間も無くなりました。
スクロールしたり、お気に入りの表示を切り替えたりしても問題なしです。

このバグも前回同様floatが関わっているようですが、特にfloatしていない場合でも起きたりします。
バグが再現できなくてサンプルはありませんが・・・
Internet Explorerは本当に厄介なバグが多いですね。
 
posted by baba at 15:16 | Comment(0) | TrackBack(0) | テクニック

2009年04月24日

テキストの横に並ぶ画像の位置合わせ その2

こんにちは
馬場です。

前回(前々回?)は、
テキストの横に並ぶ画像の位置調整について
vertical-alignを使用した対応をご紹介しました。

今回は、
vertical-alignとは別の方法、
positionやmarginを使った対応方法を
ご紹介します。

vertical-alignを使用した場合と
それほど表示が変わるわけではないので、
こんな方法もあるという程度で
ご覧ください。


テキストの横に並ぶ画像の位置合わせ その1






▼positionを使った対応


positionを使って調整する場合は、
position:relativeを指定し、
topやbottomで調整します。

その1でご紹介した、
vertical-alignの数値指定と同じように
微調整することができますが、
フォントサイズの変更には、
ついていけません。。。

あいかわらず、Newアイコンがデカすぎるのは、
気にしません。

▼スクリーンショット

※スクリーンショットは、windows Firefox2.0のものです。

(htmlコーディング)
<p class="new04">新しい<img src="icon_new_01.gif" /> 新しい</p>
(cssサンプル)
.new04 img {

position:relative;
top:4px;

}



▼marginを使った対応


marginを使って調整する場合は、
margin-bottomの値で調整します。

▼スクリーンショット

※スクリーンショットは、windows Firefox2.0のものです。

(htmlコーディング)
<p class="new05">新しい<img src="icon_new_01.gif" /> 新しい</p>
(cssサンプル)
.new05 img {

margin-bottom:-4px;

}


margin-topでもできそうなイメージですが、
マイナスにするとIEでは反応しますが、
Firefoxでは変化なしです。

プラスにすると
テキストも一緒についてくるので
うまくいきません。


▼スクリーンショット

※スクリーンショットは、
左はwindows Firefox2.0
右はwindows IE6.0 のものです。


(htmlコーディング)
<p class="new06">新しい<img src="icon_new_01.gif" /> 新しい</p>
(cssサンプル)
.new06 img {

margin-top:-50px;

}



▼vertical-alignとposition(margin)を使った対応


vertical-alignの数値指定や
positionを使った方法、
margin-bottomを使った対応で
微調整はできましたが、
ブラウザで文字サイズを変更した際には
対応できませんでした。

どうしても納得できない方は、
vertical-align:middleと
positionを使った方法または
marginを使った方法を
合わせてみてください。

完全に真ん中とは言いませんが、
ほぼ真ん中を保っていると思います。

このときは、なぜかFirefoxでも
margin-topのマイナスが効くんですよね。。。。

vertical-alignがbaseline(default)の時以外は、
margin-topのマイナスが効くようです。


▼スクリーンショット

※スクリーンショットは、windows Firefox2.0で
文字サイズを大きくしたものです。
上は、positionのみの対応、
下は、vertical-align:middleとmarginの対応です。


(htmlコーディング)
<p class="new07">新しい<img src="icon_new_01.gif" /> 新しい</p>
(cssサンプル)
.new07 img {

margin-top:-4px;
vertical-align:middle;

}
posted by baba at 20:25 | Comment(0) | TrackBack(0) | テクニック

2009年04月10日

widthを使うときの注意点 その1

こんにちは。
溝上です。

今回はCSSのプロパティの中でもよく使われる「width」について書いていこうと思います。

widthは要素の幅を決める為に使いますが、指定しないとInternet Explorerでバグが起こることがあります。
以前に先輩がこちらで一部を書いています。

今回はwidthと一緒に使わないとバグが起きることがあるプロパティを紹介しようと思います。

floatを使う場合、background-imageと同時にwidthを指定しないと背景画像が正しく表示されないというバグです。
htmlコーディング例
<div class="section">
<div class="bk1">
<div class="inner">boxA</div>
<div class="inner">boxB</div>
<div class="clear"> </div>
</div>
</div>
(cssサンプル)
.section {
width:600px;
margin:0 auto;
}

.bk1 {
background-image:url(bk.gif);
background-position:left top;
background-repeat:repeat;
}

.bk1 .inner {
float:left;
width:298px;
height:50px;
border:1px solid #000000;
}

.clear {
clear:both;
width:0;
height:0;
font-size:1px;
line-height:0;
outline:none;
text-decoration:none;
text-indent:-9999px;
}
このサンプルをInternet Explorer6とFirefox1.5で見てみました。
▼Firefoxの場合▼

▼Internet Explorerの場合▼


見事にInternetExplorer6で真っ白になりました。
これを解決する為にはbackground-imageと同時にwidthをpx単位でつけると解決します。
(cssサンプル)
.bk1 {
width:400px;
background-image:url(bk.gif);
background-position:left top;
background-repeat:repeat;
}
▼Internet Explorer(widthを指定)の場合▼


ちゃんと表示されました。
サンプルの場合、innerクラスのfloat:leftを消しても背景画像は表示されるようになります。
ただfloatは消せない場合って多いですよね。
またInternet Explorerで背景画像がちゃんと表示されない場合はよくあるのですが、全部が全部floatのせいというわけではないみたいです。

昔はよく先輩とこんな会話をしていました。

「先輩、なんかIEで背景がちゃんと表示されないんです」
「widthは?」

「先輩、なんかIEでfloatがうまくできないんです」
「widthは?」

「先輩、なんかIE・・・」
「widthは?」

などなど。


最近は先輩に聞く前にwidthのつけ忘れを疑うようになりました。
表示崩れに遭遇したら悩む前にwidthを指定してみるといいかもしれません。
次回もwidthについてご紹介しようと思います。
 
posted by baba at 15:10 | Comment(0) | TrackBack(0) | テクニック

2009年03月25日

テキストの横に並ぶ画像の位置合わせ その1

こんにちは
馬場です。

「テキストの横に並ぶ画像の位置合わせ」
について、2回に分けてお話します。

今回は、vertical-alignを使った方法を
ご紹介します。


「テキストの横に並ぶ画像の位置合わせ」と
言葉で表現してもピンと来ませんが、
サイトで更新があった項目などに
「New」などのアイコンが
表示されているのを
ご覧になったことがありますよね?

あの「New」アイコンの
縦方向の位置調整というイメージです。





▼ 指定なしの場合

何も意識せず、
テキストと画像を
横に並べてみました。

なんだか高さが合ってくれません。

▼スクリーンショット

※スクリーンショットは、windows Firefox2.0のものです。

(htmlコーディング)
<p>新しい<img src="icon_new_01.gif" /> 新しい</p>


▼ vertical-align:middleを設定

画像が文字の高さの真ん中
(もしくは文字が画像の高さの真ん中)
にくれば良いので、
imgタグに
「vertical-align:middle」を
設定してみました。

▼スクリーンショット

※スクリーンショットは、windows Firefox2.0のものです。
真ん中に寄ったような気がしますが、
なんだか物足りません・・・。

フォントサイズによっては、
真ん中とは言い難い寄り方をしています。

▼スクリーンショット

※スクリーンショットは、windows Firefox2.0のものです。

(htmlコーディング)
<p class="new01">新しい<img src="icon_new_01.gif" /> 新しい</p>
<p class="new02">新しい<img src="icon_new_01.gif" /> 新しい</p>
(cssサンプル)
.new01 {

font-size:75%;

}

.new01 img,
.new02 img {

vertical-align:middle;

}


▼ vertical-alignに数値を設定

最近知りましたが、
「vertical-align」は
pxなど数値を指定することができるようです。

今回は、
-0.25emを指定することで対応しました。

▼スクリーンショット

※スクリーンショットは、windows Firefox2.0のものです。

(htmlコーディング)
<p class="new03">新しい<img src="icon_new_01.gif" /> 新しい</p>
(cssサンプル)
.new03 img {

vertical-align:-0.25em;

}


ただ、残念ながら、
ブラウザで文字サイズを変更した際は
表示位置がずれてしまいます。

ブラウザで
文字サイズを変更した際の
表示に関しては、
middle指定の方が
優秀のようです。



marginやpositionを使った対応方法
テキストの横に並ぶ画像の位置合わせ その2


posted by baba at 19:55 | Comment(0) | TrackBack(0) | テクニック

2009年02月25日

背景画像の設定について:その2

こんにちは。
溝上です。

今回は「背景画像の設定について」で説明しきれなかった内容を紹介していこうと思います。

前回と同じですが、まずはサンプルをご覧ください。
(cssサンプル)
.rollover02 a {
display:block;
width:126px;
height:28px;
background:url(images/rollover.jpg) no-repeat left top;
font-size:1px;
line-height:1px;
text-indent:-9999px;
text-decoration:none;
outline:none;
}

font-sizeとline-heightを1pxにしている理由は前回の記事を参照してください。

今回はtext-decorationとoutlineをnoneにしている理由をご紹介します。

まずoutlineをnoneにしている理由ですが、サンプルの様にaタグを画像化した時に必要になります。
下にサンプルを用意しました。

(cssサンプル)
.btn a {
display:block;
width:150px;
height:30px;
background:url(images/rollover.jpg) no-repeat left top;
font-size:1px;
line-height:1px;
text-indent:-9999px;
}
このサンプルのボタンをクリックした場合のスクリーンショットがコチラです。
▼Internet Explorerの場合▼

▼Firefoxの場合▼


なんかFirefoxで横にのびちゃってますね。
この点線がoutlineです。
Internet Explorerならoutlineにnoneを指定しなくても横に伸びたりしませんが、
Firefoxではtext-indent:-9999pxで指定した箇所まで延々とoutlineを伸ばしてくれます。

このままでは不恰好なのでoutlineにnoneを指定し、outlineを非表示にすることで対応します。


次にtext-decorationをnoneにしている理由ですが、

「Netscapeの対応の為だよ」

と先輩が教えてくれました。
早速実験してみます。

(cssサンプル)
.btn a {
display:block;
width:150px;
height:30px;
background:url(images/rollover.jpg) no-repeat left top;
font-size:1px;
line-height:1px;
text-indent:-9999px;
outline:none;
text-decoration:underline;
}
このサンプルをIEとNetscapeで見比べてみます。
▼Internet Explorerの場合▼

▼Netscapeの場合▼


ちょっと解りにくいですが、なんか左に線が・・・
これもoutlineの時と同じくtext-indentで指定した-9999pxまで延々とunderlineが伸びているようです。

Netscapeはサポートも終了し、使っている方も少ないかと思いますが、
CSSのプロパティを1つ書くだけで対応できるならやっておいて損は無いと思います。

 
posted by baba at 20:08 | Comment(0) | TrackBack(0) | テクニック

2009年01月23日

横いっぱいに伸びる背景について

こんにちは
馬場です。


さまざまなサイトを観ていると、
背景(背景画像)が
横いっぱいに伸びているページを
良く目にすると思います。


背景を
横いっぱいに伸ばす場合は、
background-colorや
background-imageなどの
背景の設定をするセレクタの
widthを設定しない
(もしくはwidht:autoを設定)
ことで、問題なく
対応することが
できると思います。


しかしながら、
少し問題があります。


今回は、
ページの横いっぱいに
伸びる背景(背景画像)を
設定した際の問題点と、
その対応策をお話しします。


問題点(背景が切れる?)
widthを設定してみると?
対応策(min-widthを設定)



▼問題点(背景が切れる?)


(htmlコーディング)
<div id="header01">
<div class="inner">ヘッダ</div>
</div>
<div id="contents01">
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト
</div>
<div id="footer01">
<div class="inner">フッタ</div>
</div>
(cssサンプル)
#header01 {
background-color:#71BED9;
}
#header01 .inner {
width:700px;
margin:auto;
padding:20px;
}
#contents01 {
width:700px;
margin:auto;
padding:20px;
background-color:#FFCCCC;
}
#footer01 {
background-color:#71BED9;
}
#footer01 .inner {
width:700px;
margin:auto;
padding:20px;
}
上記サンプルの
ブラウザのウィンドウの横幅を
横のスクロールバーが
表示されるまで狭めてみてください。

そして、
横へスクロールさせると、
背景が表示されていないことが
確認できると思います。



↓横へスクロールすると



これは、
おそらくbodyタグ内の横幅が
ブラウザのウィンドウサイズに
依存しているためだと
思われます。

(bodyタグに背景を設定した場合は、
問題ありません。)



▼widthを設定してみると?


上記の現象を
回避するためには、
背景を表示させたいタグの
横幅を設定する
必要がありますが、

仮にwidth:1280pxを設定すると
横が1280pxより低い
画面解像度のPCでは、

常に横スクロールバーが
表示されることに
なってしまいます。

(htmlコーディング)
<div id="header02">
<div class="inner">ヘッダ</div>
</div>
<div id="contents02">
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト
</div>
<div id="footer02">
<div class="inner">フッタ</div>
</div>
(cssサンプル)
#header02 {
width:1024px;
background-color:#71BED9;
}
#header02 .inner {
width:700px;
margin:auto;
padding:20px;
}
#contents02 {
width:700px;
margin:auto;
padding:20px;
background-color:#FFCCCC;
}
#footer02 {
width:1024px;
background-color:#71BED9;
}
#footer02 .inner {
width:700px;
margin:auto;
padding:20px;
}

widht:1024pxを
設定すると
今度は逆に1280pxの
画面解像度では

背景が途中で
切れて表示されてしまいます。

(htmlコーディング)
<div id="header03">
<div class="inner">ヘッダ</div>
</div>
<div id="contents03">
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト
</div>
<div id="footer03">
<div class="inner">フッタ</div>
</div>
(cssサンプル)
#header03 {
width:1280px;
background-color:#71BED9;
}
#header03 .inner {
width:700px;
margin:auto;
padding:20px;
}
#contents03 {
width:700px;
margin:auto;
padding:20px;
background-color:#FFCCCC;
}
#footer03 {
width:1280px;
background-color:#71BED9;
}
#footer03 .inner {
width:700px;
margin:auto;
padding:20px;
}



▼対応策(min-widthを設定)


横スクロールバーがでるのは、
ブラウザのウィンドウの
横幅よりも

表示する内容の
横幅の方が
大きい場合

(ブラウザのウィンドウの
横幅より大きいwidthを
設定したタグがある場合)



なので、背景を設定したタグの
widthに、このwidthと同じ値が
設定されていれば、
問題なく、背景が
表示されることになります。


ブラウザの横幅を狭めた際に
問題があるので、
min-widthをコンテンツの
横幅に設定すれば、
ブラウザのウィンドウに合わせて、
横幅が広がり、
ブラウザのウィンドウが狭まり、
横スクロールが出た際にも
背景を途切れることなく
表示することができます。

(htmlコーディング)
<div id="header04">
<div class="inner">ヘッダ</div>
</div>
<div id="contents04">
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト<br />
テストテストテストテストテストテストテストテストテスト
</div>
<div id="footer04">
<div class="inner">フッタ</div>
</div>
(cssサンプル)
#header04 {
min-width:700px;
background-color:#71BED9;
}
#header04 .inner {
width:700px;
margin:auto;
padding:20px;
}
#contents04 {
width:700px;
margin:auto;
padding:20px;
background-color:#FFCCCC;
}
#footer04 {
min-width:700px;
background-color:#71BED9;
}
#footer04 .inner {
width:700px;
margin:auto;
padding:20px;
}

ただし、IE6は、
min-widthに対応していないため、
「minmax.js」という
JavaScriptの力を借りることに
なってしまいます。


▼あるSEのつぶやき
http://fnya.cocolog-nifty.com/blog/2006/12/minmaxjs_iecssm_d111.html

posted by baba at 20:37 | Comment(0) | TrackBack(0) | テクニック

2008年12月25日

背景画像の設定について

Merry Christmas!
溝上です。

今回は、以前ご紹介した「ロールオーバー画像の実現方法」の内容を詳しく掘り下げていこうと思います。

前回のロールオーバー画像の実現方法を紹介した際のCSSサンプルはこのようになっています。
(cssサンプル)
.rollover02 a {
display:block;
width:126px;
height:28px;
background:url(images/rollover.jpg) no-repeat left top;
font-size:1px;
line-height:1px;
text-indent:-9999px;
text-decoration:none;
outline:none;
}
この方法はリンクテキストをボタンのように表示する以外にも、テキストの背景を画像にしてタイトルとして表示するなどの応用方法もあり私もよく使います。

ただ、このサンプルでは指定している内容が多いと感じられるのではないでしょうか。
私も

「なぜfont-sizeを1pxにしているんだろう?」

とか

「line-heightに1pxを指定しているには何かわけがあるのだろうか」

などと疑問に思いました。
そこで先輩社員に聞いてみたところ、

指定している内容が多い理由はブラウザ対応の為

と答えが返ってきました。

例えばfont-sizeを1pxにしている理由はInternet Explorerでの表示崩れの対応だといわれ、
さっそくサンプルを作ってみました。

(cssサンプル)
.title {
display:block;
width:455px;
height:15px;
background:url(images/title.gif) no-repeat left top;
font-size:20px;
text-indent:-9999px;
text-decoration:none;
outline:none;
}
▼Internet Explorerの場合▼

Internet Explorer

▼FireFoxの場合▼

FireFox


Internet Explorer6でサンプルを確認して見たところ、二つのタイトルの間に空きが出来ています。
FireFoxではぴったりとくっついていることが確認できました。

これはInternet Explorerでは指定したheightよりフォントが大きくなるとボックスの大きさを調整してしまうからとのことでした。
line-heightも同じ理由でheight以上の数値になるとボックスが大きくなり、下に空きができてしまいます。

もしタイトルやリンクのテキストを画像化した際、paddingやmarginをつけていないのに空きが出来てしまっている場合などは一度font-sizeを確認されると、解決するかもしれません。
 
posted by baba at 19:56 | Comment(0) | TrackBack(0) | テクニック

2007年11月14日

ボックスの繰り返し方法-基本編

今回は「ボックスの繰り返し方法」についてお話します。

弊社のホームページ「サービス内容」のページをご覧ください。



わかりにくいかと思いますが、dlタグのかたまりが横に並んで配置されています。

この様に、ブロック要素を横に並べていく方法です。

cssコーディングでは、ごく当たり前の方法ですが、注意点などがありますので、
その辺りも合わせて基本編としてお話します。
 

コーディング例

ご存知の方が大半だと思いますが、floatを使用した実現方法をご紹介します。
まずは、ソースと表示サンプルをご覧ください。
(htmlコーディング)
<div class="repetition01">
<div class="entryWrapper">
<div class="entry">
繰り返し01<br />
テキストテキストテキスト
</div>
<div class="bottom">&nbsp;</div>
</div>
<div class="entryWrapper">
<div class="entry">
繰り返し02<br />
テキストテキストテキスト
</div>
<div class="bottom">&nbsp;</div>
</div>
<div class="entryWrapper">
<div class="entry">
繰り返し03<br />
テキストテキストテキスト
</div>
<div class="bottom">&nbsp;</div>
</div>
<div class="entryWrapper">
<div class="entry">
繰り返し04<br />
テキストテキストテキスト
</div>
<div class="bottom">&nbsp;</div>
</div>
<div class="entryWrapper">
<div class="entry">
繰り返し05<br />
テキストテキストテキスト
</div>
<div class="bottom">&nbsp;</div>
</div>
<div class="clear">&nbsp;</div>
</div>
(cssサンプル)
.repetition01 {
width:636px;
border:1px solid #CCCCCC;
}
.repetition01 .entryWrapper {
float:left;
width:202px;
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
background:url(images/top.gif) no-repeat left top;
}
.repetition01 .entryWrapper .entry {
padding:0 5px;
background:url(images/body.gif) repeat-y left top;
}
.repetition01 .entryWrapper .bottom {
height:10px;
font-size:1px;
line-height:1px;
background:url(images/bottom.gif) no-repeat left bottom;
}
.clear {
clear:both;
height:0;
font-size:1px;
line-height:0;
visibility:hidden;
}
表示サンプルをご覧いただければわかると思いますが、floatを使えば
容易にボックスの繰り返しを実現することができます。

ポイントは
1.floatするブロック要素にwidthを設定する。
2.ボックスの高さが異なる場合はclearする必要がある。
3. floatする方向にmarginを開けない。
(float:leftならmargin-leftは設定しない。)


の3点です。
 

floatするブロック要素にwidthを設定する

今回のサンプルでwidth指定をはずしてみると、
Firefoxではテキストの幅までしか、ボックスが表示されなくなり
IEでは、横に並びさえしなくなることが確認できると思います。

もちろん、わざとwidthを設定しない場合もありますが、
ボックスの横幅が固定である場合は、widthを設定することを
おすすめします。

(サンプル「widthを未設定の場合」をご参照ください)

 

ボックスの高さが異なる場合はclearする

ボックスの高さがすべて同じ場合は問題ありませんが、
ボックス内のテキストに差があるなどの理由で
ボックスの高さが異なる場合は注意が必要です。

表示サンプルで言うと、ボックスの3番目や、
その下にボックスの無い、4番目、5番目なら
良いのですが、1番目や2番目が高くなってしまうと、
その下の段のボックスが、その高いボックスにひっかかり
一番左まで折り返すことができなくなってしまいます。

(サンプル「ボック場スの高さが異なる合(表示くずれ)」をご参照ください)


そのため、ボックスの高さを固定してしまうか、
折り返しの際にfloatをclearする必要があります。
(表示サンプルだと、3回ごとにclear)
 

floatする方向にmarginを開けない

これは、IE6.0のバグを回避するためです。

IE6.0では、
float:rightとmargin-right、
float:leftとmargin-left
を同じ要素に設定すると、
marginの開きが2倍になるというバグがあります。

(サンプル「IEでの表示くずれ(margin-left)」をご参照ください)

IE6.0で表示サンプルをご覧いただくと、一番左のmarginが2倍され、
ボックスが横に3つ並ばなくなってしまっているのが確認できると
思います。

floatと同じ方向に開きを設定する必要があるのであれば、marginではなくpaddingで
間を開ける必要があります。
 
今回は、基本的なことをご紹介しましたが、
ボックスの繰り返し方法について、少し応用的な使い方があります。

それはまたの機会にお話いたします。
posted by baba at 19:45 | Comment(0) | TrackBack(0) | テクニック

2007年09月14日

ロールオーバー画像の実現方法

今回は「ロールオーバー画像の実現方法」についてお話します。

ロールオーバー画像は、
グローバルナビ、サイドメニューなどの
ボタンリンクによく使用されています。

ホームページをコーディングする際には
決して避けては通れない、
不可欠な技術と言えます。

JavaScriptなどで実現する方法もありますが、
cssプログですので、
もちろんcssによる実現方法を
ご紹介します。

私からは
の2パターンご紹介します。
 

直接画像を置く方法

ボタン画像をdivなどで囲み
そのボタン画像を囲んだdivの背景に
ロールオーバー時の画像を設定します。

わかりにくいですが、ボタンを囲んだものの背景に
ロールオーバー時の画像を設定することで
ボタンの下に、ロールオーバー時の画像が
隠れている状態です。

そして、ボタンをマウスオーバーした際に、
ボタンの表示を消せば、
ボタンの下にあったロールオーバー時の画像が
現れ、あたかも画像が切り替わったかのように
見えます。

この方法は直接画像を置いているため、
ブラウザで背景画像を印刷しない設定に
なっていても、印刷することができます。
 
(htmlコーディング)
<div class="rollover01">
<a href="#"><img src="images/rollover_off.jpg" alt="ボタン" /></a>
</div>
(cssサンプル)
img {
border:0;
}
.rollover01 {
width:126px;
height:28px;
background:url(images/rollover_on.jpg) no-repeat left bottom;
}
.rollover01 a {
display:block;
width:126px;
height:28px;
font-size:1px;
line-height:1px;
outline:none;
}
.rollover01 a:hover {
text-indent:-9999px;
}
※サンプルではdivタグで囲んでいますが、liやddで囲むことが多いです。
 

テキストの置き換えを使った方法

この方法は、テキストと画像の置き換えを行い、
ボタンを背景画像で表示させます。

テキストと画像の置き換えについてはこちら
ご参照ください。

背景に設定する画像は、
通常時とロールオーバー時の画像を並べたものを
使用します。
これから、右のサンプル画像をもとにして
説明させていただきます。

 
背景画像のheightの半分のheightをアンカーに設定し、
background-positionをtopに設定することで、
通常時の画像のみ表示させます。
(サンプル画像のheightが56pxなので、
アンカーのheightは28pxになります。)

 
そして、マウスオーバーした際に、
background-positionをbottomにすれば、
画像が切り替わったかのように見えます。


この方法だと、画像ファイルが1つで済み、更新の際
迷うことがありません。

また、background-positionの
top、center、bottom
left、center、right
を使用することで、最大9パターン切り替えることが
できます。
(グローバルナビで、カレント表示用、
通常表示用、マウスオーバー用の3パターン必要な
場合などに使用)

positionにpxなどを設定すれば、
何パターンでも表示できますが、
Netscapeでは、xとy両方に数値を設定しないと
うまく表示できません。
(background-position:left -28px;はNG)
 
(htmlコーディング)
<div class="rollover02">
<a href="#">ボタン</a>
</div>
(cssサンプル)
img {
border:0;
}
.rollover02 a {
display:block;
width:126px;
height:28px;
background:url(images/rollover.jpg) no-repeat left top;
font-size:1px;
line-height:1px;
text-indent:-9999px;
text-decoration:none;
outline:none;
}
.rollover02 a:hover {
background-position:left bottom;
}
※サンプルではdivタグで囲んでいますが、liやddで囲むことが多いです。

横並びのボタン画像を使用したサンプル

 
(htmlコーディング)
<div class="rollover03">
<a href="#">ボタン</a>
</div>
(cssサンプル)
img {
border:0;
}
.rollover03 a {
display:block;
width:126px;
height:28px;
background:url(images/rollover.jpg) no-repeat left top;
font-size:1px;
line-height:1px;
text-indent:-9999px;
text-decoration:none;
outline:none;
}
.rollover03 a:hover {
background-position:right top;
}
※サンプルではdivタグで囲んでいますが、liやddで囲むことが多いです。
posted by baba at 20:45 | Comment(0) | TrackBack(0) | テクニック

2007年07月18日

tableのborderとwidth

今回は、テーブルの表示についてお話します。
cssコーディングと言えど、表を表現する際は、tableを使用します。
(使わない場合もありますが・・・)

ただ、私は、tableを使うと幅の指定など微調整がうまくいかず、
レイアウトが思うようにいかないため、(私だけ?)
tableを使用するのが苦手です。
そんな私を見かねてか、先輩社員がtableについて 教えてくれたことが今回のお題です。


tableの枠線の表示方法には「separate」と「collapse」の2種類あります。
 
separate - defaultの表示で、tableの枠線とtdの枠線が分かれて表示され、
その間にスペース(tableタグのcellspacing属性)が開きます。
(htmlコーディング)
<div class="section">
<table class="sample01">
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td></tr>
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td></tr>
</table>
</div>
(cssサンプル)
.section {
width:500px;
margin-bottom:10px;
background-color:#1D9CC7;
}
table {
width:100%;
margin:20px 0;
background-color:#CCCCCC;
}
table.sample01 {
border:10px solid #000000;
}
table.sample01 td {
border:10px solid #000000;
}
 
collapse - tableの枠線とtdの枠線を重ねて表示します。
(htmlコーディング)
<div class="section">
<table class="sample02">
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td></tr>
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td></tr>
</table>
</div>
(cssサンプル)
.section {
width:500px;
margin-bottom:10px;
background-color:#1D9CC7;
}
table {
width:100%;
margin:20px 0;
background-color:#CCCCCC;
}
table.sample02 {
border:10px solid #000000;
border-collapse: collapse;
}
table.sample02 td {
border:10px solid #000000;
}
 
多くの表の場合は後者の「collapse」を使用した際
の見た目であろうと思いますが、この「collapse」は
少し厄介な仕様になっているようです。

「separate」の場合のwidthはtable全体の幅を指しますが、
「collapse」の場合のwidthはtableの右の枠線の中心から、
左の枠線の中心まで、
今回のサンプルでは枠線の幅を10pxに設定しているため、
表が左右に5pxずつはみ出してしまいます。
(IE、Operaでは、はみ出しません)
 
この対処方法としては、「collapse」を使用せず、
「separate」で、border-spacingを0に設定し、
(IEの場合はtableタグのcellspacing属性を0に設定)
枠線の幅を表示したい幅の半分(今回は5px)
にすることで解決できるように思います。
(htmlコーディング)
<div class="section">
<table class="sample03" cellspacing="0">
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td></tr>
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td></tr>
</table>
</div>
(cssサンプル)
.section {
width:500px;
margin-bottom:10px;
background-color:#1D9CC7;
}
table {
width:100%;
margin:20px 0;
background-color:#CCCCCC;
}
table.sample03 {
border:5px solid #000000;
border-spacing:0;
}
table.sample03 td {
border:5px solid #000000;
}
 
しかし、枠線の幅が、1pxや3pxなど、奇数の場合は
対応できません。


枠線の幅が半分にできないのであれば、
枠線の表示方法を半分?にすれば良いのです。
(htmlコーディング)
<div class="section">
<table class="sample04" cellspacing="0">
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td></tr>
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td></tr>
</table>
</div>
(cssサンプル)
.section {
width:500px;
margin-bottom:10px;
background-color:#1D9CC7;
}
table {
width:100%;
margin:20px 0;
background-color:#CCCCCC;
}
table.sample04 {
border-right:10px solid #000000;
border-bottom:10px solid #000000;
border-spacing:0;/*IEの場合はtableタグにcellspacing="0"を追加*/
}
table.sample04 td {
border-top:10px solid #000000;
border-left:10px solid #000000;
}
このように、tableには下と左の枠線、
各tdには上と右の枠線と役割分担すれば
枠線の幅が、1pxだろうと3pxだろうと
対応することができます。
 
これで、テーブルの枠線と幅については
問題無くなりそうですが、
それでもテーブルは難しいです。

また、何かテーブルについて
私の弱点を克服できれば
ご紹介させていただきます。
posted by baba at 15:31 | Comment(0) | TrackBack(0) | テクニック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。