2010/5/10 月曜日 – 3:36:53
(
0)
(
0)
(
0)
(
0)
Total: 0
HTML5+CSS3に手をつけててハマったのでメモ。
3カラムのボックスを横並びにしようとして、CSS3の display:boxを使ってみたら親要素を中央寄せできなかった。
環境はMac / Firefox 3.6.3。
ちなみにSafari4では大丈夫でした。
HTMLはこんなの。
<div id="container">
<section>左</section>
<section>中</section>
<section>右</section>
</div>
CSSはこんな感じ。
#container {
display :box;
margin: 0 auto; /* ←これが効かない */
width: 900px;
}
#container section {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
width: 300px;
}
こう書いたらうまく 3カラムの真ん中寄せができました。
body{
text-align:center; /* ←Firefox用 */
}
#container {
display :box;
margin: 0 auto; /* ←Safari用 */
width: 900px;
text-align:left; /* ←Firefoxのテキストを左寄せに戻す */
}
#container section {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
width: 300px;
}
解決策は、親要素の親要素(ここではbody)にtext-align:center を指定するだけだった。
まとめると、
- display :box を指定した要素は Firefoxでは寄せに関しては、inline-box的な振る舞いになるっぽい？
- display :box を指定した要素の親要素に text-aling:center を指定すれば真ん中寄せになる
- display :box で text-aling:leftを指定してテキストの寄せを戻しておく。
ってことみたい？
タグ: CSS3, Firefox, HTML5, MAC, メモ
2008/9/20 土曜日 – 16:17:48
(
69)
(
0)
(
9)
(
6)
Total: 84
追記 2009/05/24)
Webデザイナー向けの絵文字ライブラリを公開しました。
codecheck.in:PHP携帯絵文字表示ライブラリ(PHP埋込型・au絵文字名対応版)のダウンロードサイトはこちら
ダウンロードや使い方の説明は上記のリンク先をご覧ください。
絵文字一覧表はこちら。
携帯開発者がずっと待望だったFirefoxのアドオンでの携帯シミュレーター、それが
FireMobileSimulator！
実際に携帯サイト(FDS)を表示してみたのが左の画像。
- PHPでの携帯分岐処理も出てる（UserAgent）
- 絵文字変換にもちゃんと対応！
(絵文字コードをDocomoの絵文字で、imgタグで置換されます)
- オプションを見ると、機種固有IDとかGPSの位置情報も設定できる
今後に期待したい所
- 指定機種の画面幅で表示(240px)になってくれるだけでも大分助かる。切り替えられたステキ。
- 絵文字をAUで表示確認したい。
（これも切り替えられたらステキ）
- 携帯用CSSのエミュレート
- DocomoがインラインCSSをどうレンダリングするとかがかなり大変そうだけど。。。
以下スクリーンショットとか。
[ツール]メニューから簡単に機種指定をできます。
一番下の[option]で各種設定。
機種固有IDも指定可能。
デバイスの設定も追加できる。
iPhoneもしっかりありました。
UserAgentをXMLとかで インポート・エキスポートでやり取りできたらとてもステキなんだけどな〜
位置情報まで設定できちゃいました！
ただ私の環境ではAuでの位置送信ができませんでした。
（上記数字はAIPcafeの座標）
追記 2008/09/22)
AUでの位置情報の指定ができました！
単に私の位置座標指定を間違っていましたm(_ _)m
なんと制作者本人のthorikawaさんのコメントのご指摘のとおり、座標指定を正しく行い位置情報送信が成功しました。
- ホットペッパーの携帯版にアクセスしたら403になった（IPで制限されてるっぽい）
- 適当に検索して出て来た このへん.mobi ってサイトで[GPSから現在位置をｾｯﾄする]を試してみたけどダメだった。
- AUの位置指定はdms(dd.mm.ss.sss)度表示であり、Google Mapsからの座標はdegree度表示のため変換が必要
- thorikawaさんが教えてくれた「経緯緯度の表示形式変換」のサイトを使うと楽です。
（右側のdegree度表示の方にGoogle Mapsの座標を入れます）
- AIPcafeの座標だとこんな感じ
東経 130.395505 → 130.23.43.818 (dms度表示)
北緯 33.587851 → 33.35.16.264 (dms度表示)
- 頭に「+(プラス)」を忘れずに！
改めて[このへん.mobi]で実際に試してみました。
上の画面から見事に位置情報を送信できました！
住所が「福岡県福岡市中央区大名一丁目14付近」となってるのがわかると思います。
かなりオススメです！
誰か作らないなら作るしかないかな〜と思ってたぐらいだったので、めちゃめちゃ感動したアドオンです。
Firebug,Webdeveloperについで必須のアドオンになりました。
携帯サイト制作オススメ書籍
携帯サイト コーディング&デザイン
モバイルユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。
PHP×携帯サイト デベロッパーズバイブル
タグ: Firefox, GPS, エミュレーター, シミュレーター, ブラウザ, 便利, 拡張, 携帯, 確認, 絵文字
各自の携帯で試してもらったURLのQRコードです。
