2010年05月14日

colspan使用時のテーブル列幅指定について

こんにちは。島津です。
今回は、テーブルの列の幅指定に関する話題です。

表組みを使う時、内容やデザインにしたがって
列の幅サイズを指定することはよくあると思いますが、
colspanによるセル結合と組み合わせて使った場合に
実はちょっとした落とし穴があります。

とりあえずサンプルをご覧下さい。

▼スクリーンショット

※上がWindows Firefox3、下がWindows Internet Explorer7です。
(htmlコーディング)
<table>
<tr>
<th class="col01">商品No.</th>
<th class="col02">商品名</th>
<th class="col03">価格</th>
<th class="col04">概要</th>
</tr>
<tr>
<td class="col01">01</td>
<td class="col02">キャロットケーキ</td>
<td class="col03">¥400</td>
<td class="col04">採れたての甘いにんじんを使った、見た目もかわいいケーキです。野菜が苦手なお子様にも</td>
</tr>
<tr>
<td class="col01">02</td>
<td class="col02">ミシシッピマッドケーキ</td>
<td class="col03">¥600</td>
<td class="col04">当店人気No.1!チョコレート生地にナッツがぎっしりの、濃厚な味わい。コーヒーとの相性も抜群です</td>
</tr>
<tr>
<td class="col01">03</td>
<td class="col02">シーフードケーキ</td>
<td class="col03">¥750</td>
<td class="col04">瀬戸内海産の新鮮な魚介をふんだんに使った、次世代スイーツ!強靭な胃腸をお持ちの方に。</td>
</tr>
<tr>
<td class="col01">04</td>
<td class="col02">激辛ハバネロケーキ</td>
<td class="col04" colspan="2">大変申し訳ございませんが、諸事情によりこちらの商品は取り扱いを中止させて頂きました。</td>
</tr>
</table>
(cssサンプル)
body {

color:#766;
font-size:75%;

}
table {

font-size:100%;
border:solid 1px #A99;
border-collapse:collapse;

}
th,td {

padding:5px;
border:solid 1px #A99;
text-align:center;

}
th {

background-color:#FFF4F7;

}
td {

background-color:#FFF9F4;

}
td.col03 {

text-align:right; color:#EE0000;

}
td.col04 {

text-align:left;

}

/* テーブル列幅指定 */
.col01 {

width:40px;

}
.col02 {

width:120px;

}
.col03 {

width:40px;

}
.col04 {

width:200px;

}
最下段、セルを結合した箇所の表示が異なっています。

Firefoxでは(デバッグツールのFirebugによると)
「col03」と「col04」を足し算した幅になっていました。

一方IE7では、表組み上セルは結合されているものの
中の要素はキッチリ「col04」の幅のままになっているようで、
右側に「col03」分の余白が空いています。

ブラウザによる仕様の違いだと思うのですが、
px単位で列幅を指定するとこの現象が起こるみたいです。

本当は結合セル用のクラスを定義するのが望ましいのですが、
結合のパターンがたくさんある場合はなかなか難しいかも知れませんので
ここはひとつ、幅指定の方針をちょっと変えてみます。

▼スクリーンショット

※上がWindows Firefox3、下がWindows Internet Explorer7です。
(cssサンプル)
/* テーブル列幅指定 */
table {

width:500px;

}
.col01 {

width:10%;

}
.col02 {

width:30%;

}
.col03 {

width:10%;

}
.col04 {

width:50%;

}
テーブルの幅の方を固定にし、列幅は%単位で指定しています。
クラスを増やさずCSSの修正だけで、同じように表示されるようになりました。

もともと、テーブルで列幅を%指定する場合は、合計が100%にならなくても
大抵ブラウザが勝手に調整してくれるので、px指定するより柔軟性があって
安全ではないかと思います(セル結合有無に関わらず)。

paddingやborderを一緒に指定する場合は、px指定の場合と
若干横幅が変わってくるので、最終的には目視で微調整するのが確実ですね。

今回は以上です。ありがとうございました。

posted by baba at 19:12 | Comment(0) | TrackBack(0) | 情報

2010年04月23日

zoomを使うとlist-style-typeがおかしくなる

こんばんわ、おひさしぶりです。
溝上です。
なんだかひさしぶりにブログを書く気がします。

そんなわけで今回は軽くリハビリがてら、
最近遭遇したIEのバグについてお話したいと思います。

それでは早速サンプルをご覧ください。
▼スクリーンショット

※スクリーンショットは、Windows Internet Explorer 6.0のものです。残念です。
(htmlコーディング)
<ol class="number">
  <li>あいうえお</li>
  <li>かきくけこ</li>
  <li>さしすせそ</li>
  <li>たちつてと</li>
</ol>
<ol class="alphabet">
  <li>あいうえお</li>
  <li>かきくけこ</li>
  <li>さしすせそ</li>
  <li>たちつてと</li>
</ol>
(cssサンプル)
li{

zoom:1;

}
ol {

margin-left:30px;

}
.number li {

list-style-type:decimal;

}
.alphabet li {

list-style-type:lower-alpha;

}

こちらのバグはIE6で
liタグにzoomが指定されていると
list-style-typeの表示がおかしくなる

というものです。
サンプルでは本来「1,2,3,・・・」と成るべき箇所がすべて「1」になっています。

それでも「IE6ならもういいのではないだろうか?」などと思わないでもありません。
しかし残念なことにこのバグはIE7でも発生します。
▼スクリーンショット

※スクリーンショットは、Windows Internet Explorer 7.0のものです。本当に残念です。

そんなわけで対策です。
対策方法としてはそもそもzoomを使わなければいいのですが
floatのclearの為などに意外とzoomって使われます。

zoomを指定したままで、解決するためにはzoomが指定されたliにdisplay:list-item;を指定してやれば解決します。
(cssサンプル)
ol li {

display:list-item;

}
▼スクリーンショット

※スクリーンショットは、Windows Internet Explorer 6.0のものです。

これで万事解決!と思いたいところですが、実はまだバグは残っています。
▼スクリーンショット

※スクリーンショットは、Windows Internet Explorer 6.0のものです。
(htmlコーディング)
<ol class="number">
  <li>あいうえお<br />
  ああああ<br />
  aaaaa</li>
  <li>かきくけこ</li>
      ・
      ・
      ・
liタグにzoomが指定されているとlist-style-typeの表示がテキストの改行に合わせて下がるというバグです。
これはひどい。

このバグを解決するにはliにvertical-align:topを指定すればなんとかなります。
(cssサンプル)
ol li {

display:list-item;
vertical-align:top;

}
▼スクリーンショット

※スクリーンショットは、Windows Internet Explorer 6.0のものです。

なんとかなりました。
zoomを指定する際、liにはご注意ください。
posted by baba at 08:45 | Comment(0) | TrackBack(0) | 情報

2010年03月05日

IE8.0のバグ 〜テキストの右側にリンクが表示されてしまうバグ

こんにちは、馬場です。

今回は「画像の縦方向のセンタリング その2」を
ご紹介する予定でしたが、予定を変更して、
IE8のバグ?について、お話しをさせていただきたいと思います。

実は、(CSSプログなのに)CSSのお話しではありませんが、
個人的に旬な話題でしたので、ご紹介させていただきます。

まずはこちらのサンプルをWindowsのIE8でご確認ください。

▼スクリーンショット

※スクリーンショットは、Windows Internet Explorer 8.0のものです。

(htmlコーディング)
<p><a href="#test1">ホーム</a>&nbsp;&gt;&nbsp;<a href="#test2">カテゴリ</a&gt;&nbsp;&gt;&nbsp;詳細</p>
サンプルを表示


サンプルは、Webサイトで良く使われている「パンくずリスト」を再現したものですが、
リンクが無いところで、マウスポインターが変わり、クリックするとちゃんと
リンクとして動作してしまいます。

バグの症状は、
インライン要素の先頭がaタグで始まっているときに、
インライン要素の最後に先頭で指定されたリンクが発生する

というもののようで、
途中でbrタグで改行しても、しっかりリンクが発生しますが、
aタグの前になにかしらのテキストがある場合は、
発生しないようでした。


はじめて見たときに、IE8のバグではないかと思いましたが、
検索をしてみても、それらしい情報を見つけることができませんでした。

なにかしらのスタイルが関係しているのかと思い、
スタイルを読み込まない状態にしてみましたが、
全く症状が治ることはありませんでした。


正直、治らないかと思いましたが、いろいろやってみると
発生しない条件を2つ見つけることができました。




DOCTYPEの宣言を外すことは難しいため、
2つ目の「何かしらのタグで囲む」対応となるかと思います。


strongでも、fontでもなんでも良いのですが、
サンプルではspanで囲んでみました。


▼スクリーンショット

※スクリーンショットは、Windows Internet Explorer 8.0のものです。

(htmlコーディング)
<p><a href="#test1">ホーム</a>&nbsp;&gt;&nbsp;<a href="#test2">カテゴリ</a&gt;&nbsp;&gt;&nbsp;<span>詳細</span></p>
サンプルを表示


無事にリンクが無くなったことを
ご確認いただけましたでしょうか?

今回は、CSSのお話しではありませんでしたが
関連している情報につきましては
今後もご紹介させていただきたいと思います。
posted by baba at 20:53 | Comment(0) | TrackBack(0) | 情報

2010年01月21日

画像の下に不要な余白が出るときの対処方法

こんにちは。島津です。
しばらく更新が滞ってしまいました!失礼致しました…

さて今回は、divやテーブルなどのブロック要素で画像を囲んだ際に
画像の下に不必要な余白が表示されてしまう場合の解消方法について
ご紹介しようと思います。

とりあえず実際の表示を見てみましょう。

▼スクリーンショット

※Windows IE7のものです。
(htmlコーディング)
<div>
  <img src="sample.jpg" alt="" />
</div>
<div>
  <img src="sample.jpg" alt="" /> abcdefg
</div>
(cssサンプル)
body {

font-size:40px;

}
div {

padding:0;
border:solid 1px #DDDDDD;

}
img {

margin:0;

}
divの内余白、imgタグの外余白とも0を指定しているはずなのに
画像の下に微妙な余白が出てしまっています。なぜでしょう?


そもそも、画像(imgタグ)はインライン要素ですので
サイズの大小に関わらず、テキストと同じように「行」の中に表示されます。
罫線付きノートに○や△を書き込むようなイメージです。

その際、画像のサイズが文字サイズと同じとは限らないので
画像を行の上端・下端どちらかに揃えて表示することになりますが、
何も指定しないと行の下端…ではなく、ベースラインに揃えられます。

ベースラインというのはこれです。
ローマ字と一緒に小学校で習った人も多いかと思います。
ベースライン
そんなわけで、ベースラインと行の下端の間分だけ余白が空くことになります。
HTML自体が元々英語を基準にしているので、仕方ないかと思いますが
画像を活用するレイアウトだと困ることもありますよね。

これを解消するには下記のように設定します。(方法は2通りあります。)
・行の高さを0にする方法
・画像の行揃えをテキストの下端にする方法


▼スクリーンショット

※Windows IE7のものです。
(htmlコーディング)
<div class="style01">
  <img src="sample.jpg" alt="" />
</div>
<br />
<div class="style02">
  <img src="sample.jpg" alt="" />
</div>
<br />
<div class="style02">
  <img src="sample.jpg" alt="" /> abcdefg
</div>
(cssサンプル)
body {

font-size:40px;

}
div {

padding:0;
border:solid 1px #DDDDDD;

}
img {

margin:0;

}
div.style01 {

/* 行の高さを0にする */
font-size:1px;
line-height:0;

}
div.style02 img {

/* テキストの下端に揃える */
vertical-align:text-bottom;

}
どちらの方法でも対応可能ですが、画像と一緒にテキストも表示する場合は
行の高さを0にすると、文字がはみ出たりつぶれたりしてしまいますので、
vertical-alignで対応することになります。

また、vertical-alignのパラメータはtext-bottom以外にも色々あります。
文字と画像の大小によってベストな揃え位置も変わってくるので、
状況に応じてうまく使い分けてみましょう。

今回の記事は以上です。
ありがとうございました。
タグ:画像 余白
posted by baba at 15:57 | Comment(0) | TrackBack(0) | 情報

2009年12月11日

font-sizeを%で指定するときにちょっと便利な一覧表

こんにちは、溝上です。

今回はfont-sizeを%指定するときにちょっと便利(かもしれない)font-sizeの指定方法をご紹介します。

以前の記事で先輩がfont-sizeについて書いていますのでぜひこちらも御覧下さい。

以前の記事で先輩はこう書かれています。
(bodyに)75%に指定すると、(サイトの基準が)12pxのフォントサイズになり、この大きさを基準にし、さらに85%にすれば、約10px、120%にすれば約14pxです。
※(〜)は私が足しました。

ただ、この文章内の『約』が示す通り正確なフォントサイズではありません。
ほとんどのブラウザでデフォルトの文字サイズは16pxになっていますので、
先輩の書かれた通りにfont-sizeを指定すると

16px × 0.75 × 0.85 = 10.2px
16px × 0.75 × 1.20 = 14.4px


となります。
ブラウザによっては小数点以下も反映されたり、line-heightの値にも影響します。
そこでなるべく小数点以下を含まない(もしくは無視できるほど小さい)値まで細かくfont-sizeを指定する必要がでてきます。

16px × 0.75 × 0.84 = 10.08px
16px × 0.75 × 1.17 = 14.04px


こんな感じです。
ただ、いちいちこんな計算していられませんよね。

というわけで一覧表を用意してみました。


基準フォントサイズ:12px (16px × 75% = 12px)
目標サイズ 8px 10px 12px 14px 16px 18px
指定% 67% 84% 100% 117% 134% 150%
実際のサイズ(px) 8.03333px 10.0833px 12px 14.0333px 16.0833px 18px


おまけで基準サイズが14pxの場合もご紹介します。
基準フォントサイズ:14px (16px × 87% = 14.0833px)
目標サイズ 8px 10px 12px 14px 16px 18px
指定% 57% 71% 86% 100% 114% 128%
実際のサイズ(px) 8.03333px 10px 12.1167px 14.0833px 16.05px 18.0333px
※実際のサイズはFirefoxのプラグイン『Firebug』を使用して算出しています。
※目標サイズをギリギリで超える%を指定しています。


いかがでしょうか。
私の場合、よく使う10px〜14pxあたりの%を覚えて使っています。
基準サイズが12pxのサイトで一回り小さくしたいときは84%、
基準サイズが14pxのサイトで一回り大きくしたい場合は114%、といった具合です。

posted by baba at 15:06 | Comment(0) | TrackBack(0) | 情報

2009年11月06日

初心者向けチェックポイント

こんにちは。島津です。

今回は、私がよく陥ったうっかりミスの経験を元に
「なぜかスタイルが適用されない!」と困ったときのための
CSS初心者向け超基本チェックポイントをまとめたいと思います。


 

▼クラス名のつけ方は正しいか

CSSクラス名に使える文字には制約があり、下記以外は使用できません。

  •  ・半角アルファベットの大文字または小文字(A〜Z、a〜z)
  •  ・半角数字(0〜9)
  •  ・ハイフン(-)
  •  ・アンダースコア(_)
  •  ・ASCII以外のUnicode文字

また、クラス名の先頭には数字とハイフンは使用できません。

例えばこんなネーミングは無効です。
(htmlコーディング)
<div class="2items-block">
  <p >要素A</p>
  <p >要素B</p>
</div>
<div class="items2-block">
  <p >要素A</p>
  <p >要素B</p>
  <p >要素C</p>
  <p >要素D</p>
</div>
(cssサンプル)
* {
padding:0;
margin:0;
}
div {
padding:10px;
margin:10px;
width:200px;
border:solid 1px #DDDDDD;
font-size:12px;
}
.2items-block p {
color:red;
}
.items2-block p {
color:blue;
}
▼スクリーンショット

※スクリーンショットは、Windows Firefox 3.0のものです。
この場合、「items2-block」の方は問題なく文字色の変更が出来ていますが
「2itms-block」はクラス名が無効なのでスタイルが反映されません。
クラス名を数字やハイフンで始まらないようなネーミングに変更しましょう。

 

▼他のスタイル定義で上書きされていないか

スタイルを定義出来る場所は複数箇所あります。
定義自体は間違っていないのに、なぜかいくら変更しても反映されない…
という時は、より優先度の高いスタイル定義に上書きされている場合があります。

例えば、ページの背景色を赤に変更したい場合

  •  ① BODYタグのstyle属性に「background-color:red;」を指定
  •  ② HEADタグ内のSTYLEタグで「body { background-color:red; }」を指定
  •  ③ 外部CSSで「body { background-color:red; }」を指定
  •  ④ BODYタグのbgcolor属性に「red」を指定

と4つの方法がありますが、同時に複数指定した場合は
@→A→B→Cの順で優先されるため、例えば外部CSSで「red」と指定しても
BODYタグのstyle属性で「blue」が指定されていると背景色は青になります。

同じ要素に対するスタイル定義はなるべく1ヵ所にまとめるようにしましょう。

 

▼同じプロパティが重複していないか

上の「他のスタイル定義で上書きされていないか」と似た内容になりますが、
例えば下記のように定義した場合どうなるかというと…
(cssサンプル)
p {

color:blue;
color:red;

}
p {

color:green;

}

この場合、Pタグの文字色はgreenになり、さらに下のp{}を削除するとredになります。
(※ Windows FireFox3.0の場合)

優先度が同じ範囲内で重複する定義があると、後から定義された方で
上書きされてしまうようですが、本来間違った記述なので
ブラウザによっては予期しない表示になる可能性もあります。

一度に一気にCSSのコーディングを進める場合などに
コピー&ペーストしたまま残ってしまうことがたまにあるので、
注意しましょう。

 
以上、とりあえずありがちなものを3つだけ挙げてみました。

チェックポイントとしては初歩中の初歩ですが、
慣れないうちは(慣れても油断すると…)こういったミスがよく出ると思います。
「あれ、なんで?」と思った時は基本的なところから順番にチェックしてみましょう!

今回はこれでおしまいです。
ありがとうございました。
posted by baba at 20:01 | Comment(0) | TrackBack(0) | 情報

2009年10月02日

marginとpadding その3

こんにちは。島津です。

前回・前々回と『margin』『padding』プロパティのお話をして来ましたが、
今回は『padding』プロパティについて、ちょっと使えるテクニックをご紹介します。

2番目は、知っておくといろいろ役に立ちそうな技です。
 

背景色をつけた要素でpaddingを使うと…

前々回の基本編ですでにご説明しましたが、
marginが要素の外側に対して余白を設定するのに対し、
paddingは要素の内側に対しての余白を設定します。

「要素の内側」に余白を入れるわけですから、marginの場合とは違って
余白の領域も要素の実体部分に含まれます。

ちょっとわかりにくいかも知れないですが、個人的なイメージでは
  • ・要素=段ボール箱
  • ・内余白=段ボール箱の内側にしきつめた、透明の梱包材
みたいなものかな〜と思ってます。
(さしずめmarginは箱の外につけたつっかえ棒?)


ブラウザの仕様の違いに影響されやすいmarginよりも
paddingの方が使い勝手がいいように思いますが
要素に対して背景色や背景画像を設定している場合は注意が必要です。

▼スクリーンショット

※スクリーンショットはWindows FireFox3.0のものです。
(htmlコーディング)
<div class="outer">
  <p>marginもpaddingもなし</p>
  <p class="text1">左にpadding</p>
  <p class="text2">左にmargin</p>
</div>
(cssサンプル)
* {

margin:0;
padding:0;

}
.outer {

width:150px;
padding:10px;
border:solid 1px #DDDDDD;

}
p {

padding-left:0;
margin-left:0;
background-color:#96C1C5;

}
.text1 {

padding-left:20px;

}
.text2 {

margin-left:20px;

}
 

Pタグだけでアイコン付きテキストを実現

上で説明した特性を応用すれば、こんなことが出来ます。

▼スクリーンショット

※スクリーンショットはWindows FireFox3.0のものです。
(htmlコーディング)
<div class="outer">
  <p>アイコンつきテキスト</p>
</div>
(cssサンプル)
* {

margin:0;
padding:0;

}
.outer {

padding:10px;
border:solid 1px #DDDDDD;

}
p {

color:#666666;
font-size:15px;
padding:0 0 0 20px;
background-position:left top;
background-repeat:no-repeat;
background-image:url(img/icon.gif);

}

paddingで確保した領域に、背景画像としてアイコンを表示しています。
IMGタグでアイコンを配置するより、ソースもすっきりして管理もラクになります。
paddingとbackground-positionを左側ではなく右側にすれば、更新履歴でよく見る
「NEW!」のような表示も可能です。

但し、CSSで設定できる背景は一つだけ(※)ですので、アイコンを複数つけたい場合は
Pタグを多重に囲むか、一番よく使うアイコンだけCSS+それ以外をIMGタグ…
といった使い分けをするか、なんらかの工夫が必要になります。
(※CSS2.0までのお話。CSS3.0からは複数設定できるようになるらしい??)

paddingで稼いだ領域に背景画像を出すテクニックを覚えておくと
何かと応用が効くようになるので、とても便利です。


marginとpaddingの初心者講座は、とりあえずこんなところで
いったんおしまいです。ありがとうございました。
posted by baba at 19:07 | Comment(0) | TrackBack(0) | 情報

2009年09月18日

IE6でfloadをかけたblock要素の親要素のwidthが伸びる

こんにちは。溝上です。

最近こんな運動もありますが、まだまだIE6対応はしなければいけないことって多いですよね・・・

そんなわけで今回はInternet Explorer6の

floatをかけたblock要素の親要素のwidthが伸びる

というバグを紹介したいと思います。

それでは早速サンプルを見ていただきたいと思います。


(htmlコーディング)
<div class="section">
<div class="block">
<div class="entry" id="entry01">
<h2 class="title">1111</h2>
</div>
<div class="entry" id="entry02">
<h2 class="title">2222</h2>
</div>
<div class="clear"> </div>
</div>
</div>
(cssサンプル)
* {
padding:0;
margin:0;
}
.clear {
clear:both;
height:0;
font-size:1px;
line-height:0;
visibility:hidden;
text-indent:-9999px;
}
.section {
width:650px;
background-color:#9FF;
}
.section .block {
width:630px;
margin:0 auto;
background-color:#F00;
}
.section .entry {
float:left;
width:300px;
margin-right:15px;
background-color:#9F9;
}
.section .entry h2.title {
width:300px;
padding:10px 0;
}

ではまずはFirefoxから。
▼スクリーンショット(Firefox3.0)
さすがFirefox。意図通りですね。

では次に問題児のIE6をご覧ください。
▼スクリーンショット(Internet Explorer6)
floatをかけているentryの親であるblockの幅が伸びているのが
お分かりいただけたかと思います。
どうにもIE6では

floatさせた最後の要素(clearする前)のfloatと反対側のmarginが伸びる
ことがあるようです。(←重要です)

その後、親要素を伸びた値にあわせて広げたりすることがあるようです。(←重要)

これはひどい。
いままでたまに計算はあってるはずなのになぜかIE6でfloatが崩れたり、
なぜかセンタリングした要素がやたら左によってたりしたのは
恐らくこのバグのせいでしょう。

解決策としては最後の要素のmarginをとるのが一番手っ取り早いと思います。

(cssサンプル)
.section .entry#entry02 {
margin-right:0;
}
▼スクリーンショット(Internet Explorer6)

なんとか見た目は整いました。
なぜ最後だけmarginが伸びるのだろうとか、なんで親要素の幅まで伸ばすんだとか、
いろいろとIE6に突っ込みを入れたいですね。


そんなわけで今回はInternet Explorer6の

floatをかけたblock要素の親要素のwidthが伸びる

というバグを紹介したいと思います。

それでは早速サンプルを見ていただきたいと思います。


(htmlコーディング)
<div class="section">
<div class="block">
<div class="entry" id="entry01">
<h2 class="title">1111</h2>
</div>
<div class="entry" id="entry02">
<h2 class="title">2222</h2>
</div>
<div class="clear"> </div>
</div>
</div>
(cssサンプル)
* {
padding:0;
margin:0;
}
.clear {
clear:both;
height:0;
font-size:1px;
line-height:0;
visibility:hidden;
text-indent:-9999px;
}
.section {
width:650px;
background-color:#9FF;
}
.section .block {
width:630px;
margin:0 auto;
background-color:#F00;
}
.section .entry {
float:left;
width:300px;
margin-right:15px;
background-color:#9F9;
}
.section .entry h2.title {
width:300px;
padding:10px 0;
}

ではまずはFirefoxから。
▼スクリーンショット(Firefox3.0)
さすがFirefox。意図通りですね。

では次に問題児のIE6をご覧ください。
▼スクリーンショット(Internet Explorer6)
floatをかけているentryの親であるblockの幅が伸びているのが
お分かりいただけたかと思います。
どうにもIE6では

floatさせた最後の要素(clearする前)のfloatと反対側のmarginが伸びる
ことがあるようです。(←重要です)

その後、親要素を伸びた値にあわせて広げたりすることがあるようです。(←重要)

これはひどい。
いままでたまに計算はあってるはずなのになぜかIE6でfloatが崩れたり、
なぜかセンタリングした要素がやたら左によってたりしたのは
恐らくこのバグのせいでしょう。

解決策としては最後の要素のmarginをとるのが一番手っ取り早いと思います。

(cssサンプル)
.section .entry#entry02 {
margin-right:0;
}
▼スクリーンショット(Internet Explorer6)

なんとか見た目は整いました。
なぜ最後だけmarginが伸びるのだろうとか、なんで親要素の幅まで伸ばすんだとか、
いろいろとIE6に突っ込みを入れたいですね。

タグ:IE6 CSS 崩れ float
posted by baba at 17:37 | Comment(0) | TrackBack(0) | 情報

2009年08月28日

overflowの中のposition

こんにちは、馬場です。


webページ内で、
縦に長いコンテンツがあった場合、
その部分をスクロールさせることが
あると思います。

例えば、
会員登録の利用規約や
サイドメニューの新着部分等で
使うことがあると思いますが、
スクロールさせる場合は
overflowを使うことで実現できます。


今回は
スクロール(overflow)の中で、
positionを使った際の注意点について
お話させていただきます。
(IE限定の注意点です。)




▼スクロールしない・・・(IE限定)


スクロールについては、
overflow:autoし、
heightを設定することで、
heightの値を超えた内容が
スクロールで確認できるようになります。

(widthを設定し、表示内容がその値を超えれば
横へのスクロールとなります。)


例えば、スクロールの中で、
テキストの後ろにアイコン表示をするために
positionで位置調整をしようとすると
IEでは、そのアイコンがスクロールしなくなってしまいます。

(「テキストの横に並ぶ画像の位置合わせ」についてはコチラ


▼スクリーンショット
   
左がスクロール前、右がスクロール後です。
スクロールしても、アイコンの位置が変わっていません。
※スクリーンショットは、Windows Internet Explorer 6.0のものです。

(htmlコーディング)
<div class="wrapper01">
<p>スクロール01</p>
<p>スクロール02 <img src="images/icon_check.gif" alt="check!" /></p>
<p>スクロール03</p>
<p>スクロール04</p>
<p>スクロール05 <img src="images/icon_check.gif" alt="check!" /></p>
<p>スクロール06</p>
<p>スクロール07</p>
<p>スクロール08</p>
<p>スクロール09</p>
<p>スクロール10 <img src="images/icon_check.gif" alt="check!" /></p>
<p>スクロール11</p>
<p>スクロール12</p>
<p>スクロール13</p>
<p>スクロール14</p>
<p>スクロール15</p>
<p>スクロール16</p>
<p>スクロール17 <img src="images/icon_check.gif" alt="check!" /></p>
<p>スクロール18</p>
<p>スクロール19</p>
<p>スクロール20</p>
<p>スクロール21</p>
<p>スクロール22</p>
</div>
(cssサンプル)
* {

margin:0;
padding:0;

}
.wrapper01 {

overflow:auto;
width:180px;
height:200px;
margin:30px;
font-size:16px;

}
.wrapper01 img {

position:relative;
top:2px;

}


position:relative
(通常の位置を基準とした相対的な配置)
なので、
スクロールしないのが正しいと
思えなくもないですが、
どうなのでしょうか?


私、個人的には
ややこしいので、
スクロールしていただきたいところです。

WindowsのIE6.0と7.0で
スクロールしないことを
確認しました。
(IE8.0では解決しているようです。)



▼無事にスクロール


IEだけスクロールしないのでは、
ひどく気持ちが悪いので
いろいろと試していると
解決策が見つかりました。

overflowを設定している要素へ
positoin:relativeを設定することで
無事にスクロールしていきました。


▼スクリーンショット
   
左がスクロール前、右がスクロール後です。
アイコンの位置が変わっているのが確認できます。
※スクリーンショットは、Windows Internet Explorer 6.0のものです。

(htmlコーディング)
<div class="wrapper02">
<p>スクロール01</p>
<p>スクロール02 <img src="images/icon_check.gif" alt="check!" /></p>
<p>スクロール03</p>
<p>スクロール04</p>
<p>スクロール05 <img src="images/icon_check.gif" alt="check!" /></p>
<p>スクロール06</p>
<p>スクロール07</p>
<p>スクロール08</p>
<p>スクロール09</p>
<p>スクロール10 <img src="images/icon_check.gif" alt="check!" /></p>
<p>スクロール11</p>
<p>スクロール12</p>
<p>スクロール13</p>
<p>スクロール14</p>
<p>スクロール15</p>
<p>スクロール16</p>
<p>スクロール17 <img src="images/icon_check.gif" alt="check!" /></p>
<p>スクロール18</p>
<p>スクロール19</p>
<p>スクロール20</p>
<p>スクロール21</p>
<p>スクロール22</p>
</div>
(cssサンプル)
* {

margin:0;
padding:0;

}
.wrapper02 {

overflow:auto;
position:relative;
width:180px;
height:200px;
margin:30px;
font-size:16px;

}
.wrapper02 img {

position:relative;
top:2px;

}


「なんだか、できそうな感じがする」
と思い、設定してみたのですが、
本当にできてしまいました。

IEの気持ちが少しわかった気がします。。。


posted by baba at 20:19 | Comment(0) | TrackBack(0) | 情報

2009年08月21日

『table-layout』を使おう! その3

こんにちは。
溝上です。

『table-layout』を使おう! その3』をお送りします。
3回続いたtable-layoutの紹介も今回で最終回となります。
それでは今まで同様にtable-layoutの効果を簡単に説明します。

table-layoutにfixedを指定すると
1.tableの幅が指定されており、th,tdで幅が指定されていない場合、同じ幅になる
2.1行目のtd,thの幅が2行目以降に適用される
3.ページの表示速度がUPする

▼ページの表示速度がUPする


前回前々回とtable-layoutを調べ始めたとき、もっとも驚いた効果が
ページの表示速度がUPするです。
前回でも説明しましたが、table-layoutがfixedの場合
1行目が読み込まれた時点でth,tdの幅を決定しているようです。
その為、表示に関する処理が省かれ、ページの表示速度がUPする・・・らしいです。
これはもう実際にサンプルを作って計測してみるしかない!
というわけでどうぞ。

(cssサンプル)
body {
  padding:15px;
}
.section {
  width:100%;
  padding-bottom:30px;
}
table {
  table-layout:fixed;
  width:100%;
}
table th,
table td {
  border:1px solid #000000;
}
htmlコーディング例
<div class="section">
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>



autoの場合
fixedの場合
※とても巨大なtableのサンプルを使用しています。注意!

上記のサンプルを私の環境でキャッシュを消しながら10回ずつ表示させ、
Firefoxのアドオン『YSlow』を使って表示速度を計ってみました。
(私のやった結果なのであくまで参考程度にどうぞ)

(※単位:秒) auto fixed  
1回目 0.409 0.395  
2回目 0.402 0.403  
3回目 0.4 0.392  
4回目 0.411 0.392  
5回目 0.431 0.398  
6回目 0.4 0.391  
7回目 0.415 0.399  
8回目 0.417 0.403  
9回目 0.4 0.402  
10回目 0.415 0.401
平均 0.41 0.3976 0.0124

おお、早くなってる。
fixedを指定した場合、autoと比べ確実にちょっとだけ早くなっています。
・・・本当にちょっとですね。
もっと劇的に効果がわかるようなソースが見つけられれば良かったのですが・・・

でもCSSのプロパティを1行追加して表示速度がUPする、
というのはとても魅力的だと思います。
使える場面ではどんどん指定していくと素敵ですね。
posted by baba at 19:23 | Comment(0) | TrackBack(0) | 情報

2009年08月10日

marginとpadding その2

こんにちは。島津です。

前回『margin』『padding』プロパティの基本をご紹介しました。
本日は『margin』プロパティについて、もう少し詳しいお話をします。

とりあえず今回は、押さえておいた方がいいものとして
この2つについてご説明します。
 

floatと同じ方向にmarginを設定するときの注意

IE6の有名なバグで、float使用時に同じ方向にmarginを指定すると
marginの幅が指定値の倍になってしまいます。

▼スクリーンショット
   
※左がWindows IE6、右がWindows FireFox3.0のものです。
(htmlコーディング)
<div class="outer">
  <p class="inner">50px</p>
  <div class="clear">&nbsp;</div>
</div>
(cssサンプル)
.outer {

width:150px;
background-color:#BCD8DA;

}
.inner {

float:left;
width:50px;
margin:5px 0 5px 50px;
background-color:#96C1C5;
font-size:12px;
text-align:center;

}
かと言って、IE6のために倍になるのを見越して半分の値を指定すると
他のブラウザで見たときに余白が狭くなってしまいますね。
これを回避したい場合、例えば以下のような方法があります。

▼スクリーンショット
   
※左がWindows IE6、右がWindows FireFox3.0のものです。
(htmlコーディング)
<div class="outer">
  <p class="inner">50px</p>
  <div class="clear">&nbsp;</div>
</div>
(cssサンプル)
.outer {

width:100px;
padding-left:50px;
background-color:#BCD8DA;

}
p {

float:left;
width:50px;
margin:5px 0;
background-color:#96C1C5;
font-size:12px;
text-align:center;

}
内側の要素の左marginで空けていた余白を、外側の要素の左paddingに変更しました。
これならIE6でも他のブラウザでも、同じ表示結果になります。
 

要素のmargin同士がぶつかるとどうなるか

上側の要素に下マージン10px、下側の要素に上マージン10pxが
設定されていた場合、2つの要素の間隔は何pxになるでしょうか?

▼スクリーンショット
   
※左がWindows IE6、右がWindows FireFox3.0のものです。
(htmlコーディング)
<div>
  <h3>ブロック1</h3>
  <p>第一段落のテキスト第一段落のテキスト第一段落のテキスト。</p>
  <p>第二段落のテキスト第二段落のテキスト第二段落のテキスト。</p>
  <p>第三段落のテキスト第三段落のテキスト第三段落のテキスト。</p>
</div>
<div>
  <h3>ブロック2</h3>
  <p>第一段落のテキスト第一段落のテキスト第一段落のテキスト。</p>
  <p>第二段落のテキスト第二段落のテキスト第二段落のテキスト。</p>
  <p>第三段落のテキスト第三段落のテキスト第三段落のテキスト。</p>
</div>
(cssサンプル)
div {

margin:10px 0 0 0;
width:200px;
font-size:12px;

}
h3 {

background-color:#FFE6D9;
margin:0;

}
p {

border:dashed 1px #DDDDDD;
margin:0 0 10px 0;
padding:0;

}
Pタグの下マージン10px + DIVタグの上マージン10px = 20px
…とはなりません。

marginはあくまで他の要素本体に対する距離を指定するもので、
他の要素のmargin領域に対しては効きません。
ですので、margin同士がぶつかった場合、結果的には小さい方が無視され
数値の大きい方が優先されます。

※FireFox2.0、FireFox3.0、Windows Safari3で確認済。
※ただし、IEでは例外的に、margin同士が重ならず加算した値分だけ
 余白が空くようです。(キャプチャ参照)

両方の要素の余白を合算させたいなら、例えば以下のような方法があります。
▼スクリーンショット
   
※左がWindows IE6、右がWindows FireFox3.0のものです。
(htmlコーディング)
<div>
  <h3>ブロック1</h3>
  <p>第一段落のテキスト第一段落のテキスト第一段落のテキスト。</p>
  <p>第二段落のテキスト第二段落のテキスト第二段落のテキスト。</p>
  <p>第三段落のテキスト第三段落のテキスト第三段落のテキスト。</p>
</div>
<div>
  <h3>ブロック2</h3>
  <p>第一段落のテキスト第一段落のテキスト第一段落のテキスト。</p>
  <p>第二段落のテキスト第二段落のテキスト第二段落のテキスト。</p>
  <p>第三段落のテキスト第三段落のテキスト第三段落のテキスト。</p>
</div>
(cssサンプル)
div {

margin:10px 0 0 0;
width:200px;
font-size:12px;

}
h3 {

background-color:#FFE6D9;
margin:0;

}
p {

border:dashed 1px #DDDDDD;
margin:0;
padding:0 0 10px 0;

}
この例では、上側の要素の下余白にmarginではなくpaddingを使っています。
paddingは内側の余白なので要素本体の一部ということになり、
Pタグの下余白を活かしながらもブロック間にまとまった余白が出来ました。

こんなふうに、marginだけでどうもうまくいかなくなったときは
paddingも併用してみるとうまくいくことがあります。
いろいろ試してみましょう。


次回はもう片方の『padding』プロパティについて、
もう少し詳しくお話したいと思います。
posted by baba at 21:03 | Comment(0) | TrackBack(0) | 情報

2009年07月17日

『table-layout』を使おう! その2

こんにちは。
溝上です。

今回は『table-layoutを使おう! その2』をお送りします。
まずは前回と同じく、table-layoutの効果を簡単に説明します。

table-layoutにfixedを指定すると
1.tableの幅が指定されており、th,tdで幅が指定されていない場合、同じ幅になる
2.1行目のtd,thの幅が2行目以降に適用される
3.ページの表示速度がUPする

▼1行目のtd,thの幅が2行目以降に適用される


それでは前回の続きからご紹介します。
table-layoutにfixedを指定すると1行目で指定した幅が2行目以降にも適用されます。
まずはサンプルをどうぞ。
(cssサンプル)
body {
  padding:15px;
}
.section {
  width:400px;
  padding-bottom:30px;
}
table {
  width:100%;
}
table.auto {
  table-layout:auto;
}
table.fixed {
  table-layout:fixed;
}

table td {
  padding:10px;
  border:1px solid #000000;
}
table .w50 {
  width:50px;
}
htmlコーディング例
<div class="section">
<table class="auto">
<tr>
<td class="w50">width:50px</td>
<td>指定無し</td>
<td>指定無し</td>
</tr>
<tr>
<td>指定無し</td>
<td class="w50">width:50px</td>
<td>指定無し</td>
</tr>
</table>
</div>

<div class="section">
<table class="fixed">
<tr>
<td class="w50">width:50px</td>
<td>指定無し</td>
<td>指定無し</td>
</tr>
<tr>
<td>指定無し</td>
<td class="w50">width:50px</td>
<td>指定無し</td>
</tr>
</table>
</div>

さて、autoとfixedではどう変わるでしょうか。
まずはautoの場合をどうぞ。

▼スクリーンショット(table-layout:auto)

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

続いてfixedの場合。

▼スクリーンショット(table-layout:fixed)

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

table-layoutがautoの場合、2行目のtdの幅指定が効いて一番左と真ん中の列が同じ幅になっています。
table-layoutがfixedの場合、1行目で指定した幅のみ効いていて2行目の幅指定は無視されています。
1行目が読み込まれた時点でth,tdの幅を決定してるらしいです。

ちなみにtableの幅が指定させていなければth,tdの2行目以降の幅指定も有効になるみたいです。

次回はいよいよ最後、『ページの表示速度がUPする』についてお伝えしたいと思います。
タグ:CSS table-layout
posted by baba at 19:42 | Comment(0) | TrackBack(0) | 情報

2009年07月13日

marginとpadding

こんにちは。島津です。
今回が初記事です。よろしくお願いいたします。

今日は、スタイルシートで余白を設定する際に使用する
『margin』及び『padding』プロパティについてご紹介します。

各プロパティの詳しい情報や応用テクニック、ブラウザ別の挙動などの
深いお話は次回・次々回で触れることにして、今回は初めて(記事の担当が)ですので
まず『margin』と『padding』の超・基本からご説明します。


どちらも、要素の余白を指定するためのプロパティですが、
『margin』が対象要素の外側の余白を設定するのに対し、
『padding』プロパティは対象要素の内側の余白を設定します。

図で表すと、こんな感じになります。

具体的な実装例を見てみましょう。

・marginプロパティ

要素の外側、つまりスタイルを設定する対象の要素と
他の要素との間の余白を設定します。
ここではとりあえず、IMGタグで試してみます。

▼スクリーンショット
   
※スクリーンショットは、windows Firefox3.0のものです。
左はmargin未設定、右はmargin設定をしたスクリーンショットになります。
(htmlコーディング)
<img src="img1.jpg" alt="" /><img src="img2.jpg" alt="" /><img src="img3.jpg" alt="" />
(cssサンプル)
img {

width:35px;
height:35px;
margin-right:5px;

}
各IMGタグの右側に、5pxの余白を開けてみました。
marginプロパティは、インライン要素でもブロック要素でも同じように使えます。
特にこれといってわかりにくいところはないかと思いますが、どうでしょうか?

 次、paddingプロパティです。

・paddingプロパティ

要素の内側の余白を設定します。
タグによっては「内側ってどこ?」となりますが、
ここではとりあえず、DIVタグの中に画像を入れて試してみます。
(グレーの枠線で囲まれた部分がDIVタグです。)

▼スクリーンショット
   
※スクリーンショットは、windows Firefox3.0のものです。
左はpadding未設定、右はpadding設定をしたスクリーンショットになります。
(DIVタグは幅を指定しないと横幅いっぱいに広がるので、右側には最初から余白が空いています。)
(htmlコーディング)
<div class="imgWrap">

<img src="img1.jpg" alt="" />

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

border:solid 1px #DDDDDD;
padding:20px;

}
paddingプロパティはブロック要素に対して使用します。
インライン要素は基本的に「高さ・幅」の概念はないので
基本的にはpaddingプロパティは使用しません(※)。

※ インライン要素にpaddingを設定するケースもあります。
 詳しくは次回以降にご説明します。

とりあえず、基本中の基本の知識は以上です。

次回、『margin』『padding』各プロパティの応用編に続きます。
posted by baba at 20:30 | Comment(0) | TrackBack(0) | 情報

2009年06月12日

『table-layout』を使おう! その1

こんにちは。
溝上です。

今回は『table-layout』というプロパティを紹介したいと思います。

実は先日まで

先輩:「溝上君。今度のブログはtable-layoutについて書いてみなよ」
溝上:「え? 何ですかそれ?」


『table-layout』というプロパティがあることを知りませんでした・・・

そこで調べてみるとなかなか面白いプロパティだとわかりました。

私なりに簡単に説明するとこうなります。

table-layoutにfixedを指定すると
1.tableの幅が指定されており、th,tdの幅が指定されていない場合、同じ幅になる
2.1行目のth,tdの幅が2行目以降に適用される
3.ページの表示速度がUPする

▼tableの幅が指定されており、th,tdの幅が指定してない場合同じ幅になる


今回は『th,tdの幅が指定されていない場合、同じ幅になる』について紹介したいと思います。
それでは早速サンプルを紹介したいと思います。
(cssサンプル)
body {
  padding:15px;
}
.section {
  width:400px;
  padding-bottom:30px;
}
table {
  table-layout:auto;
  width:100%;
}
table.fixed {
  table-layout:fixed;
}
table th,
table td {
  padding:10px;
  border:1px solid #000000;
}
htmlコーディング例
<table>
<tr>
<td>短いテキスト</td>
<td>中くらいのテキスト</td>
<td>長あああああいテキスト</td>
</tr>
<tr>
<td>短いテキスト</td>
<td>中くらいのテキスト</td>
<td>長あああああいテキスト</td>
</tr>
</table>

<table class="fixed">
<tr>
<td>短いテキスト</td>
<td>中くらいのテキスト</td>
<td>長あああああいテキスト</td>
</tr>
<tr>
<td>短いテキスト</td>
<td>中くらいのテキスト</td>
<td>長あああああいテキスト</td>
</tr>
</table>

それでは早速スクリーンショットを見ていただきましょう。
まずはtable-layoutにデフォルトであるautoを指定した場合です。

▼スクリーンショット(table-layout:auto)

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

いたって普通ですね。
列の幅がテキストの長さによって変わっています。
次はtable-layoutにfixedを指定した場合です。

▼スクリーンショット(table-layout:fixed)

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

すべての列の幅が同じ幅になりました。
ちなみにtableのwidthが指定されていないと同じ幅にはなりません。

table-layout:fixedを指定すると、tableのwidthからth,tdで指定されたwidthを引いた残りをwidthが指定されていないものに均等に割り振っているようです。

口ではうまく説明できませんので、サンプルをどうぞ。
(cssサンプル)
table .w50 {
  width:50px;
}
htmlコーディング例
<table class="fixed">
<tr>
<td class="w50">短いテキスト</td>
<td>中くらいのテキスト</td>
<td>長あああああいテキスト</td>
</tr>
<tr>
<td>短いテキスト</td>
<td>中くらいのテキスト</td>
<td>長あああああいテキスト</td>
</tr>
</table>
▼スクリーンショット(table-layout:fixed)

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

1つめのtdにwidth:50pxを指定したため、残り2つのwidthを指定していないtdに対して余った幅を均等に割り振っています。
thだけ幅を決めて、残りのtdの幅を同じにしたい・・・なんて状況は結構多いですよね。
そんな時、table-layoutを使えば便利だと思います。


次回は『1行目のth,tdの幅が2行目以降に適用される』『ページの表示速度がUPする』について紹介したいと思います。
posted by baba at 18:04 | Comment(0) | TrackBack(0) | 情報

2008年10月16日

IE6.0のバグ 〜idとclassを両方設定した際

こんにちは。
馬場です。


今回はIE6.0のバグについてお話します。

1つのタグにidとclassを両方設定した際に
起きるバグです。
(わかりづらくて、すいません。。。)

このバグが発生する条件は
少し限られていて、
idで設定したスタイルを
classを付け替えることによって、
見た目を変更しようとすると
発生します。

ページのレイアウトは一緒だけど、
色違いのページが数パターンある
という場合などで
使用するかもしれませんね。


▼バグの発生条件▼
・IE6.0で確認している。
・1つのタグにidとclassを設定している。
・classを切り替えることにより、スタイルを切り替えている。
・セレクタの最後がそのidとclassの指定で終わっている。
▼症状▼
最初にidとclassの両方で設定したスタイルのみ適応され、
それ以降のclassの付け替えによるスタイルが
適応されない。

※比較しやすいように、
サンプルでは同じIDを同ページ内で
複数箇所使用していますが、
異なるページで同じスタイルを読み込むと
バグが出てしまうことは確認済みです。



 

■バグの症状

まずは、ソースをごらんください。

※確認用のため、ページ内で同じidを複数箇所で使用しています。

(htmlコーディング)
<div id="wrapper01">
<div id="title01" class="style01">
<p>バグテスト01</p>
</div>
<div id="title01" class="style02">
<p>バグテスト01</p>
</div>
<div id="title01" class="style03">
<p>バグテスト01</p>
</div>
</div>
(cssサンプル)
#title01 {
width:20em;
margin-bottom:5px;
padding:2px 5px;
background-color:#CCCCCC;
color:#FFFFFF;
font-weight:bold;
}
#title01.style01 {
background-color:#FF3333;
}
#title01.style02 {
background-color:#0000FF;
}
#title01.style03 {
background-color:#339900;
}


上記のソースでは、
title01というidに
classを付けることで、
背景色を切り替えています。


下の画像は
上記のソースを
firefox2.0で確認したものと
IE6.0で確認したものの
スクリーンショットです。




firefox2.0では
スタイルの指定どおり、
classの付け替えで
帯の色が変わっているのが
確認できますが、
IE6では、
一番上に記述した「style01」クラスの
スタイルのみ反映され、
その他の「style02」クラス、
「style03」クラスは
適応されていないのが
確認できると思います。


スタイルの設定では、
「style01」クラス
「style02」クラス
「style03」クラス
の順番に記述していますが、

例えば、
「style02」クラス
「style03」クラス
「style01」クラス
のように順番を変更すると

一番上の「style02」クラスが適応され
「style01」クラス
「style03」クラス
は適応されないことから、
「一番最初に記述したスタイルのみ
適応されている」ことが想像できます。




また、
2つ目以降のスタイルを
#wrapper01 #title01.style02
のように
スタイルの上書きを試みても、
反映されませんし、
!importantも効きません。

※確認用のため、ページ内で同じidを複数箇所で使用しています。

(htmlコーディング)
<div id="wrapper02">
<div id="title02" class="style01">
<p>バグテスト02</p>
</div>
<div id="title02" class="style02">
<p>バグテスト02</p>
</div>
<div id="title02" class="style03">
<p>バグテスト02</p>
</div>
</div>
(cssサンプル)
#title02 {
width:20em;
margin-bottom:5px;
padding:2px 5px;
background-color:#CCCCCC;
color:#FFFFFF;
font-weight:bold;
}
#title02.style01 {
background-color:#FF3333;
}
#wrapper02 #title02.style02 {
background-color:#0000FF;
}
#title02.style03 {
background-color:#339900 !important;
}

 

■バグの回避方法


バグの発生条件にも
書きましたが、
どうやらセレクタの最後で
クラスの付け替えによる
スタイルの上書きをしようと試みた際に
発生するようなので、
最後に別のものを追加すれば
回避することができます。

下記のソースでは、
セレクタの最後をpにすることで
バグを回避しています。


※確認用のため、ページ内で同じidを複数箇所で使用しています。

(htmlコーディング)
<div id="wrapper03">
<div id="title03" class="style01">
<p>バグテスト03</p>
</div>
<div id="title03" class="style02">
<p>バグテスト03</p>
</div>
<div id="title03" class="style03">
<p>バグテスト03</p>
</div>
</div>
(cssサンプル)
#title03 p {
width:20em;
margin-bottom:5px;
padding:2px 5px;
background-color:#CCCCCC;
color:#FFFFFF;
font-weight:bold;
}
#title03.style01 p {
background-color:#FF3333;
}
#title03.style02 p {
background-color:#0000FF;
}
#title03.style03 p {
background-color:#339900;
}

上記サンプルのように
pタグなどで囲まれていない場合は
新たに囲む必要はありますが、
コーディング規約などにより、
htmlのソースを修正できない場合以外は
特に問題ないと思います。



また、セレクタの最後が
idとclassの指定で終わっていなければ
問題ないようなので、
セレクタではclassのみの指定にし、
!importantを付けることでも
回避できるようです。

※確認用のため、ページ内で同じidを複数箇所で使用しています。

(htmlコーディング)
<div id="wrapper04">
<div id="title04" class="style01">
<p>バグテスト04</p>
</div>
<div id="title04" class="style02">
<p>バグテスト04</p>
</div>
<div id="title04" class="style03">
<p>バグテスト04</p>
</div>
</div>
(cssサンプル)
#title04 {
width:20em;
margin-bottom:5px;
padding:2px 5px;
background-color:#CCCCCC;
color:#FFFFFF;
font-weight:bold;
}
#title04.style01 {
background-color:#FF3333;
}
.style02 {
background-color:#0000FF !important;
}
.style03 {
background-color:#339900 !important;
}
posted by baba at 12:34 | Comment(0) | TrackBack(0) | 情報

2007年08月10日

フォントサイズの指定

今回はフォントサイズの指定についてお話します。

webページでフォントサイズを指定することは
カテゴリ分け、
ユーザビリティー(ページの見やすさ、使いやすさ)、
見せたい部分の強調など
さまざまな意味を持っていると思います。

フォントサイズの指定は、
特に難しいわけではありませんが、
知っていて損をしない情報を紹介します。
 

単位について

フォントサイズを指定する単位には
pt em px % など、さまざまなものがあります。

一番わかりやすく、使いやすいのが、px指定だと
思います。

しかし、pxで指定してしまうと、
IEの場合、ブラウザで文字サイズを変更しても、
表示されている文字の大きさは変更されません。

ユーザビリティーを考えると、
文字サイズを固定してレイアウト崩れを
回避する場合以外はpx指定より、
%指定するほうが、ベターであると言えます。
 

%指定のうまい使い方

%指定するほうがベターではありますが、
%だと、イマイチ文字の大きさが
イメージしにくいとは思いませんか?

そんなときは、簡単なルールを作って
しまえば、楽になります。


例えば、ページ全体のフォントを
75%に指定してしまいます。

75%に指定すると、12pxのフォントサイズに
なり、この大きさを基準にし、
さらに85%にすれば、約10px、
120%にすれば約14pxです。

よく使用するフォントサイズは
だいたい決まっていると思いますので
そのパターンだけ決めておけば
コーディングをよりスムーズに
行うことができるはずです。
(htmlコーディング)
あいうえお(サイズ指定なし)
<div class="percent75">
あいうえお(75%)
<div class="px12">
あいうえお(12px)
</div>
<div class="percent85">
あいうえお(75% × 85%)
</div>
<div class="px10">
あいうえお(10px)
</div>
<div class="percent120">
あいうえお(75% × 120%)
</div>
<div class="px14">
あいうえお(14px)
</div>
</div>
(cssサンプル)
.percent75 {
font-size:75%;
}
.percent85 {
font-size:85%;
}
.percent120 {
font-size:120%;
}
.px10 {
font-size:10px;
}
.px12 {
font-size:12px;
}
.px14 {
font-size:14px;
}
 

便利ツールについて

フォントサイズを%指定で決める場合、 「これは、いったい何pxなんだ?」
と思った際は、私は
Firefoxのアドオンである「Firebug」
を使い、フォントサイズを調べています。

便利なアドオンなので、
使用されていない方には
おすすめします。

Firebugの使い方については
またの機会にお話します。
(私が理解している範囲でですが。。。)
posted by baba at 15:06 | Comment(0) | TrackBack(0) | 情報
 
×

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