こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

携帯サイトの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サイトでかまわないのですが…

よろしくお願いいたします。

投稿日時 - 2012-07-19 14:29:10

QNo.7599041

困ってます

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

id を付けているのは <a href="#id名"> でページ内リンクさせたい場合の為でしょう。
携帯の場合スクロールが面倒なので、ページ内リンクをよく使います。

携帯サイトへ振り分けですが、リンク先に書かれている方法ではフューチャーフォンだけ振り分けられ、スマートフォンは対象になりませんのでPCサイトへアクセスします。

投稿日時 - 2012-07-19 18:13:04

お礼

t_ohta様回答ありがとうございます。
なるほどです!
ページ内リンクのために、divに名前を付けている所と
付けていないところがあったんですね。

また携帯サイトの振り分けも、t_ohta様のお話を聞いて安心しました。
ありがとうございました!

投稿日時 - 2012-07-20 20:18:20

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.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向けサイトと携帯向けサイトを共通化しても大きな問題はないんじゃないでしょうか。
私はそうしています。

投稿日時 - 2012-07-20 01:06:51

お礼

cnkozo様回答ありがとうございます!

教えて頂いたサイトは、まさに自分の目指す携帯の振り分け方法でした!
キャリア別で設定できるんですね。PHPかCGIでも挑戦してみます。

連続で質問してしまってすみません、
携帯向けサイトをSPサイトと共通化されているという部分ですが、
画像の処理はどうされていますか?

幅が携帯サイトの方が小さいので、
スマホで携帯サイトを見たら、メインの画像などが小さく
(230pxで作成しています。) 左右の隙間が気になるのですが…

それとも幅が変わっても
変にならないデザインを考えて作っているのでしょうか?

もしよろしければ、アドバイスお願いいたします。

投稿日時 - 2012-07-20 20:40:05

ANo.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 )

投稿日時 - 2012-07-19 18:26:32

お礼

ORUKA1951様、
id属性について、とても丁寧に教えていただきありがとうございます!
すごく分かりやすかったです。

自分はまだまだHTMLがちゃんと理解できていなかったと痛感しました。
リンク先もじっくり読ませて頂きます。
貴重なアドバイスありがとうございました。

投稿日時 - 2012-07-20 20:26:05

あなたにオススメの質問