スマホ用のサイトを作るには？
- HTML5とCSS3を使ってスマホ用のサイトを作りたいです。お知恵をお願いします。
- スマホ用のサイト作成にはHTML5とCSS3を利用します。質問内容の詳細についてお教えください。
- スマホ用のサイトを作成中ですが、具体的な方法についてアドバイスをいただけると嬉しいです。
- ベストアンサー
HTML５ CSS３
スマホ用のサイトを作ってます。 こういうことをしたいのですが、お知恵をお願いします。 ---------------------- ○○○○○○○○○○○ ○○○○○○○○○○○ ○○○○○○○○○○○ ○○○○○○○○○○○ ○○○○○○○○○○○ ---------------------- 次の5件を表示 ---------------------- 「○○○○○○○○○○○」の部分はテキストリンク部分で、全部で40件ほどあります。 すべてを表示させてもいいのですが、「次の5件を表示」をタップすると新たな5件分が表示できるようにしたいです。 ご回答の際には、「HTML5+CSS3」の記述をお願いします<(_ _)>
- mamiko54925
- お礼率29% (14/47)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じでいかがでしょうか。 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>
その他の回答 (1)
- kuzumiHK
- ベストアンサー率72% (132/183)
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>
関連するQ&A
- 【CSS/HTML】： フォントサイズについて
CSS/HTMLについての質問があります。 まずHTMLですが、 <font size="6">テキスト</font> と記述するときの、「6」の単位を教えてください。また、ピクセル・ポイントとの関係が知りたいです。 次にCSSについて。 <font size="6">テキスト</font> と記述すると、テキストの色が "#FF0000" になるようにしたいと思います。この場合、どのようにCSSを作成すれば良いのでしょうか。 単発質問だと思いますので…説明しているサイトを紹介していただけると有り難いです..。 以上、お手数をおかけするとは思いますが、どうかよろしくお願い致します。
- ベストアンサー
- HTML
- CSSの呼出方法と表示速度 (SEO)
. HTML内で外部CSSファイルを呼び出す方法について、表示速度の面で記述を迷っ ている部分があります。 例えば、ホームページ・記事ページ・製品ページの、3つのページが存在するウ ェブサイトを仮定するとします。 そして、3つのページに共通するCSSをcommon.css それぞれのページに特有なCSS をindex.css、article.css、product.css とするとします。 【方法A】 HTMLのヘッダー部分をテンプレートパートにして、まずcommon.cssについて<link > で記述し、index.css、article.css、product.css についてはその下に条件分 岐で記述して、CSSファイルを呼び出していく 【方法B】 HTMLのヘッダー部分をテンプレートパートにせず、ホームのページのHTMLにcommon.css 及びndex.cssを<link>で2つ記述、記事ページのHTMLにcommon.css及びarticle.css を<link>で2つ記述、製品ページのHTMLにcommon.css及びproduct.cssを<link>で 2つ記述、してCSSファイルを呼び出していく。 Bの方法は管理の手間はかかることになりますが、テンプレートパートを使い条 件分岐をするAと条件分岐をしないBで、各ページで表示速度に違いは出るもの なのでしょうか .
- ベストアンサー
- CSS
- CSSがHTMLに反映しない
CSSをはじめて使う者です。XPでIEを使っています。 解説サイトの最も簡単そうなプログラムをコピペし、 HTMLファイルと外部CSSファイルを同じフォルダ（デスクトップにあるtopフォルダ） に入れてHTMLを開いたのですが、CSSを全く読み込まず、HTMLのテキストしか表示されません。 ★HTMLデータ（top.html） ------------------------ <HTML> <HEAD> <link rel=stylesheet type="text/css" href="C:\Documents and Settings\Administrator\デスクトップ\top\top.css"> </HEAD> <BODY> <div class="selecter">文字が赤くなり、左に5pxの罫線が引かれます。</div> </BODY> </HTML> ★CSSデータ（top.css） ------------------------ .selecter { color:#ff0000; border-left:solid 5px #ff9900; } ・他のサイトにはHTMLファイルのstylesheetに""があったので付けてみたのですが、意味なしでした。 ・他のサイトの形が異なるCSSも試したのですが同様の状態だったので、HTMLのHEADの部分が怪しいと思い、ファイル名指定を"top.css"に変えたりしたのですが、意味なしでした。 ・CSSは最初メモ帳で書いたのですが、拡張子がどうしてもCSSになってくれなかった（top.css.txtになる）ので、ワードパッドで書いて保存したら、拡張子は正常にCSSになりました。ただ何故かアイコンが、プログラムが見つからない時に表示される奴になっています…。 スタート地点から躓いていて非常に恐縮なのですが、何卒よろしくお願いいたします。
- 締切済み
- HTML
- 外部CSSが読み込めません/HTML
HTMLにおいて、外部CSSを読み込めず困っております。 ググって対処法を実践しても一切反映されません。 現在下記のisaraというサイトを模写しております。 https://isara.life/ HTMLにおいて linkタグでCSSファイルを読み込んだのですがCSSが一切反映されず困っております。 HTMLとCSSファイルは同一フォルダ内にあります。 HTMLファイル名：isaramosya.html CSSファイル名：isaramosya.css HTMLの記述 <link rel=”stylesheet” href="isaramosya.css"> いくらググっても原因がわからず困っております。 原因思い当たる方いらっしゃいましたらお答えいただけましたら幸いです。
- ベストアンサー
- CSS
- CSS・HTMLのロールオーバーについて
テキストリンクにロールオーバーで任意の背景画像を入れるにはどうしたら良いでしょうか。 cssにて:hover擬似クラスで背景画像を指示し、テキストリンクにカーソルを合わせると背景画像が表示されるところまでは出来ましたが、リンク毎に画像を変える方法はありますでしょうか。（:hoverの擬似クラスを増やせば出来るとは思いますが、猥雑になってしまうので…） リンクが画像だったらonmouseoverで指定したことがありますが…。浅学なりに調べながら書いておりましたが、行き詰まってしまいました。 どなたかお知恵をおかしいただけますと幸いです。
- 締切済み
- HTML
- HTML CSS ヘッダー*.jpgにalt=""
CSSとＨＴＭＬでＨＰを作成しているのですが、下記ＣＳＳの部分でheaderにalt="" と title="" を入れる事は出来るのでしょうか？ 問題の記述は下記の通りです。 /*ヘッダー*/ div#header {background-image: url(http://www.hogehoge.com/header1.jpg); padding: 28px 18px 42px} HTMLだけでしたら簡単に出来たのですが、ＣＳＳ＋ＨＴＭＬ、しかもＣＳＳ部分に記載しているimgファイルなので、どうしたら良いのか判りません。 上記の件、ご指導願いたく思います。 宜しくお願い致します。
- 締切済み
- CSS
- HTMLとCSSでのClass属性がわかりません
画像を挿入し、リンクを埋め込むと、画像の周りに線がついてしまう。 これを避けたいのですが・・・・ 具体的に言いますと・・・各ページに「ＴＯＰページ」へ戻るボタンを埋め込みます 各ページのＨＴＭＬに <div class="icon"> <a href="リンク先"><img src="パス名"></a> </div> ＣＳＳに img.icon{ border-style: none; } と記述しましたが、各ページの画像（「ＴＯＰページ」へ戻るボタン）の周りは線がついたままです ＨＴＭＬの＜img src="パス名" border="0"＞を記述すれば、線を消すことは出来ますが 複数ページに渡っているため、全てにborder=”0”を入力するのは 手間がかかってしまいます なんとかCSSでコントロールしたいのですが・・・ そもそも記述（文法）が間違っているのでしょうか？ Classのとらえ方が間違っているのでしょうか？ 画像も一気に変えたい場合の事も想定し、 現在HTMLで画像挿入しているのを、CSSで埋め込む記述方法があれば 教えてください。 数日前から、HTMLとCSSの勉強をはじめた初心者ですので 見当違いな質問かもしれませんが どうぞ、よろしくお願いします
- ベストアンサー
- CSS
- CSSでのリンク指定（？）
現在、外部ＣＳＳで、<h1>タグの背景にタイトル画像を表示するように設定しています。 ＨＴＭＬ上の<h1>タグ内では、タイトルに値するテキストを入れていますが、ブラウザの表示できない所においやってあります。 その表示されているタイトル画像（h1で表示している部分）に他ページへのリンクを設定したいのですが、こうした場合のリンク設定はどのようにすればよろしいのでしょうか？ ＣＳＳ内で設定することは可能なのでしょうか？ それとも、ＨＴＭＬ上でなんらかの形でリンク設定を行うものなのでしょうか？ よろしくお願いいたします。
- ベストアンサー
- HTML
- HTML5＋CSS3 でしかできないこと
長年、趣味や一部仕事で XHTML+CSS のサイトを作っています。 数年前から、サイト内にCGIを入れたり、色んな動きを楽しむため javascriptを導入してサイト作成を楽しんでいたりもします。 言語も html css javascript jquery php など、色々楽しみながら勉強してきました。 ほんの数年前から、HTML５＋CSS３ が登場しましたが、 様子を見ていると、どんどん独創的なサイトが出てきています。 スマートフォン用のサイトも作れるようになりたいな、と思っていましたが ようやく重い腰を上げて作業に取り掛かろうと思っています。 そこで質問なのですが、HTML5＋CSS3で作られたサイトで まるでjavascriptで制御されたような軽快なスクロールや動きが散見されます。 こうしたサイトを見ると、javascriptで動かしているのかHTML5で動かしているのか 判別がつきません。 HTML5やCSS3で新しく実装された機能については、ネットで調べると色々出てきます。 例えば、リンクタグをブロック要素化することが簡単になったとか、 角が丸い四角形を充てることができるようになったとか、電話番号をタップすると 「通話」ボタンが出るようになったとか、個別の機能についてはなんとなく把握しました。 しかし、「HTML5+CSS3で作られたサイト全体」で見ると、 いまいちピンと来ないのです。 そこで、お詳しい方に是非、以下のような形で 教えてもらえたらと思い、投稿しました。 ------------------------------------- 実際にHTML5+CSS3で作られたサイトを基に、 どこをどのように設定したのかを見せて欲しい ------------------------------------- 例えば、 http://www.hotakubo-seikei.com/ は、ソースを見るとHTML５で作られていますが（section タグや header タグがありますね） XHTML+CSSでサイトを長年作ってきた人間からすると、 どうしてこんなサイトができるのか全く分からないのです。 javascriptもいくつか利用されていますが、どれがjavascriptによるもので どれがHTML5+CSS3によるものなのかわかりません。 また、一番驚いたのが、サイトの構成です。 サイト全体の横幅が無く全画面表示になっており、 ３カラムで、縦スクロールするとディレクトリが変わるなんて XHTML+CSSの常識では考えられません。 もちろん、デザイナーによるデザインでこうなったと言ってしまえばそれまでですが、 それを実装できていることに感動しているのです。 ↑↑↑ こんな感じで、何かサンプルサイトを基に XHTML+CSSとの違いや、HTML5+CSS3だからこそ実現できることを 分かりやすく教えてもらえたらとても有難いです。 サンプルサイト付きで、なるべく詳しく教えて頂いた方に ポイントを付与させていただきたいと考えております＾＾ どうぞ宜しくお願い致します！
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSファイルを使用せず、HTMLの記述だけで"※"印のぶら下げインデ
CSSファイルを使用せず、HTMLの記述だけで"※"印のぶら下げインデントを表示するにはどうしたらよいでしょうか？CSSファイルを利用して再現する方法は結構あるようですが、事情があってCSSファイルは自由に編集ができないのでHTMLのタグだけで再現したいです。<li>では"※"は再現できないみたいなので・・・すいませんが、お知恵貸していただけるとうれしいです。
- ベストアンサー
- HTML
お礼
ありがとうございます。 ただ、この状態ですと、最初の5つが消えてしまいます。 過去に読み込んだ分も出るようにしたいのですが、JavaScriptでもいいので参考ソースをお願いしてもよろしいでしょうか？ 言葉では中々伝えにくいのですが、アンドロイドマーケットのように、スクロールさせると続きのページ分が表示されるようにしたいのです。 もしわかればお願いします<(_ _)>