まあ理由はよく分かんないんすけど、ドコモのケータイはＣＳＳを使うのにちょっち面倒な手続きが必要みたいです。

まずはＸＭＬ宣言やらＤＯＣＴＹＰＥの記述から。

DOCTYPEの書き方はこれ一通りではないようなんですが、その辺はちょっと詳しくないので、今回は僕がデザイナーからもらったhtmlファイルに書いてあったのをそのまま載せてみました。

ちなみにPHPでこれを書くと、１行目の<?xml～?>のところでparse errorが出るかもしれない。っていうか、出た。

これはphp.iniでshort_open_tagってのがOnになっていると、<?php コード ?>と書くところを<? コード ?>と書いても良いような設定になるらしく、つまり<?xml～?>がPHPタグと判定されてエラーになるみたいです。

だからこのshort_open_tagをOffにすれば問題は解決する。

みたいな感じで回避しちゃっても良いかもしれない。

それから、ドコモ端末は外部ＣＳＳを読み込んでくれないという、江戸時代の鎖国みたいなノリがあるらしいので、必要なスタイルはstyle属性を使って記述しないといけないっぽいです。量がある場合は大変ですよね。まあ、中には例外もあるみたいですが、どんな例外があるかは申し訳ないですけど調べてませんので、ここでは省略。

あとは拡張子の問題もあります。ＣＳＳを使うには拡張子を.xhtmlにする必要がある。

ただこれも、PHPを使う場合は、拡張子を.xhtmlにじゃなくて.phpにしないといけないから、別の方法を使わないといけません。

こんな感じでheader関数を使って出力してやれば、何とか大丈夫です。

詳しいことは以下のサイトさんに書いてあります。

http://ke-tai.org/blog/2008/04/03/docomocss/

http://digibot.jp/blog/archives/2004/08/phpxml_1.html

実は今まで、僕はclass属性には複数を適用することはできないと思ってました。だから似通ったスタイルなんかでも、いちいち個別に書いてそれぞれclassを適用してたんすよ。

たとえば↑みたいな感じでね。

でも、一つのclass属性に複数指定することって、できたんですね。知りませんでした。何でも半角スペースで区切って記述すれば、複数指定ができるらしい。

うん、まあね、確かに思い返してみれば、デザイナーからもらったモックの中に、ときどきclass属性のところにスペースが入ってるのを見たことはありました。でもそのときは、それで一つのクラス名なんだと思ってました。俺ならこういうときはアンダーバーとか使うのになぁ……そもそもスペースとか使って大丈夫なんだっけ？　みたいなことを思ってました。

でも実際は、複数指定をしてたんですね、あれは。とんだ勘違い野郎でした、自分。

というわけで、上のcssはこんな風↓に書き換えることも可能。

CSSの方はあまり勉強してないっすからねぇ……まだまだ知らないことがたくさんありそうです。

上部のタイトル部分は画像をペタって置くかなんかして、その下のBOXはCSSで1pxの線を引くのが一般的かと思うんですが、まぁその時の書き方について、気がついた事があったのでメモ。

これが一番省略できる書き方。四隅に同じ条件の線を引く場合はこうやって書きます。

でも、上の画像のような場合は上部の線がいりません。こうした時は

こんな感じで書いていました。これは、右、下、左にそれぞれボーダーを指定してあげている形です。ただ、どうもしっくりこないですよね。自分はしっくり来ていませんでした。なんかあまりキレイな書き方じゃないなーってずっと思ってたんです。

そこで、先日ふと以下のような感じにしてみました。

そしたらあら不思議ー！
しっかり上の線だけ消えました。

あー、これなら結構すっきり書けるなー。

もっと早くに気がつけば良かったです。

とまぁ、かなり細々した話ですが、個人的にはだいぶスッキリしました。（性的に）

ちょっと言葉での説明は難しいのですが

• 大元の横幅は可変
• 大元はセンター揃え
• 画像+テキストのセットが横にずらーっと並ぶ
• はじっこまで来たら、折り返す
• テキストは画像の下に表示

こんな感じです。

で、仕様するHTMLはこんな感じにしました。

dlを使ってのマークアップでも出来るかなーって思ったんですが、どうもうまく行かないので、divで囲う事にしました。単純に考えて、このdivをfloatしてあげればいいのかなーって思ったんですが、それだと大元のセンター揃えが外れてしまいました。

あくまでセンターに揃えたまま、画像とテキストのセットを横に並べたい。

どうしたもんかなーと思い、調べた結果見つけたやり方がコチラ。

こんな感じで書いてあげると、センター揃えを維持したまま、画像+テキストのセットが横にずらーっと並びます。

divをdisplay:inline;でインライン要素にして横並びにしてあげて、その中を囲うspanにdisplay:table-cell;とdisplay:inline-block;でインライン要素の中での横幅を指定してあげる事によって、テキストが画像の下に回りこむって訳です。

ギャラリーサイトなんかで使えそうな手法ですね。

大元のセンター揃えと可変っていう条件が無かったら、他にも方法はあるんですけどね。

通常トップページにあると思いますが、これらをマークアップする時にdt ddを使ってデザインする方法があるのですが、どうも今までのやり方だと気に入らない部分があって、liなんかを使って作る場合もあったのですが、今日この記事をみて目から鱗が落ちました。

dtをfloatする場合の注意点

今度からこれを使おうと決めたので、メモ。

HTMLはこんな感じです。

これに以下のCSSを当ててあげます。

横方向の指定にemを使うって部分と、ddにborder指定をして、文字のスペースをpaddingで取るって所で目から鱗が落ちました。

ステキです。

HTMLとCSSは今までの経験で書いてきた範囲でなんとかなってる部分が多いので、最近新しい発見って中々無いのですが、やっぱりまだまだ勉強が足りませんね。精進しよっと。

初めてそういったレイアウトをしたのですが、まず単純に考えて

■左側の幅200px
■右側の幅100％

って感じに書けばいいと思ったのですが、これだとまったくうまくいかない。

つまり、右側の幅は「全体の幅（100％）-200px」にならないといけないんですが、こういった書き方がCSSでは出来ません。ではどうするか。

こんな面倒な書き方をしてあげるとうまくいきました。

右側のｄｉｖを入れ子にして、一回ネガティブマージンで-200pxしてあげて、さらにその中のdivでマージンを200pxとってあげると、意図したようなデザインになりました。IE6、IE7、FF、Operaでは動作確認しましたが、なんか気持ち悪い書き方だなぁ・・・。

丁度、今作っているサイトでどうしてもmin-heightを指定したい箇所があり、IE６で対応させる方法を色々さがしていたので、ナイスタイミングです。しかもこの方法、JSなどを一切使わない、CSSだけで実現できるお手軽な方法。

色々調べたけど、結局JSを使うやり方しか見つからなかったので、うれしい限りです。

やり方は簡単

これだけで、min-heightを設定できました。

簡単～。

floatしたｄｉｖ要素にmarginを指定すると、そのmarginの値がIE６だけ2倍になるバグってのがありました。なんでIE６で見ると隙間が空いちゃうのかなぁって思ったのですが、どうやらコレが原因らしいです。

今回の解決法は、paddingでも大丈夫だったのでpadding使ってみました。

それ以外にも、floatする前にdisplay: inline;してあげると直るみたいです。

うーん、そろそろ、こういったIE６のバグ対策ってのも不要になってくるかも。

そもそもIE６ってどれくらいの人が使ってるのだろう？

直近のIEのシェアを手持ちのサイトのアクセス解析で調べてみた所、IE使ってる人は全体の69％。で、その中でIE６な人は72％。IE７で27％。

一時期よりは確実に減っていますが、IEのシェアは大きいですね。あと思ったよりみんなIE６使ってるなぁ・・・。これじゃあ、まだまだIE6対策は必要ですね。

ちなみに、自分が愛用しているFirerfoxは全体の22％でした。

こちらは確実にシェアを伸ばしている気がする・・・。

上記の様なボタンを、CSSで作りました。

HTMLのソースは以下。

これのaタグに色を付けて、上下左右にパディング取って、ボーダーを付けるだけのシンプルなやつ。

で、上記のボタンはfirefoxで見た時なんですが、なんの問題もありません。

ところが、IE6で見ると・・・

英語のボタンだけ縦幅が大きい・・・。

微妙にずれてる・・・。

原因は、

vertical-align:middle；が必要だったみたいです。

これを入れたらIEでも・・・

ちゃんと揃いました。

うーん、 以後気をつけよう。