seiyaのブログ

tableのセルの高さを色んなブラウザでぴったり揃える方法

Fri, 05 Nov 2010 16:15:17 +0900

例えば、カレンダーのようなものをテーブルで組みたいとき。
tdに高さを設定しても、ブラウザによって高さに差ができる。
というか、指定した通りの高さにならない。
td内での上下の余白が適当な事になっているのかもしれない。
見る環境によって文字の大きさが変わってしまうことを考えれば、崩れる可能性が高い…。

この場合はtdには高さを指定せず、中に入るテキストに対し、line-heightを指定すればいい。
tdの高さは内容物に合わせて伸びるので、ほとんどのブラウザで高さが揃う。
テキストが2行でセルの高さが50pxなら、line-heightを25pxにすればいいし、
line-heightを10pxにして、上下のpaddingの合計を30pxに。
内容物の合計が50pxになれば大丈夫。
これなら、文字の大きさが変わっても(極端に大きな文字にされない限り)平気。

id名やclass名の先頭の文字が数字だと、cssの記述が無効になる

Mon, 30 Aug 2010 21:00:56 +0900

●問題
さっきまで何の問題もなく使用できていたcss、
idの記述を増やした途端適応されなくなった。

●解決
id名やclass名の先頭の文字を数字にしてしまう(例：id="10kajou")と、
そのid名やclass名を使って指定したプロパティは無効になる。
先頭以外を数字にする分には問題ない。

●その他
正確には
”使用できる文字は大小アルファベットと数字 [A-Za-z0-9] 、ASCII以外のUnicode文字、およびハイフン（-）とアンダースコア（_）に限る。識別名は数字もしくはハイフンと数字の組合せで始めることはできない。また、セレクタの要素型名、クラス名、ID名はハイフンで始めることはできない”
http://www.kanzaki.com/docs/html/htminfo17.html

要素の重なり順を制御する

Mon, 30 Aug 2010 18:36:23 +0900

●問題
css2.1で自由に色を変えることができる角丸のボックスを実現するため、
四角を角丸でくりぬいたような透過画像を、position:absolute; bottom:0;でbox内下よせで配置したら、
画像がテキストにかぶさってしまい、リンクや選択ができなくなった。

●解決法
imgをテキストより先に記述すれば、
に近い記述が、重なり順の上になるので、テキストをクリックできる。
しかし、その場合は一部のブラウザでテキストの上側に余計な余白が表示されてしまう。

そこで、cssでz-indexを指定すれば問題なく解決できる。
z-indexは要素の重なり順を制御するプロパティで、
position:static以外を指定した要素に有効である。
img {z-index:2}　のように指定し、数字が大きい方の重なり順が上になる。
IE6等のブラウザでも問題なく使う事が出来る。

●その他
角丸はCSS3で正式に実装されるが、
対応ブラウザのシェアの関係上、仕事で使うのは当分無理。

主にIE6等で、指定した通りのwidthやpadding、border、marginにならない

Mon, 30 Aug 2010 18:24:27 +0900

●問題
主にIE6で発生しがちな問題だけど、他のブラウザでも起こりうる。
きっちり計算してwidth、padding、border、marginを指定したはずなのに、
その通りにレンダリングされない事がある。
ブラウザ間での誤差が生じることも多い。

●解決
考えられる原因が多すぎて一概には言えないが、
基本的なcssの指定として、widthを指定しない事で解決できる場合がある。

例えば、width:200pxのdivの中に、右寄せでwidth:150pxのリストを入れたいなら、
リストにwidth:150pxを指定するのではなく、divにpadding-right：50pxを指定するべきだ。

ブラウザ間で誤差が発生するのを防げるほか、後からのデザインの調整を行いやすいというメリットもある。
上の例なら、divのwidthを広げたり、縮めたりした時、リストも自然とその幅に調整される。
IE6の解釈はバグであるが、IE6がターゲットブラウザに含まれない場合もそうした方がよい。

●その他
余計な余白やはみ出しなんかの原因は他にもたくさんある。
IE6のバグをよく把握することは、IE6がターゲットブラウザに含まれる場合は当然の事、
これから先増えるであろう、昔作られたwebサイトのリニューアルなどの案件で重要になると思う。

DD_belatedPNGを使った透過png

Mon, 30 Aug 2010 11:08:18 +0900

●問題
IE6でも透過pngを使いたい。
できたら背景にも適応したい。

●解決
DD_belatedPNGを使う。
↓詳しい使い方
http://smkn.xsrv.jp/blog/2009/04/postscript_dd_belatedpng_js/

あんまり重くない
使い方簡単
背景にも使える。

background-position:fixed は効かない。
IE6をターゲットブラウザとしないなら、使う必要無し。

●その他
IEとそれ以外ではpngの色味が違ってしまうので、
それが目立つデザインやレイアウトの時には気を付けること。

印刷用のCSS

Fri, 27 Aug 2010 13:28:54 +0900

●問題
ユーザーが印刷すること前提のwebページを制作する時、
メニュー等を印刷時には表示させなくしたい。

●解決法
内でcssを読み込む時、最後にmedia="print"とすれば、
そのcssは印刷時のみ適用されることになる。
そのcssに表示させたくない要素にdisplay:noneを適用すればOK
cssの優先度に気を付ければ問題ないと思う。

●その他
mediaプロパティにはprintの他に、テレビや携帯電話に対応させるものもあるらしいけど、
使う事はあんまりないような気がする。

iPadだとiframeが伸びるのに対応した

Fri, 27 Aug 2010 13:03:03 +0900

今までうちの会社で制作してきたwebサイト（直接自分が関わった物も含む）では、
多くの場合、新着情報やイベント情報などを、別ファイルで管理し、iframeでindex.htmlに表示させてきた。
エンジニアさんのシステムとの兼ね合いもあり、その方が制作、管理、運営が楽だったからだ。

●問題点
しかし、iPadの登場で問題が発生してしまった。
iPadではiframeにスクロールバーが表示されずに、読み込んだhtmlの内容に応じて伸びていってしまう。
テーブルレイアウトなら、後続の要素が下がっていってしまうし、
overflow:hiddenが設定されたボックス要素内だと、はみ出た領域は表示されないし、スクロールもできない。

●解決法
http://www.luigibox.com/00_lab/iframeForiPadSafari/

divでiframeを囲む。
javascriptでiPadだけにcssを対応させる。
そのcssを使って
divにはoverflow:autoを設定し、
iframeの幅を、divより50px程狭くする。
iframeは左に寄せる。
iPad上では、divの右の50px分の余白で、2本指でスクロールできるようになる。
ぱっと見、スクロール出来る事が分かりづらいので、
必要であれば、divの背景に画像を設定し、ユーザを誘導する。

●その他
iPad用のcssファイルは3つあり、
それぞれ、iPadでは常に適用されるcss、縦にした時のみに適用されるcss、横にした時のみに適用されるらしい。
iPadを傾けたりしただけで、背景色が変わったりしておもしろい。
背景画像を変えて、キャラクターがiPadの傾きにリアクションしてるように見せたり、
横向きにした時だけ文字のサイズをやや大きくするなど、場合によっては効果的に使えるかもしれない。

今日から

Fri, 27 Aug 2010 13:00:09 +0900

長らく、blogの方を放置してしまった。
なんで放置してたかというと、何に使えばいいのか分からなかったから。
今日からは、仕事中に失敗したことや、覚書、htmlやらjavaやらのやり方を書くことにしよう。
同じミスでつまづく事もなくなるはずだ。