お世話になっております。
こちらのサイト内「サムネイルつき矢印リスト」という項目を
参考にHTML5でのスマホサイト作成をしています。
【参考サイト】http://07design.net/blog/?p=477
作成自体は問題なくできているのですが、ひとつ疑問があります。
右側に出ているリストマーク(ページ遷移を表す矢印マーク)は
大きさの指定はできないのでしょうか?
background: url(list_mark1.png) no-repeat 100% 50%;
だけでは位置の指定しかできないので、パネルの高さに合わせた
画像をあらかじめ用意しておかなければならず
パネルの高さ変更をするたびに画像を書き出し直す必要が出てしまいます。
一番の問題はiPhoneのRetinaディスプレイで見たときに
ぼやけて表示されてしまうことです。
画像類はすべて横幅640px想定で書き出したものをサイズ指定するように、
リストマークも大きさの指定ができるようにしたいです。
特にul型にこだわりはないのでdivの入れ子などで実現できるようであれば
そちらでも構いません。
どなたかご教授いただけないでしょうか。
よろしくお願いします。
No.1ベストアンサー
- 回答日時:
スマホだから特別なわけではありません。
そもそもスマホ用、PC用、携帯用、点字端末用、スクリーンリーダー用、印刷用・・と作っていたら折角HTMLを使ってページを作成する意味がありません。【引用】____________ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。
・・・【中略】・・
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[2.2.1 HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
例えば、
<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;;}
御礼が遅くなってしまい申し訳ございません。
いただきました回答を基に試行錯誤しながら組み込みを行っています。
参考サイトのご提示も勉強になりました。
自分なりにしっかりと理解していけるよう引き続き作業を進めてまいります。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- Excel(エクセル) エクセルでキーリストからデータを取り出して1枚1枚印刷するには? 11 2022/06/27 09:52
- 中学校 この画像の中学校の学校指定体育着はどう思いますか? 画像の学校指定体育着は愛知県の「岡崎市立矢作北中 2 2023/01/23 06:28
- 大学・短大 C言語線形リストの問題です 3 2022/12/22 00:45
- Excel(エクセル) IF 関数で「〇〇 という文字を含む場合」の分岐処理で表示された数字はSUMで数字集計できますか? 3 2022/08/02 16:29
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- Excel(エクセル) エクセルについて教えてください。 2 2023/06/14 11:11
- Excel(エクセル) [テーマのフォント]、[見出しのフォント]、[本文のフォント]とは何ぞや? 2 2023/02/27 09:18
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストの数字のフォントサイズ...
-
ボタンを横に並べて表示させる方法
-
HTMLで組織図を作成する方法
-
<table>の高さ固定。情報増加時...
-
navの横並びにsnsアイコンを付...
-
<ul>~</ul>が二つ続くと間に改...
-
要素がランダムに並び替わりません
-
既存のメニューにプルダウンメ...
-
ページを開いているときのリン...
-
ポップアップメニューを表のよ...
-
「CSS」リストの2段組どのよう...
-
html <li>の中の文字一部に色を...
-
Webサイトにスライディングサイ...
-
【CSS】メニュー上部に固定させ...
-
スマートフォンサイトでのリス...
-
ひとつの枠(divとかtable)の...
-
html <ul></ul>の並びで一行空...
-
mozillaにおける<div>で囲んだ...
-
HTML5のfooterに見出しを付けて...
-
親ページ側からインラインフレ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
レスポンシブWebデザインでリン...
-
html/cssの、navを2段にする...
-
divタグ内のコンテンツが重なっ...
-
リストの数字のフォントサイズ...
-
<ul><li></li></ul>にするメリ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
リンク文字同士の間隔を開ける...
-
<ul>~</ul>が二つ続くと間に改...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
display:table;を多段表示させたい
-
ボタンを横に並べて表示させる方法
-
html <li>の中の文字一部に色を...
-
CSS質問:大手サイトを見ると何...
-
html <ul></ul>の並びで一行空...
-
Tableの1セル内に画像・テキス...
おすすめ情報