<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
		xmlns:xhtml="http://www.w3.org/1999/xhtml"
>

<channel>
	<title>ke-tai.org &#187; ケータイデザイン</title>
	<atom:link href="http://ke-tai.org/blog/tag/%e3%82%b1%e3%83%bc%e3%82%bf%e3%82%a4%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3/feed/" rel="self" type="application/rss+xml" />
	<link>http://ke-tai.org/blog</link>
	<description>ke-tai.org　ケータイプログラマのためのコミュニティサイト。携帯電話向けWeb開発の技術情報を扱っています。</description>
	<lastBuildDate>Tue, 15 May 2012 05:32:22 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://ke-tai.org/blog/tag/%e3%82%b1%e3%83%bc%e3%82%bf%e3%82%a4%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3/feed/" />
		<item>
		<title>他のケータイサイトのHTMLを参考にする際に便利な裏技</title>
		<link>http://ke-tai.org/blog/2008/06/09/imagesav/</link>
		<comments>http://ke-tai.org/blog/2008/06/09/imagesav/#comments</comments>
		<pubDate>Mon, 09 Jun 2008 14:10:23 +0000</pubDate>
		<dc:creator>matsui</dc:creator>
				<category><![CDATA[TIPS]]></category>
		<category><![CDATA[デザイン]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[ケータイデザイン]]></category>
		<category><![CDATA[スペーサー画像]]></category>

		<guid isPermaLink="false">http://ke-tai.org/blog/?p=322</guid>
		<description><![CDATA[本日は、ケータイサイトのHTMLを作成する際に便利な、Tips的なものをご紹介します。 ケータイサイトはPCサイトと違って、HTMLソースを見ることができません。 たとえPCのブラウザから見たとしても、大手サイトはIPア [...]]]></description>
			<content:encoded><![CDATA[<p>本日は、ケータイサイトのHTMLを作成する際に便利な、Tips的なものをご紹介します。</p>
<p>ケータイサイトはPCサイトと違って、HTMLソースを見ることができません。<br />
たとえPCのブラウザから見たとしても、大手サイトはIPアドレスによる制限がかけられていて、ソースが見れるケースはまずありません。</p>
<p>ですので、HTMLがどのように作られているのかは、よくわからないことが多いと思います。</p>
<p>ご存じ「モバゲーTOWN」を例にご説明します。</p>
<p><img src="http://ke-tai.org/blog/wp-content/uploads/2008/06/20080609_imagesave.jpg" alt="" title="20080609_imagesave" width="400" height="204" class="alignnone size-full wp-image-323" /></p>
<p>例えば中央の点線や、「楽しもう」の上下の細い黒線は、どうやって書いているんでしょうか？<br />
画面上から見ただけでは、正直よくわかりません。</p>
<p class="spacer-small">&nbsp;</p>
<p>そんな時に役立つのが、「画像を保存」機能です。</p>
<p><img src="http://ke-tai.org/blog/wp-content/uploads/2008/06/20080609_imagesave2-243x300.jpg" alt="" title="20080609_imagesave2" width="243" height="300" class="alignnone size-medium wp-image-324" /></p>
<p>これを使えば、CSSで書かれているのか、画像なのかがわかります。</p>
<p><img src="http://ke-tai.org/blog/wp-content/uploads/2008/06/20080609_imagesave3.jpg" alt="" title="20080609_imagesave3" width="300" height="123" class="alignnone size-full wp-image-325" /><br />
<small>点線は画像でした</small></p>
<p>またスペーサー画像の位置もバッチリわかります。</p>
<p><img src="http://ke-tai.org/blog/wp-content/uploads/2008/06/20080609_imagesave4.jpg" alt="" title="20080609_imagesave4" width="300" height="192" class="alignnone size-full wp-image-326" /><br />
<small>中央にある緑のカーソルがあたった部分がスペーサー画像</small></p>
<p>モバゲーTOWNでは、トップページだけでも、10ヶ所以上ものスペーサー画像が使われていることがわかります。<br />
（おそらくドコモ端末で、marginやpaddingが、効かないためだと思われます）</p>
<p>他ケータイサイトのデザインを参考にする際には、ぜひ活用してみてください。</p>
<p class="spacer">&nbsp;</p>
<p><strong><em>関連：</em></strong></p>
<ul>
<li><em><a href="http://ke-tai.org/blog/2008/05/29/ketaifor/">フォームでのユーザビリティ向上のポイントを紹介した記事「PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは」</a></em></li>
<li><em><a href="http://ke-tai.org/blog/2008/05/16/mbgaos/">モバゲーのフレームワークがオープンソースとして公開されました</a></em></li>
<li><em><a href="http://ke-tai.org/blog/2008/01/07/kattte/">ブックレビュー： 勝手サイト &#8211; 先駆者が明かすケータイビジネスの新機軸</a></em></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://ke-tai.org/blog/2008/06/09/imagesav/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://ke-tai.org/blog/2008/06/09/imagesav/" />
	</item>
	</channel>
</rss>

