外出自粛中でも楽しく過ごす!QAまとめ>>

特定のページだけスマホに分岐する方法を教えてください。
例えば、メールフォームのみ、スマホだと見にくいので、
http://hoge.com/mail.html のところ スマホから来たユーザーのみ
http://hoge.com/smail.html を読ます方法はないでしょうか?

このQ&Aに関連する最新のQ&A

A 回答 (2件)

そういう場合には、ユーザーエージェントを判別して振り分けを行います。


利用者の環境によって、別ページ(別ディレクトリ)へ遷移するという事です。

やり方としては主にphpで行う方法、.htaccessで行う方法があります。
phpでやる場合は当然ファイル拡張子を.phpにする必要があります。
javascriptでも出来ます。
ユーザーがjavascriptを切っていると使えませんが、スマホやタブレットでjavascriptを切る事はほぼないと思うので、これも有効です。
やり方は下記を参考に。
http://html5-css3.jp/smartphone/pc-iphone-androi …

1の方が言うような同一ファイルで横幅によってレイアウトを変更するようなやり方はレスポンシブデザインと言って流行のやり方ではありますが、デメリットも多く全てのサイトに向いているわけではありません。

レスポンシブのメリットとしては、同一htmlなので更新が1か所で済むのが一番で、あとはよく設計された場合に作業量が少なくて済む所です。
SEOに強いという噂はありますが、Googleの方が「そんなふうにはサイトを差別化しない」と否定しています。

デメリットとしては、スマホサイトを作った場合よりも読み込みが遅い(PC用の画像等を全部読み込むため)、
開発にコストがかかる、などです。
またレスポンシブに対応するにはある程度スキルが必要で、慣れていない方には敷居が高いです。

今からサイト自体を設計するのなら、考慮に入れてもいいですが、
今すでにサイトがあり、1ページだけ振り分けたいという事でしたら
レスポンシブ対応は全くお勧めできません。
その場合は普通に別ファイルを作成して振り分けたほうが、レスポンシブ20分の1くらいの作業量で出来ると思います。
    • good
    • 1
この回答へのお礼

tkmojoさんありがとうございます。
参考にさせていただきます。

お礼日時:2013/10/24 18:19

本来は、


『HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
であり、
『文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
 ですから、
 ひとつのページで、スマホとパソコンのブラウザに対応させるのが筋です。二種類ページを作らなくてすみますし、SEO的にも良いです。
・二種類ページを作成した場合は
 .htaccessやCGIでブラウザを判別して異なるページを表示させたり、HTMLを書き直して出力
 (欠点)日々刻々新機種が登場するのについていけない。判別できなかったときの処理は?

(1案)
 リキッドでデザインして、ウィンドウ幅が狭いときは、余計な物は下に回す。
 さらに、必要なら mediaqueryでスタイルシートを切り替える。
(2案)
 所詮CGIを使うので、フォーム自体をCGIから出力させね。while(<DATA>){print;}
  ただし判別には上記の問題がある。

(1案)が本来の方法です。とても楽です。
    • good
    • 0
この回答へのお礼

ORUKA1951さん
ありがとうございます。

お礼日時:2013/10/23 16:09

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

Qスマホだけメニューが開く設定にしたい

Dreamweaverを使っています。

レスポンシブルか、可変グリッドを使ってスマホサイトを作りたいのですが、
スマホとPCで初期状態を少し変えたいので 方法はないでしょうか

レスポンシブルではCSSは切り替えできても、HTMLは自動で切り替わらないので悩んでいます。

1.URLをスマホで別にせず同一にする

2.JQuery等を使って アコーデオン メニューを作る
  クリックしたら下にビョ~ンと広がるメニューです。
3.PCは初期状態でアコーデオンメニューは全部開いた状態
  スマホはメニューは閉じた状態で ファーストビューを始めたい

JQueryを使わなくても良いのですが、メニューを折りたたみ、スマホとで状態を自動で変えたいのが希望です。
良い方法がありましたらお願いします。

Aベストアンサー

MediaQueryのスクリーン幅はjavascriptで簡単に取得できますから、容易にコントロールできますよ。
http://qiita.com/blogger323/items/ba66326badc172315c45

仮にクラス名を付加しておき、jQueryで別の位置に定義したDOMの内容をゴッソリ移すとかすればスッキリすると思います。

QHTMLファイル同士での値渡し

困っています。

HTMLファイルからHTMLファイルへ移動するときに、
HTMLファイル1でJavaScript で算出された値を
HTMLファイル2へ渡して使用したいのです。

showModalDialogだとダイアログにしか渡せないし・・・。
このように、値をそのまま次のページに渡すための方法を教えてください。
お願いします。

Aベストアンサー

すみません。うっかりしてました。

document.write(FORM[v1]);
では、v1を変数と認識してしまうので、エラーになってしまいますね。

document.write(FORM.v1);  // 「FORM.v1」です
あるいは
document.write(FORM["v1"]);
としてください。

Q独自ドメインからどこのレンタルサーバーを使用してるか調べる方法

独自ドメイン(www.好きな名前.com等)からどこのレンタルサーバーを使用してるか調べる方法を教えて下さい。
またレンタルサーバー専用会社なのか大手プロバイダのレンタルサービスを使用してるかを調べる方法をできれば具体的に教えて下さい。

Aベストアンサー

.comや.orgなどならば http://www.whois.sc/
でドメイン名を入れて検索すると、
その結果表示の中の IP location という項目に
会社名がでます。

.jpならば コマンドプロンプトで"ping サーバ名"で
IPアドレスを取得、次に http://www.nic.ad.jp/
下部左の部分にそのIPアドレスを入れて検索すると
会社名がでます。

でドメインを入れて

Q存在しないページを指定してもTOPページへリダイレクトする方法?

最近ホームページの構成を変更したんですが、検索エンジンから来てルートディレクトリに該当するHTMLファイルがないとpage not foundになってしまいます。
そこで、どんなHTMLファイルにきてもTOPページのindex.htmlに飛ばせる方法ってありますか?
確かhttp://www.directnic.com/ではhttp://www.directnic.com/xxxx とどんなサブディレクトリを指定してもTOPページに行くようになってます。

Aベストアンサー

まず、#2 の方が提示されている様に
.htaccess ファイルを用いて実現できると思います。
(簡単な例示:ErrorDocument 404 /index.html
 DocumentRootから見た絶対パスを記します。)

ただ、ご希望の仕掛けそのままを実現する事は再考をお勧めします。
それはTOPページへ即 飛ばす事です。
閲覧者が当該ページがない事を認識できない可能性があります。
それから質問で提示のサイトも単にTOPページに飛ばしているのではなく、
CGIを用いてエラー情報を編集しているか別のページでTOPページと類似の記述がされている物と思われます。

よって.htaccess ファイルを用いてエラーページを自作してそちらをエラー時に表示する様に指定して、
エラーページにてTOPページと同等の情報を記述しておくかTOPページへのリンクなり自動更新を用意する事をお勧めします。

参考URL:http://www.shtml.jp/htaccess/404.html

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

QHPからサーバー会社を調べることできますか?

HPを見ただけで、そのHPがどこの業者のサーバー(レンタルサーバー)を利用しているなどの情報はわかるのでしょうか?また多少面倒でもそれを調べることはできるでしょうか?

Aベストアンサー

ホームページが表示される仕組みを考えてみると、

1. URL を指定
2. URL を DNS 問い合わせなどで IP アドレスに変換
3. IP アドレスから通信先のサーバを特定

という手順になります。

例えば以下のサイトで調べたいサイトのホスト名を入れ、[検索] をクリックしてみます。
http://www.iphiroba.jp/index.php
ホスト名とは、調べたい URL が http://www.aguse.jp/ だったら、www.aguse.jp の部分です。

URL から IP アドレスを調べ、IP アドレスからホスト名を逆引きすると、どこのサーバーなのかが分かります。(上記の例では Network Information: [ネットワーク情報] の部分 )

URL は表看板に過ぎないので、URL に使用されているドメインを Whois 検索すると ドメインの登録者が分かります。(上記の例では Domain Information: [ドメイン情報] の部分 )
但しドメインの登録者が必ずしもホームページの管理者とは限らないので注意が必要です。

大切なのは、ただ外部のサービスに頼るのではなく、自分でインターネットの仕組みを学んで理解することです。
パケットキャプチャツールを使うと、自分が今どこと通信しているのかが分かると思いますよ。

参考URL:http://w255100.ppp.asahi-net.or.jp/

ホームページが表示される仕組みを考えてみると、

1. URL を指定
2. URL を DNS 問い合わせなどで IP アドレスに変換
3. IP アドレスから通信先のサーバを特定

という手順になります。

例えば以下のサイトで調べたいサイトのホスト名を入れ、[検索] をクリックしてみます。
http://www.iphiroba.jp/index.php
ホスト名とは、調べたい URL が http://www.aguse.jp/ だったら、www.aguse.jp の部分です。

URL から IP アドレスを調べ、IP アドレスからホスト名を逆引きすると、どこのサーバーなのか...続きを読む

QCGIでソースがそのままでてしまうのですが・・・。

CGIでソースがそのまま表示されてしまうのですが、どうしてなのでしょうか?

先週からCGIやPerlを学び始めました。そこで簡単なものを試しに作ってみたのですが、入力したソースがそのまま表記されてしまいます。

ちなみに、こんなものです。

#! c:/perl64/bin/perl

print "Content-type: text/plain\n\n";
print "Hello Perl !";

どこをどう変えればいいのか、わからないので、質問してみました。

わかる方がいましたら、教えてください。

初心者なので、お手柔らかにお願いします。

.





この質問に補足する.

Aベストアンサー

CGIスクリプトのソースがそのまま出力されるのは、そのファイル/URIがCGIとして実行できていないためです。

httpd.confの<Directory>ディレクティブや<Location>ディレクティブなどの指定箇所が間違えているか、
ファイルの拡張子を間違えているか、
httpd.confを書き換えてからApacheをリスタートしていないか。。。


Forbiddenが出てきたら.cgiファイルに実行権限が無い。
Internal Server Errorが出てきたら、Perlがインストールされていないか.cgi拡張子とPerlが関連づけられていない。

ということが考えられます。


人気Q&Aランキング