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

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

最近一番頭を使うのが、システムが出力してくれる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>

(’-’)oＯ○(liで囲いたいけど仕方ない)

ひとまずaタグをブロック要素にして、paddingの設定をしたりとか。

意図しない余白……どうにかします。

aタグではないところが何かやらかしているみたいです。brか……。

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>

(’-’)oＯ○(順位表示の置き場に困ったなぁ)

ひとまずaタグをブロック要素にして、paddingの設定をしたりとか。

……もう少し調整します。
・順位表示の上にもう少し余白を入れたほうが見やすいかも
・順位表示のところをタップしてもリンクできるほうが親切かも

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フェーズのスケジュール提示をお待ちしています。