RenzSpace Free Style Blog

ボーダー

4月 20th, 2009 Author :: / Categories :: モバイルネタ / トラックバックURL / No Comments »

モバイルサイトを作成するにあたり、見やすくする方法の一つとして<hr />を入れる事がある。しかし、<hr />に色や太さを正確に指示するのは難しいと思う。そこで使用されるのがCSSでのboder指示。しかし、これにも面倒な事がある。

これもまた、キャリア間での問題。

auやソフトバンクは問題なくdivにborder指示を出す事が可能なのだが、docomoキャリアの場合はダメ。

その場合、どうしたら良いのか。

これも結構単純に解決出来た。

幅1px×高1pxのいわゆるspacer.gifを用いて、幅１００％、高さ１pxのdivで囲ってあげる。
imgにはmargin:0; padding:0;の指示も入れておき、spacerを囲ったdivの背景色を決める。そうする事で、自分の好きな色で線を入れる事が可能となるわけです。

ただし、このやり方で問題が発生。

softbankキャリアでは大変不細工な表示になってしまう。

ですので、この方法はdocomoのみに使用し、ユーザーエージェント振り分けの方法でsoftbankにはborder指示を与えたものを準備しておく必要が出てきます。
そして、上記から想像出来るのが、４編を囲うようなデザインはモバイルでは全キャリアで
作る事は難しいという事も分かります。
まあ、どうしても前キャリアで４編をボーダーで囲ったデザインを用いたいというのであれば方法はいくらでもありますので、探ってみても良いかもしれませんね。

4月 20th, 2009 Author :: / Categories :: モバイルネタ / トラックバックURL / No Comments »

marginはイメージにだけ

4月 8th, 2009 Author :: / Categories :: モバイルネタ / トラックバックURL / No Comments »

docomoキャリアでCSSが使えるようになった所で、次の備忘録。

『margin、paddingはイメージにのみ設定が可能。』ということ。

モバイルなので、余り必要ないとも思うのですが、情報分岐点などはやはり余白を用意し、ユーザーに”ここからは違う情報が始まるよ”を伝えてあげる必要があると思います。

しかし、余白を空けたい所に画像を設置するものが無いという場合は、1px×1pxのspacer.gifを使用してあげれば問題ないでしょう。（PC版Webサイトを作る時には結構使っているのですが、中々気がつかない方も多い様なので一応紹介しました。）

docomoの場合は、外部CSSの仕様が無理なので直接記述するしか無いですね。
こんな感じです
↓
<img src=”images/spacer.gif” width=”1″ height=”1″ alt=”代替えテキスト” style=”margin:数値＋単位; padding:数値＋単位” />

4月 8th, 2009 Author :: / Categories :: モバイルネタ / トラックバックURL / No Comments »

docomoキャリアの下準備

4月 8th, 2009 Author :: / Categories :: モバイルネタ / トラックバックURL / No Comments »

とても当たり前な事かも知れませんが、忘れても探すのが面倒なので記載。

モバイル制作でのCSS対応でネックなのがdocomoキャリア。
そこで大事なのがXHTMLに対応した宣言をしなければならない事。

まずはこれからスタート。
↓
<?xml version=”1.0″ encoding=”shift_jis” ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”ja” xml:lang=”ja”>
<head>
<meta http-equiv=”Content-type” content=”application/xhtml+xml; charset=Shift_JIS” />
<meta http-equiv=”Content-Style-Type” content=”text/css” />
<meta http-equiv=”pragma” content=”no-cache” />
<meta http-equiv=”cache-control” content=”no-cache” />

後はキーワードやら説明文やら記述してしっかりGoogle対策。

上記オレンジ文字の部分がdocomoには必要ですね。
他の対処法も有るとは思うけど、これが一番楽なので僕はこれで。

後は、docomo用フォルダ内にindexデータと同階層に.htaccessを設置。
中身はこれ
↓
AddType application/xhtml+xml .htm .html

必ず最後に一行分の改行を入れておく事を忘れないようにね。

これで、docomoキャリアのCSS対応した準備はOKでしょう。

4月 8th, 2009 Author :: / Categories :: モバイルネタ / トラックバックURL / No Comments »