スマホ用のサイトを作るには？

2012/04/15 16:37

このQ&Aのポイント

HTML5とCSS3を使ってスマホ用のサイトを作りたいです。お知恵をお願いします。
スマホ用のサイト作成にはHTML5とCSS3を利用します。質問内容の詳細についてお教えください。
スマホ用のサイトを作成中ですが、具体的な方法についてアドバイスをいただけると嬉しいです。

mamiko54925
お礼率29% (14/47)

HTML
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

kuzumiHK
ベストアンサー率72% (132/183)

2012/04/15 18:38 回答No.1

こんな感じでいかがでしょうか。 position使用で高さが不安定なので、 JavaScriptのタブ切り替えのほうがおすすめですが軽いです。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> header{ border-bottom:1px solid #000; } ul{ margin:0; padding:0; list-style:none; } ul#contents{ position:relative; top:0; left:0; width:100%; height:8em; } ul#contents > li{ position:absolute; top:0; left:0; margin:0; padding:0; width:100%; background:#fff; } ul#contents > li#content01{ z-index:1; } ul#contents > li:not(:target){ z-index:0; } ul#contents > li:target{ z-index:2; } ul#contents > li ul li, ul#contents > li p{ margin:0; padding:0; height:1.2em; border-bottom:1px solid #000; } footer{ border-top:1px solid #000; } </style> </head> <body> <header>ヘッダ</header> <ul id="contents"> <li id="content01"> <ul> <li><a href="#">リンク01</a></li> <li><a href="#">リンク02</a></li> <li><a href="#">リンク03</a></li> <li><a href="#">リンク04</a></li> <li><a href="#">リンク05</a></li> </ul> <p><a href="#content02">次の5件</a></p> </li> <li id="content02"> <ul> <li><a href="#">リンク06</a></li> <li><a href="#">リンク07</a></li> <li><a href="#">リンク08</a></li> <li><a href="#">リンク09</a></li> <li><a href="#">リンク10</a></li> </ul> <p><a href="#content01">前の5件</a> | <a href="#content03">次の5件</a></p> </li> <li id="content03"> <ul> <li><a href="#">リンク11</a></li> <li><a href="#">リンク12</a></li> <li><a href="#">リンク13</a></li> <li><a href="#">リンク14</a></li> <li><a href="#">リンク15</a></li> </ul> <p><a href="#content02">前の5件</a></p> </li> </ul> <footer>フッタ</footer> </body> </html>

質問者

お礼 2012/04/15 20:55

ありがとうございます。ただ、この状態ですと、最初の5つが消えてしまいます。過去に読み込んだ分も出るようにしたいのですが、JavaScriptでもいいので参考ソースをお願いしてもよろしいでしょうか？言葉では中々伝えにくいのですが、アンドロイドマーケットのように、スクロールさせると続きのページ分が表示されるようにしたいのです。もしわかればお願いします<(_ _)>

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

kuzumiHK
ベストアンサー率72% (132/183)

2012/04/16 00:02 回答No.2

JavaScriptで書くとこんな感じです。オートページャー（javascript AutoPage）で検索すると、それらしいJSがいろいろとでてくると思います。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> header{ border-bottom:1px solid #000; } ul{ margin:0; padding:0; list-style:none; } ul#contents{ width:100%; } ul#contents > li{ margin:0; padding:0; width:100%; background:#fff; } ul#contents > li ul li, ul#contents > li p{ margin:0; padding:0; border-bottom:1px solid #000; } footer{ border-top:1px solid #000; } </style> </head> <body> <header>ヘッダ</header> <ul id="contents"> <li> <ul> <li><a href="#">リンク01</a></li> <li><a href="#">リンク02</a></li> <li><a href="#">リンク03</a></li> <li><a href="#">リンク04</a></li> <li><a href="#">リンク05</a></li> </ul> </li> <li> <ul> <li><a href="#">リンク06</a></li> <li><a href="#">リンク07</a></li> <li><a href="#">リンク08</a></li> <li><a href="#">リンク09</a></li> <li><a href="#">リンク10</a></li> </ul> </li> <li> <ul> <li><a href="#">リンク11</a></li> <li><a href="#">リンク12</a></li> <li><a href="#">リンク13</a></li> <li><a href="#">リンク14</a></li> <li><a href="#">リンク15</a></li> </ul> </li> </ul> <p id="page"><a href="#" onclick="nextContents();return false;">次の5件</a></p> <footer>フッタ</footer> <script type="text/javascript"> var count = 1; var contents = document.getElementById('contents'); var childs = contents.childNodes; var list = new Array(); for(var i=0,j=0;i<childs.length;i++){ if(childs[i].nodeType == 1){ list[j] = childs[i]; if(j > 0){ list[j].style.display = 'none'; } j++; } } if(list.length < 2){ document.getElementById('page').style.display = 'none'; } function nextContents(){ list[count].style.display = 'block'; count++; if(list.length <= count){ document.getElementById('page').style.display = 'none'; } } </script> </body> </html>

ログインすると、全ての回答が全文表示されます。