携帯で個別に背景色を付ける方法

[新着] Webテンプレートを仮オープンしました



0   名前: TAGTAG : 2006/02/15 17:13
今、自分で携帯サイトを作成しています。
ガールズウォーカーなどで使用されてる
テーブルを使わずに個別に背景色を指定する方法を知ってる方いませんか?

1   名前: time : 2006/02/15 17:13
私もそれをさがしています。

2   名前: S : 2006/02/15 17:13
 携帯という限られた環境においては、色など環境依存のものは諦めた方が無難。

http://deztec.jp/lecture/cl/mobile.html

3   名前: 神崎 : 2006/02/15 17:13
もし
ここ http://www.girlswalker.com/pc/ とか
ここ http://www.fashionwalker.com/ のレイアウトのことだったら、
テーブルの背景色を指定してあるだけですが、、、?

他のところは確認しなかったのですが、
http://gf.st/
ここの携帯バージョンのHTMLソース(i-mode用)を見ると、
divタグのスタイルシートに、background-colorを指定されています。
他の携帯バージョンは面倒なので見てませんが、同じような感じでしょう。

テーブルのように見えるのは、
区切り線変わりにdivの上と下に角が丸くなった絵の画像を置いて、
その画像の色と、divの背景の色を同じにしているからです。

PCバージョンのhttp://gf.st/pc/は、テーブルですね。

>http://deztec.jp/lecture/cl/mobile.html
お年寄りに見てもらうための作りじゃないですし、こういうサイトなら色指定もかまわないのでは?

4   名前: 匿名希望 : 2006/02/15 17:13
>>お年寄りに見てもらうための作りじゃないですし、こういうサイトなら色指定もかまわないのでは?
 それが「差別意識」ってやつさね。WWWは「万人が等しく情報を得る」ことができるもの。
 若くったって色覚障害や視覚障害がある人はいる。

http://nekoshiki.poke1.jp/index.html

5   名前: 匿名希望。 : 2006/02/15 17:13
自分のサイトの背景色を変えようとしているだけで、
なんで「差別意識」にまで話が飛躍するんでしょうね。。

6   名前: 匿名希望 : 2006/02/15 17:13
私も探しましたが、けっこうページ内で個別で色が違っている携帯サイトはキャリア公式サイトばっかりじゃないですか?
おそらくサーバ側の制御が必要な気がします。これがキャリア公式に入ると解明されるのではないかと思ってます。
勝手サイトでこれをやっているサイトは公式サイトも作った経験のあるようなシステム会社さんかと思います。
違いますかね??

7   名前: カヅサツ : 2006/02/15 17:13  [URL
> 携帯という限られた環境においては、色など環境依存のものは諦めた方が無難。
> お年寄りに見てもらうための作りじゃないですし、こういうサイトなら色指定もかまわないのでは?
> それが「差別意識」ってやつさね。
> 自分のサイトの背景色を変えようとしているだけで、なんで「差別意識」にまで話が飛躍するんでしょうね。。

マークアップが適切であるなら、どんな見栄えの指定にしようと、原則としてはかまわないはずです。なぜなら「見栄え」に関することは、「それが嫌な人は指定を無視できる」というのが HTML 文書の大前提であるからです。

もちろん環境によっては無視できませんが、それは HTMLの見栄えを扱うのに不十分な環境だというだけのことで、それに配慮しろと「初心者」に要求するのは酷であると考えます。

で、元質問です。

> ガールズウォーカーなどで使用されてるテーブルを使わずに個別に背景色を指定する方法を知ってる方いませんか?

ガールズウォーカーとやらはテーブルを使っているらしいですがそれはそれとして。

CSS に background-color プロパティは、ほぼどんな要素にも適用できます。好きなように、個別に背景を割り振れます。

●index.htmlサンプル

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="./style.css" media="tty" />
</head>
<body>
<h1>見出し</h1>
<p>段落</p>
<p>段落</p>
</body>
</html>

●style.css サンプル(上記 index.html と同じディレクトリ(フォルダ)にある)

body{
color: white;
background-color: black;
}
h1{
color: red;
background-color: white;
}
p{
color: black;
background-color: white;
}

もちろん、携帯電話端末であろうとなかろうと、その実装は多種多様です。「すべての携帯端末で同じように」は、事実上、不可能です。

8   名前: Z : 2006/02/15 17:13
 色彩を表現するにはいろいろと制約があったりするので、いっそのこと「色指定はしないで携帯搭載ブラウザの初期値にまかせる」、というのでもいいと思います。

http://www.scollabo.com/banban/lectur/color.html
http://nekoshiki.poke1.jp/guidline/color.html
http://www.kanzaki.com/docs/html/color-check
http://night.nig.ac.jp/color/gen/index.html
http://bakera.jp/html/opinion/zannen3.html

9   名前: 匿名希望 : 2006/02/15 17:13
個人的には携帯端末の場合、外部CSS読み込むよりも、インラインでCSSを記述した方がうまくいきます。
というよりもi-modoでは外部CSSがうまくいかなかったり。。。

<div style="background-color:#000">
******
</div>

として、第三世代のXHTML対応機種では同じHTMLで使いまわせてます。
DIVの入れ子にしても大丈夫でした。

一覧へ戻る