携帯サイトのdivタグとアクセスの振り分けについて

前へ 次へ
このQ&Aのポイント
  • 携帯サイトのdivタグとアクセスの振り分けについて、適切な要素の使用方法
  • 携帯サイトにおけるdivタグとid属性の適切な使い方
  • 携帯サイトへのアクセス振り分けにおけるhtaccessの設定方法
回答を見る
  • ベストアンサー

携帯サイトのdivタグとアクセスの振り分けについて

携帯サイトを作らなくてはいけなくなったので 下記のホームページを参考に作成しました。 http://design.kayac.com/topics/2010/09/mobile-template.php 上記HPに携帯サイトのデータがダウンロードできましたので、中を見てみたら <div id="○○"　style="○○">と<div style="○○">がありました。 全部、<div style="○○">ではダメなのでしょうか？ それともページの大きな構成部分には、id属性を付けた方が良いのでしょうか？ また携帯からのアクセスは、携帯サイトへ振り分けたいのですが 下記のHPを参考にhtaccessを作成しました。 http://lolipop.jp/manual/hp/htaccess-07/ ですが、これってau・docomo・Softbankからのアクセスは 携帯サイトへいってしまうんでしょうか。 スマホの場合は、PCサイトでかまわないのですが… よろしくお願いいたします。

  • karup
  • お礼率96% (233/241)
  • HTML
  • 回答数3
  • ありがとう数3

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

  • ベストアンサー
  • t_ohta
  • ベストアンサー率38% (5080/13275)
回答No.1

id を付けているのは <a href="#id名"> でページ内リンクさせたい場合の為でしょう。 携帯の場合スクロールが面倒なので、ページ内リンクをよく使います。 携帯サイトへ振り分けですが、リンク先に書かれている方法ではフューチャーフォンだけ振り分けられ、スマートフォンは対象になりませんのでPCサイトへアクセスします。

karup
質問者

お礼

t_ohta様回答ありがとうございます。 なるほどです！ ページ内リンクのために、divに名前を付けている所と 付けていないところがあったんですね。 また携帯サイトの振り分けも、t_ohta様のお話を聞いて安心しました。 ありがとうございました！

その他の回答 (2)

  • cnkozo
  • ベストアンサー率38% (7/18)
回答No.3

(1)CSSで例えば、 #contents { background-color:#FFFFFF; } とすると、 <div id="contents"> .back { padding:2px;} とすると、 <div class="back"> ですかね。 (2)携帯の振り分けで.htaccessでもいいんでしょうが、 私はPHPなどを使って振り分けています。 http://html-coding.co.jp/knowhow/tips/000218/ ここが参考になるんじゃないでしょうか。 カヤックさんだけに頼らんほうがいいです。 なお、最近の携帯はUTF-8にも対応しているみたいなんで、 カヤックさんが言うようにシフトJIS必須ってわけでもないと思います SP向けサイトと携帯向けサイトを共通化しても大きな問題はないんじゃないでしょうか。 私はそうしています。

karup
質問者

お礼

cnkozo様回答ありがとうございます！ 教えて頂いたサイトは、まさに自分の目指す携帯の振り分け方法でした！ キャリア別で設定できるんですね。PHPかCGIでも挑戦してみます。 連続で質問してしまってすみません、 携帯向けサイトをSPサイトと共通化されているという部分ですが、 画像の処理はどうされていますか？ 幅が携帯サイトの方が小さいので、 スマホで携帯サイトを見たら、メインの画像などが小さく (230pxで作成しています。) 左右の隙間が気になるのですが… それとも幅が変わっても 変にならないデザインを考えて作っているのでしょうか？ もしよろしければ、アドバイスお願いいたします。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

＞携帯サイトを作らなくてはいけなくなったので 　それは、すこしおかしいです。なぜなら 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML4.01仕様書「HTMLの略歴」( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より 　この文章のすこし前に 『HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。 もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。 』 　とも書かれています。 　たった一種類の文書しか作らなくて良いから、わざわざHTMLを使ってページを作成するのですよ。 ＞全部、<div style="○○">ではダメなのでしょうか？ 　そもそもdivは 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［要素のグループ化: DIV要素とSPAN要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より 　なのですから、idやclass名は文書構造を補完するためにつけます。すなわち <body> 　<div class="header"> 　　<h1>タイトル</h1> 　　<p>ここにこの文書のヘッダーに当たる記事が入る。</p> 　</div> 　<div class="section" id="HTML"> 　　<h2>このセクション(章)の見出し</p> 　　<div class="section" id="History_of_HTML"> 　　　<h3>この項目の見出し</h3> 　　</div> 　</div> 　<div class="footer"> 　　<h2>フッタ</h2> 　　<p>ここにこの文書のフッタ</p> 　</div> </body> 　のように使います。idはリンクやjavascriptなどのターゲットになるときに使います。そうでない場合はclassのほうが使い回しが良いです。この『d属性及び class属性と併用することで、文書に構造を付加する』は、わかりにくかったのでHTML5では、新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )として独立しましたから、HTML5では <body> 　<header> 　　<h1>タイトル</h1> 　　<p>ここにこの文書のヘッダーに当たる記事が入る。</p> 　</header> 　<section id="HTML"> 　　<h2>このセクション(章)の見出し</p> 　　<section id="History_of_HTML"> 　　　<h3>この項目の見出し</h3> 　　</section> 　</section> 　<footer> 　　<h2>フッタ</h2> 　　<p>ここにこの文書のフッタ</p> 　</footer> </body> となります。このHTMLの新しい要素がHTML4.01strictやXHTML1.0strict,XHTML1.1で作成するときの良い参考になるでしょう。 　たぶん、参考にされたページはHTMLとは何かを知らない人が作成したものでしょうね。そんなことしてたら新しい端末が登場するたびにページ数がどんどん増えていきます。メンテナンスはどうするのですか？？いまでさえ、驚くほどたくさんの携帯電話、スマホ、モバイルパソコンからとてつもない広い画面のパソコン、テレビでも閲覧される時代です。そのうえ検索エンジン対策となるとしんどいのに・・ ★上記回答のリンク先も読んでおくこと・・しつかりと・・ サンプルが以前書いた回答にあります。 携帯とPCのどちらともホームページを作りたいです。 - ホームページ作成ソフト - 教えて！goo ( http://okwave.jp/qa/q7591002.html#a2 )

karup
質問者

お礼

ORUKA1951様、 id属性について、とても丁寧に教えていただきありがとうございます！ すごく分かりやすかったです。 自分はまだまだHTMLがちゃんと理解できていなかったと痛感しました。 リンク先もじっくり読ませて頂きます。 貴重なアドバイスありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • .htaccessによる携帯のアクセス振分けについて

    .htaccessによる携帯のアクセス振分けについて .htaccess　で携帯とパソコンの振分けを行ったのですが http://*******.com/ を携帯からアクセスした場合はちゃんと携帯サイトへ振り分けられますが http://*******.com/index.html　と ドメインの後ろにファイル名が入ったＵＲＬに アクセスすると振分けが行われずパソコンのサイトを表示してしまいます 参考サイトには 「「.htaccess」ファイルは設置したディレクトリ以下全てに影響します。」 と書いてあります 参考サイト： http://www.w3lab.jp/htac/keitai.html どのファイルやディレクトリにアクセスをしても 携帯サイトに振り分けられるようにしたいのですが どのようにしたらいいでしょうか？ よろしくお願いいたします .htaccess　には下記の通り記述してあります ------------------------------------------------------------ RewriteEngine On RewriteCond %{HTTP_USER_AGENT} DoCoMo [OR] RewriteCond %{HTTP_USER_AGENT} J-PHONE [OR] RewriteCond %{HTTP_USER_AGENT} Vodafone [OR] RewriteCond %{HTTP_USER_AGENT} SoftBank [OR] RewriteCond %{HTTP_USER_AGENT} UP.Browser RewriteRule ^$ /mobile/index.html [R] ------------------------------------------------------------

    • ベストアンサー
    • HTML
  • 携帯サイトの<div>タグについて

    教えてください。 過去の質問No.1519748（未解決）と同内容になるかと思いまが、携帯サイトで <div style="background-color:#000000"> ここに何か書く </div> を反映させるにはどのような方法があるのでしょか？ http://cawa.m-store.jp/i/cgi-bin/index.cgi?uid=NULLGWDOCOMO を参考にソースを解読したのですが、反映されない理由が分かりません。 HTMLだけではなくcgi等も絡んでくる問題なのでしょうか？ ちなみに、ドリームウィーバーで作成してFOMA(実機)で閲覧すると反映されていない という状況です。どうかみなさまのお知恵を貸してください。よろしくお願いいたします。

  • PCサイトと携帯サイトを.htaccessで切り分けしたい

    今、下記のようにPC用のページと携帯用のページを作っています。 （わかりにくくて申し訳ありません） aaa.bbb -index.html -.htacces | - mobile（フォルダ名） 　　-index.html この状況で、 携帯からPCサイトにアクセスしてきた場合に、 htaccessを使って、強制的に携帯サイト /mobile/index.html に飛ばしたいと思い、下記のような記載にしています。 （なお、ある理由により、http://www.aaa.bbbでアクセスされたものは、強制的に http://aaa.bbb　にもしています） -------------------------------------------------------------- RewriteEngine on RewriteCond %{HTTP_HOST} ^(www\.aaa\.bbb)(:80)? [NC] RewriteRule ^(.*) http://aaa.bbb/$1 [R=301,L] RewriteCond %{HTTP_USER_AGENT} ^(DoCoMo|KDDI|DDIPOKET|UP\.Browser|J-PHONE|Vodafone|SoftBank) RewriteRule ^$ /mobile/ -------------------------------------------------------------- .htaccessの基本を理解していないのが問題なのですが、 どうすればうまくできるのかご教授頂けないでしょうか？ よろしくお願いします。

    • ベストアンサー
    • HTML
  • モバイルサイトへの振り分け

    サイト運営をしております。 モバイル向けのサイトを作成し、携帯キャリアからアクセスすれば .htaccessにより自動でモバイルコンテンツが表示されるよう設定したのです。 しかし、検索結果からアクセスするとPC向けが表示されてしまいます。 URL直接入力からアクセスすると、ちゃんとモバイルコンテンツが表示されるのです。 下記サイトを参考にしました。 http://www.systemania.biz/source/keitaihuriwake01.html 私の携帯キャリアはauです。 サイトのサーバはcoreserverです。 何が原因でこうなっているのか教えて下さい。

    • 締切済み
    • CGI
  • 携帯サイトの振り分けについて

    説明がややこしかったらすみません。 現在、既存のPCサイトに合わせて新規の携帯サイトを作っています。 PCサイトのURL（index.html）にアクセスをしたときに 携帯からのアクセスは（/mobile/index.html）などに飛ばしたいと考えています。 htaccessでの振り分けを考えていましたが、 サーバーがhtaccessの使用ができないみたいで困っています。 PCサイトの（index.html）は URLの変更はできませんので index.phpなどをおいて　phpにアクセスさせて飛ばすこともできなくて どうしたらよいか困っています。 どなたかよい解決方法がお分かりになる方がいらっしゃいませんでしょうか？ よろしくお願いいたします。

  • リンクを押したときのDIVタグの動きの制御

    早速質問させていただきます。 現在止まっているのは、DIVタグに有るid属性が変数かつ DIVタグが複数ある場合にどのように取得し、表示の制御をしようかと悩んでいます。 制御内容として、 有る一番上のところをクリックすると、他の開いている状態のDIVのSTYLEをnoneにするということを行いたいのです。 id属性が固定値なら何とかなると思うのですが、変数かつDIVタグがそのときによって数が変わるためどのように値を取得して制御すれば良いかわかりません。 以上なのですが、何か解決の糸口があればご教授ください。お願いいたします。

  • 携帯からYahoo検索【PCサイト】振分けについて

    携帯サイトから、ＰＣのトップページにアクセスした場合、携帯サイトのトップページへ振り分けられるように、.htaccessを設定しています。 携帯からYahoo検索で、【ケータイサイト】カテゴリのトップページへアクセスした場合は、問題なく振り分けられます こんな感じです↓ http://www.ドメイン/index.html　→　http://www.ドメイン/mobile/index.html ですが、【PCサイト】カテゴリのトップページへアクセスしても、モバイルサイトのトップへ振分けされず、ＰＣサイトのトップがそのまま表示されてしまいます。 【PCサイト】カテゴリからも、mobile/index.html　へ振分けを行うことは可能でしょうか？ よろしくお願いします

  • .htaccessで携帯サイトとPCサイトの振り分け

    http://○○.com/　携帯サイトメイン 　　　　　　└/www/　PCサイトメイン作成中 http://○○.com/ 　　　　　　└/www/をロリポップ利用中でをサブドメインにして http://www.○○.com/ としました。 http://○○.com/に 携帯でアクセスした場合　http://○○.com/ PCでアクセスした場合　http://www.○○.com/ としたいのです。 現在携帯サイトをメインに展開しているので、 携帯サイトをメインにしたページの振り分けの仕方がわかりません。　　　　　　 http://○○.com/PCサイトメイン 　　　　　　└/mobile/携帯サイトメイン で.htaccessの内容を RewriteEngine on RewriteCond %{HTTP_HOST} ^(www\.○○\.com)(:80)? [NC] RewriteRule ^(.*) ?http://○○.com/$1? [R=301,L] RewriteCond %{HTTP_USER_AGENT} ^(DoCoMo|KDDI|DDIPOKET|UP\.Browser|J-PHONE|Vodafone|SoftBank) RewriteRule ^$ /mobile/ にして携帯のアクセスを振り返ることができましたが この反対にしたいのですが可能でしょうか？

  • mod_rewriteで携帯/PCサイト振り分けの記述について

    現在PCサイトを持っていまして、このサイトの携帯版を作りました。 そこでmod_rewriteを使って.htaccessへの記述でお伺いします。 （mod_rewritは借りているサーバーにインストールされています）。 現在のPCサイトは、 http://www○○○.com/です。 携帯サイトは、 　DoCoMo：http://www○○○.com/mobaile/i/ 　Softbank：http://www○○○.com/mobaile/v/ 　au：　　http://www○○○.com/mobaile/ez/ です。 ■携帯振り分けの.htaccessは下記のとおりなのですが、これであっていますか？オプションなども大丈夫でしょうか？ RewriteEngine On #DoCoMo端末へのリンク RewriteCond %{HTTP_USER_AGENT} ^DoCoMo RewriteRule ^$ http://www○○○.com/mobile/i/[L] #Vodafone、J-Phone、Softbank端末へのリンク RewriteCond %{HTTP_USER_AGENT} ^vodafone [OR] RewriteCond %{HTTP_USER_AGENT} ^softbank [OR] RewriteCond %{HTTP_USER_AGENT} ^J-PHONE RewriteRule ^$ http://www○○○.com/mobile/v/[L] #KDDI、au端末へのリンク RewriteCond %{HTTP_USER_AGENT} ^KDDI [OR] RewriteCond %{HTTP_USER_AGENT} ^Up.Browser RewriteRule ^$ http://www○○○.com/mobile/ez/[L] ■また、PCでアクセスした場合のRewriteCondの書き方がわかりません。 上記以外の場合はPCサイト：http://www○○○.com/にアクセスするにはどのようにしたらよいのでしょうか？ お手数ですがおわかりの方がいましたらよろしくお願いします。

    • 締切済み
    • CGI
  • .htaccessによる携帯・PCアクセス振り分けについて

    下のような内容の.htaccessで、http://www.test/index.htmlに携帯でアクセスしてくるのをhttp://www.test/mobile/　に飛ばせるようにしています。ちなみに.htaccessはhttp://www.test/index.htmlの横に置いています。 ------------------------------------------ Options +FollowSymLinks RewriteEngine On RewriteCond %{HTTP_USER_AGENT} ^(DoCoMo|KDDI|DDIPOKET|UP\.Browser|J-PHONE|Vodafone|SoftBank) RewriteRule ^$ http://www.test/mobile/index.html [R] ------------------------------------------ しかし、これだと http://www.test/index.html に携帯でアクセスした場合はきちんと飛ばされますが、例えば http://www.test/Profile/Profile.html といった、中に入ったページに携帯でアクセスした場合、うまく飛んでくれません。 どうしたら良いのでしょうか？ 宜しくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する