スーマートフォンの用のHP作成に関して

Question

初めまして。

今回、初めてホームページ作成に取り組み一か月の者です。

作成ソフト　：ホームページビルダー１６
ＯＳ　　　　　：VISTA

個人事業のためのＨＰを必要としており 、

ホームページビルダー１６を使用して
ＰＣ閲覧用のサイトを作成し、最近ウェブ上にＵＰしました。

そこで、今度は、スマートフォン向けのものを作ろうと思い 
既に作ってあるＰＣ用サイトをもとにホームページビルダーの変換機能で変換しましたが

正直メチャクチャで使い物になりません。

修正も大変そうです。

そこで、新規作成でスマートフォン用のサイトを作ろうと思いますが

新たに作成した場合どのような手続きでＰＣ用サイトと繋げばいいのでしょうか？

できれば単に別のサイト(ＨＰ)としてリンクを貼るとかではなく

ＰＣで見た時はＰＣのサイトが、スマートフォンで見た時はスマートフォンのサイトが自動的に開くようにしたいのですが・・・

可能かどうか(そもそも初心者の自分にできることなのか？)、
可能ならばやり方を教えてください。

以上お願いします。

akira618 · Accepted Answer

スマートフォンでは、機種により多少回覧状態は異なりますが、基本は通常のPCサイトと何ら変わりません。
また、初心者と言う事で、javaとかphpと言われも、なんか呪文を聞いているような感じでしょう。
そこで、PCでも、スマホでも問題になく回覧できるサイト作りとなれば、問題は横幅のサイズとなります。
あまりデザインに拘らなければ、幅の指定をピクセル単位ではなく％で指定する方法もあります。
こちらは、ビルダーでも全く問題なく出来るはずです。

ちなみにiPhone4sでは、解像度960 x 640ピクセル持っています。
これは、現在販売されているウェブPCと近い数値です。

なので、スマホのどの程度まで機種に対応するかでも、成作の形は変わってきます。
少なくとも、今後のスマホを基本に据えた場合、現在のPC版のホームページでも、問題ないと言う事でも有ります。

あと、感覚的にスマホは、ちょっとディスプレーが大きくなった携帯と思われているかもしれませんが、全く違います。
どちらかというと、小さくなったPCと考えた方が合ってるはずです。

ORUKA1951 · Answer

たびたびすみません。
＞「ビルダーなどのツールではユーザーの思いのままの変更は難しい」
　そんなことはありません。
　HTMLやスタイルシートをよく知っていれば、これほど便利なツールはありません。文書構成要素を囲んで、最適な要素(タグ)を選べばよいのですから。blockguoteなんて間違いやすいタグも覚えなくて良い。
　そのためには、HTMLやCSSをテキストエディタ派以上に知っていなければならないのも事実です。でないと間違ったものを選んでしまいます。すくなくとも「HTMLとCSSを知らなくても、すばらしいページが出来る」は間違いでしょう。知らなければ、どんなツールも真価を発揮できない。
　HTML4.01strictで使えるタグは70種ばかり、よく使うものはその半分でしょう。中学校で学ぶ単語が約1,000語(指導要領)ですから、恐れる数字ではないでしょう。

ORUKA1951 · Answer

　No.3です。以前他の質問で回答したサンプルですが、実際にアップロードして表示を確認してみてください。こんな簡単なHTMLとCSSで対応させられるのです。実際に使うときは、端末によって、読み込む(適用させる)スタイルシートを変える様にHTMLに記述しています。　たぶん、このHTMLでしたら、あなたが読んでもどこに何が書かれているかわかるはずです。sectionは本文、headerはヘッダとか・・。多くの携帯電話でも。また印刷してみてください。・・・きっとHTMLの本当の威力がわかるはず。そして、これはウェブ標準です。 ★Another HTML-lint gateway( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★The W3C Markup Validation Service( http://validator.w3.org/#validate_by_input ) で検証済みです。なお、タブを＿に置換してありますから、すべて戻してください。＿＿サンプル＿＿＿＿＿＿＿

＿＿

＿＿＿

質問

＿＿＿

＿＿＿＿divをfloatで並べることを段組というみたいですね。＿＿＿

＿＿＿

＿＿＿＿下でclearを入れてます。これが定番らしいので。#contentの中にdivAとdivBがあります。その下にクリア用のdivCを置いてます。＿＿＿

＿＿＿

＿＿＿＿#contentをwidth:100%で指定するとカラム落ちします。なのでwidth:800pxとかで指定しています。そしてdivAとdivBのwidthも固定で指定しています。こうするとカラム落ちが防げます。＿＿＿

＿＿＿

＿＿＿＿width:100%が流動的で自然なのは分かります。こちらでカラム落ちしない方法があればベストです。＿＿＿

＿＿＿

＿＿＿＿上記のように固定で考えるのは仕方ないのでしょうか。＿＿＿

＿＿

＿＿＿

回答

＿＿＿

＿＿＿＿挿絵など＿＿＿

＿＿＿

＿＿＿＿floatさえ使わなければ、実に簡単に実装できます。floatをブロックの配置に使いませんから、このように本文中でfloatを使ったり、それを解除したりが自由に出来ます。floatはそのためにとっておきましょう。＿＿＿

＿＿＿

＿＿＿＿挿絵など＿＿＿

＿＿＿

＿＿＿＿このように、本来はabsoluteを使うべきです。特にリキッドスタイルの場合は、floatではなくabsoluteのほうがスムーズです。＿＿＿

＿＿

＿＿＿

方法

＿＿＿

＿＿＿＿IE6以前の古いブラウザに対応させるなら、必ず長くなるほう(多くは本文section)を基準にして、短いほうをabsoluteさせる。＿＿＿

＿＿＿

＿＿＿＿IE7以降の新しいブラウザは、min-widthやmax-widthプロパティが使えるのでそれを活用して、ある程度より小さなウィンドウには横幅を固定してしまうとよいかもしれません。＿＿＿

＿＿＿

＿＿＿＿なお、IE5ではmargin:autoに対応していないため中心に配置されません。またIE6以前は、親コンテナブロックの高さを参照できないため目次部分が実サイズになります。＿＿＿

＿＿

＿＿＿

質問
回答
見本

＿＿

＿

ORUKA1951 · Answer

ある意味難しいかも。
本来はHTMLは、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［2.2.1 HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より
（このページは、基本ですから隅々まで目を通して置いてください。）
と、ひとつのHTMLで、あらゆるブラウザやプラットホームに対処するための仕様です。
　しかし、見栄え(一部のPCやブラウザ限定でのプレゼンテーション)にこだわる影響で、それは失われてしまいます。その原因のひとつに

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
こうしたテクニックは、特定の人々、特定の時代状況でしか成り立たず、すべての人々、すべての時代状況において成り立つものではないのだ。こうしたテクニックの例を挙げよう。
・・・・【中略】・・・
HTMLでページを作らずにプログラムに頼る。(ビルダーなどのオーサリングツールのこと)
・・・【中略】・・・
　こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［14.1 スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より

と、ツールに頼る限り、避けて通れないのです。そのため、.htaccessなどで、ユーザーエージェントごとに異なるページを見せたりする小手先の技術に頼ることになります。

本来の解決方法は、きちんとHTMLを書いて、スタイルシートでプレゼンテーションを指定するしかないのですが、文書構造に従ったHTMLや、それをデザインするきちんとしたスタイルシートは、オーサリングツールでは原理的に不可能なのです。
　すなわち文章の内容を読み解き、これは本文だからsection、これは挿絵や注釈だからfigure、これは引用だからblockquoteなんて、人工知能でないツールには無理です。それをしようとすれば、著者がHTMLを知って意図的にマークアップしないとなりません。スタイルシートにしても、本文中の脚注は右に寄せて本文を回り込ませるけど、フッターや注釈のそれは小さい文字にして点線で囲もうなんてのも、ツールでは無理で著者が意図的に書かなきゃならない。

私は、様々な利用形態が予測されるページだからと言って、複数のページを作成することはありません。今のように膨大な種類の携帯電話やスマートフォンがあり、今後もますます増えていく状況に合わせてページを作成する無駄はしたくありません。いや、不可能です。

多分、解決方法は、HTMLとスタイルシートだけはテキストエディタで書くしかない、それが究極の解決法と言えるでしょう。ツールは、あくまでそういう作業の手助けをするものという割りきりが必要です。

とりあえずは、小さな画面でも--640px巾から、巨大なウィンドウまで適用するリキッドスタイルでページを作成するのが簡単かと思います。
　ちなみに、私は
div.article{
　width:80%;
　min-width:640px;max-width:900px;
　margin:0 auto;
}
としたりしています。これでスマートフォンから、幅広のディスプレイまで対応させています。代替スタイルシートを別途用意して、パソコン利用者や視覚障害者の方は、それも選択できるようにしています。印刷が想定されるページは印刷用スタイルシートも用意しています。もちろんHTMLは一種類です!!。

root_16 · Answer

PCとスマートフォンの判定は、
JavascriptかPHPで判定プログラムを書くのが普通だと思います。
この辺は書籍を買ったほうがいいです。

WEBにもいろいろ情報はありますが、
動作確認してお勧めできるか判断が面倒なので
自分で調べてみてください。

「useragent スマートフォン　判別」
あとは使用言語のjavascript とか PHP
とかで情報は出てくると思います。

スーマートフォンの用のHP作成に関して

スマートフォンでは、機種により多少回覧状態は異なりますが、基本は通常のPCサイトと何ら変わりません。

たびたびすみません。

No.3です。

ある意味難しいかも。

PCとスマートフォンの判定は、

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

　No.3です。