ガラケー向けのHTMLをCSSだけでサクっとiOS/Androidスマホ向け表示にしてみた

  • ノウハウ
  • 2014.1.14
  • かいたひと:ゆかと

フィーチャーフォンのサイトをスマートフォンでも見やすくするお仕事をしています、ゆかとと申します。

最近一番頭を使うのが、システムが出力してくれるHTMLがとってもフィーチャーフォン向けなのに「ひとまずシステム改修なしでやってください!」という箇所。

ソースの文法に多少の問題アリですが、サイトの使い勝手が悪いよりはマシであろう……と自己暗示をかけながら、かなり無理矢理どうにかしてみた例を挙げてみます。

※あくまでも「作業の第2フェーズ以降でシステムによる出力の改修がスケジュールに入っている場合」、としてお捉えください。「こんなの文法に背いている!クソめ!」と一蹴されると心がポッキリ逝ってしまいますので、事情については諸々お察しください。

システム的に出力されてしまう部分以外の箇所ではきちんと適したコーディングを心がけています!!

前提

  • CSSだけでどうにかがんばってみる
  • iOSとAndroidで共通のソースを読ませる

今回は2つサックリいきます。

やったことその1.リンク+改行の羅列を押しやすくする

こんな感じで、フィーチャーフォン感が溢れるaタグ+brタグの羅列をスマホっぽくします。
タロット_最終形

HTML

<section id="tarot_catalog">
	<h3>タロットだよ</h3>
	<div class="list01">
		<!-- システムで出されるところSTART -->
		<a href="#">あああ</a><br>
		<a href="#">いいい</a><br>
		<a href="#">ううう</a><br>
		<!-- システムで出されるところEND -->
	</div>
</section>

タロット_CSS未指定
(’-’)oO○(liで囲いたいけど仕方ない)

ひとまずaタグをブロック要素にして、paddingの設定をしたりとか。
タロット_display:blockしただけ
意図しない余白……どうにかします。

aタグではないところが何かやらかしているみたいです。brか……。
タロット_display:blockしただけ_aタグの範囲

CSS

【案1】インライン要素+幅100%にする

#tarot_catalog .list01 a {
	display: inline-block;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	padding: 14px 10px 14px 10px;
	border-bottom: 1px solid #aaa;
	text-decoration: none;
}
★ポイント★

box-sizing: border-box;
をするとwidthの値をpadding等々の値が含まれたものにすることができます。

【案2】改行を非表示にする

#tarot_catalog .list01 a {
	display: block;
	padding: 14px 10px 14px 10px;
	border-bottom: 1px solid #aaa;
	text-decoration: none;
}
#tarot_catalog .list01 br {
	display: none;
}
★ポイント★

場合によってaタグが付いたり付かなかったりするところには使えませんね。

やったことその2. 押せる範囲を重視する

こんな感じです。
占いメニューランキング_最終形

HTML

<section id="ultimate_ranking">
	<h3>メニューランキングだよ</h3>
	<div class="list01">
		<!-- システムで出されるところSTART -->
		1位 <a href="#">あああ</a><br>
		2位 <a href="#">いいい</a><br>
		3位 <a href="#">ううう</a><br>
		<!-- システムで出されるところEND -->
	</div>
</section>

占いメニューランキング_未指定
(’-’)oO○(順位表示の置き場に困ったなぁ)

ひとまずaタグをブロック要素にして、paddingの設定をしたりとか。
占いメニューランキング_display:blockしただけ

……もう少し調整します。
・順位表示の上にもう少し余白を入れたほうが見やすいかも
・順位表示のところをタップしてもリンクできるほうが親切かも
占いメニューランキング_displayblockしただけ_aタグの範囲

CSS

#ultimate_ranking .list01 {
	padding: 0 10px;
}
#ultimate_ranking .list01 a {
	display: block;
	padding: 28px 0 14px;
	margin: -28px 0 9px;
	opacity: 0.99;
	border-bottom: 1px solid #999;
	text-decoration: none;
}

★ポイント★

marginに負の値を指定して、paddingで吸収しています。
opacityの値を微かに減らしてあげると「○位」の文字の上まで“押せる”ようになります。

今回はこんな感じで。
スマホ対応で上乗せになる分の工数を減らすにはどうしたら良いものですかね……悩みどころです。

私信:ディレクターさんへ。上記みたいな対応をしたサイトの改修第2フェーズのスケジュール提示をお待ちしています。

株式会社ポッケ

株式会社ポッケ採用情報

ポッケでは、楽しく働いて世の中を笑顔に出来る仲間を募集しています。興味のある方はこちらをご覧ください。

最新記事

ブログ記事を検索