PakuReserve(パクレゼルヴ) R&D Laboratory

お久しぶりです

のびーにょです。

さて、携帯電話のHTMLに関するお話でも。

<div>
	<div style = "background-color:#FFAAAA">TITLE</div>
	<div style = "background-color:#CCCCCC">
		コンテンツ<br />
		コンテンツ<br />
		コンテンツ<br />
	</div>
</div>

ってな感じで書いた場合
ドコモ端末だと

ってな感じで
ａｕ端末だと

こんな感じになっちゃいます。

divタグとdivタグの間に隙間ができてしまって、何ともみっともないことになります。
CSSでどうにかして隙間を埋めてしまいたいのですが、これはほぼ不可能です。

で、これ実はHTMLの書き方だけで同じようなレイアウトになります。

それが以下

<div>
	<div style = "background-color:#CCCCCC">
		<div style = "background-color:#FFAAAA">TITLE</div>
		コンテンツ<br />
		コンテンツ<br />
		コンテンツ<br />
	</div>
</div>

htmlの概念的にはよくはないんですけどね
イメージとしては以下のような感じ
灰色の部分がコンテンツのdivでピンクの部分がタイトルのdiv

普通のイメージは

こんな感じで、タイトルとコンテンツ部分の隙間をなくすようなCSSを書いたりしますが
携帯の場合、サポートしていない場合が多いです。

上記のHTMLで書いた場合は
ドコモ

au

ってな感じで表示されて両方同じ見え方になります

---

もう一個例を出しましょう
1エリアごとに交互に色を入れ変えたい場合
良くあるのがランキングとか一覧表示とか
そのあたり。

<div>
	<div style = "background-color:#FFAAAA">aaaaa</div>
	<div style = "background-color:#CCCCCC">aaaaa</div>
	<div style = "background-color:#FFAAAA">aaaaa</div>
	<div style = "background-color:#CCCCCC">aaaaa</div>
	<div style = "background-color:#FFAAAA">aaaaa</div>
	<div style = "background-color:#CCCCCC">aaaaa</div>
	<div style = "background-color:#FFAAAA">aaaaa</div>
	<div style = "background-color:#CCCCCC">aaaaa</div>
	<div style = "background-color:#FFAAAA">aaaaa</div>
</div>

こんな感じで書きたくなりますよね。
でも、こう書くと

ドコモは問題ない

でもやっぱりauで問題が出ます。

これも、以下のようなイメージでHTMLを記述することでドコモと同じように見せることが可能です。

htmlはこんな感じで

<div style = "background-color:#FFAAAA">
	aaaaa
	<div style = "background-color:#CCCCCC">aaaaa</div>
	aaaaa
	<div style = "background-color:#CCCCCC">aaaaa</div>
	aaaaa
	<div style = "background-color:#CCCCCC">aaaaa</div>
	aaaaa
	<div style = "background-color:#CCCCCC">aaaaa</div>
	aaaaa
</div>

そうすると、ドコモ、auが以下のように同じように見えます。

まぁ、そんな感じで一つ下のdiv要素の色を上の階層に持ってきてやると意図しない隙間をなくすことができます。

---

色々めんどくさいですけど、結構HTMLだけでも表現できたり色々便利
例えば、以下のような色分けを隙間なく表示したいときとかも

<div style = "background-color:#FFF0E5">
	<div style = "background-color:#FFD0BF">
		<div style = "background-color:#FDDAF0">
			<div style = "background-color:#FABBEA">
				<div style = "background-color:#A3F27B">
					<div style = "background-color:#C0E9FA">
						<div style = "background-color:#FFF09C">
							<div style = "background-color:#F4DA67">
								<div style = "background-color:#ccccff">
									<div style = "background-color:#9966ff">
										<div style = "background-color:#FFB6C1">
											<div style = "background-color:#FF3333">
												<a href ="">
												<span style = "font-size:medium">
												かおもじ友の会</span>
												</a>
												<br />
											</div>
											┗3000個以上の顔文字やAAを収録!ｵﾘｼﾞﾅﾙな作品も投稿できてみんなで共有できちゃう!
										</div>
										<a href ="">
										<span style = "font-size:medium">
										あなたの過ごした時間</span>
										</a>
										<br />
									</div>
									┗時は金なり。あなたが生まれて今日まで過ごした｢時間｣について色々な角度から詳しく知りたいと思いませんか？
								</div>
								<a href ="">
								<span style = "font-size:medium">
								ちょいﾈﾀﾌｰｽﾞ</span>
								</a>
								<br />
								</div>
								┗お手軽料理からﾈﾀ料理まで、ﾚｼﾋﾟをｹｰﾀｲで簡単検索!ｵﾘｼﾞﾅﾙﾚｼﾋﾟも投稿しよう
							</div>
							<a href ="">
							<span style = "font-size:medium">
							切なさ成分解析</span>
							</a>
							<br />
						</div>
						┗身近な素材に含まれる｢切なさ｣を解析。結果を読むと思わず切なくなるかも?
				</div>
				<a href ="">
				<span style = "font-size:medium">
				明日に向かって叫べ</span>
				</a>
				<br />
			</div>
			┗魂の叫びに賞金がかかります!アナタも賞金首となって追われてみる?
		</div>
		<a href ="">
		<span style = "font-size:medium">
		NAME&nbsp;de&nbsp;QUEST</span>
		</a>
		<br />
	</div>
	┗あなたは世界を救う勇者となって、日頃の鬱憤を晴らすべく魔王に戦いを挑みます!
</div>

のびーにょ HTMLとか, Tips, キャリア, 携帯電話