スマートフォンサイトでのリストマーク実装

質問

お世話になっております。

こちらのサイト内「サムネイルつき矢印リスト」という項目を
参考にHTML5でのスマホサイト作成をしています。
【参考サイト】http://07design.net/blog/?p=477

作成自体は問題なくできているのですが、ひとつ疑問があります。
右側に出ているリストマーク（ページ遷移を表す矢印マーク）は
大きさの指定はできないのでしょうか？

background: url(list_mark1.png) no-repeat 100% 50%;
だけでは位置の指定しかできないので、パネルの高さに合わせた
画像をあらかじめ用意しておかなければならず
パネルの高さ変更をするたびに画像を書き出し直す必要が出てしまいます。

一番の問題はiPhoneのRetinaディスプレイで見たときに
ぼやけて表示されてしまうことです。

画像類はすべて横幅640px想定で書き出したものをサイズ指定するように、
リストマークも大きさの指定ができるようにしたいです。

特にul型にこだわりはないのでdivの入れ子などで実現できるようであれば
そちらでも構いません。

どなたかご教授いただけないでしょうか。

よろしくお願いします。

回答No.1

ORUKA1951 · ベストアンサー

スマホだから特別なわけではありません。そもそもスマホ用、PC用、携帯用、点字端末用、スクリーンリーダー用、印刷用・・と作っていたら折角HTMLを使ってページを作成する意味がありません。
　【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。
・・・【中略】・・
　HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［2.2.1 HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

例えば、
<nav>
　<ol>
　　<li><a href="">項目イ</a></li>
　　<li><a href="">項目ロ</a></li>
　　<li><a href="">項目ハ</a></li>
　　<li><a href="">項目ニ</a></li>
　</ol>
</nav>
というHTMLだとします。40px程度の画像を用意しましょう。
★極端に表示サイズより大きいとネット負荷もレンダリング負荷もまた仕上がりも・・・
最大で表示されるサイズの倍程度にすると良いでしょう。
　以下では40px×40pxにしています。
印刷用には適用させたくないので、media="screen"を書いておくと良いでしょう。

html,body{margin:0;padding:0;width:100%;}
nav ol,nav ol li{display:block;margin:0;padding:0;list-style:none;}
nav ol{width:100%;line-height:30px;}
nav ol li{width:100%;background:linear-gradient(white, silver);}
nav ol li+li{margin-top:5px;}
nav ol li a{display:block;width:100%;height:100%;}
nav ol li a{background:url(./images/navi/rarrow.gif) right 50% no-repeat;background-size:contain;;}

お礼

御礼が遅くなってしまい申し訳ございません。
いただきました回答を基に試行錯誤しながら組み込みを行っています。

参考サイトのご提示も勉強になりました。

自分なりにしっかりと理解していけるよう引き続き作業を進めてまいります。

ありがとうございました。