dポイント最大50倍で史上最大級のお得に!

初めまして。

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

作成ソフト :ホームページビルダー16
OS     :VISTA



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

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

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

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

修正も大変そうです。

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

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

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

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

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


以上お願いします。

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

A 回答 (5件)

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


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

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

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

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

なるほど!

という感じでした。要するにスマホでもPCでもどちらもに
あうちょうど良いサイズで作成すればいいということですね。

とてもよくわかります。

ただ、情けない話しですが、私はビルダーのCSSテンプレートを
使っています。

これが、くせもので、ちょっと自分で調べたり勉強した、うろ覚えの知識で
HTML編集をいじれば、もうたちどころにめちゃくちゃに壊れます。

しかも、ものによっては元に戻す作業ができないときもあって
いつもハラハラしています。

(もちろん一定以上の知識があればきっと何とかできるのでしょうが・・・)

なかなか、簡単な変更もできないのが現状です。


でも、もう少し勉強して自分でサイズの変更はできるようにしたいと思ってます。

お礼日時:2011/11/15 09:37

たびたびすみません。


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

ありがとうございます。

とりあえずできました。いろいろ教えて頂きありがとうございました。

お礼日時:2011/12/01 10:01

 No.3です。

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css" media="screen">
<!--
html,body{margin:0;padding:0;background-color:gray;}
div.section p{
_text-indent:1em;
_margin:0 1em;
_line-height:1.6em;
}
div.header,div.section,div.footer{
_width:80%;margin:0 auto;/* センター配置IE5,非対応 */
_min-width:600px;
_max-width:900px;
_border:solid 1px rgb(255,200,200);background-color:rgb(255,200,200);
}
div.section{ /* 本文 */
_position:relative;
_background-color:teal;border-color:teal;
}
div.section div.section img{
_float:left;
_margin: 5px;
_border:1px solid gray;
_background-color:white;
}
div.section div.section{ /* 子供セレクタを使えば簡略化できる */
_width:68%;
_margin:0px;
_min-width:0px;
_border:none;
_position:static;
_border:none;
_margin-left:31%;
_clear:left;/* clearがこのブロック内で使える */
}
div.section div.contentTable{
_position:absolute; /* 絶対配置 */
_top:0;left:0;width:30%;height:100%;
_background-color:aqua;border-color:aqua;
}
div.footer{background-color:yellow;border-color:yellow;}

-->
_</style>
</head>
<body>
_<div class="header">
__<h1>サンプル</h1>
__<div class="abstract">
___<h2>要約</h2>
__</div>
_</div>
_<div class="section">
__<div class="section">
___<h2><a name="QUESTION">質問</a></h2>
___<p>
____divをfloatで並べることを段組というみたいですね。
___</p>
___<p>
____下でclearを入れてます。これが定番らしいので。#contentの中にdivAとdivBがあります。その下にクリア用のdivCを置いてます。
___</p>
___<p>
____#contentをwidth:100%で指定するとカラム落ちします。なのでwidth:800pxとかで指定しています。そしてdivAとdivBのwidthも固定で指定しています。こうするとカラム落ちが防げます。
___</p>
___<p>
____width:100%が流動的で自然なのは分かります。こちらでカラム落ちしない方法があればベストです。
___</p>
___<p>
____上記のように固定で考えるのは仕方ないのでしょうか。
___</p>
__</div>
__<div class="section">
___<h2><a name="ANSWER">回答</a></h2>
___<p>
____<img src="./images/sample.gif" width="120" height="180" alt="挿絵など">
___</p>
___<p>
____floatさえ使わなければ、実に簡単に実装できます。floatをブロックの配置に使いませんから、このように本文中でfloatを使ったり、それを解除したりが自由に出来ます。floatはそのためにとっておきましょう。
___</p>
___<p>
____<img src="./images/sample.gif" width="120" height="80" alt="挿絵など">
___</p>
___<p>
____このように、本来はabsoluteを使うべきです。特にリキッドスタイルの場合は、floatではなくabsoluteのほうがスムーズです。
___</p>
__</div>
__<div class="section">
___<h2><a name="SAMPLE">方法</a></h2>
___<p>
____IE6以前の古いブラウザに対応させるなら、必ず長くなるほう(多くは本文section)を基準にして、短いほうをabsoluteさせる。
___</p>
___<p>
____IE7以降の新しいブラウザは、min-widthやmax-widthプロパティが使えるのでそれを活用して、ある程度より小さなウィンドウには横幅を固定してしまうとよいかもしれません。
___</p>
___<p>
____なお、IE5ではmargin:autoに対応していないため中心に配置されません。またIE6以前は、親コンテナブロックの高さを参照できないため目次部分が実サイズになります。
___</p>
__</div>
__<div class="contentTable">
___<ol>
____<li><a href="#QUESTION">質問</a></li>
____<li><a href="#ANSWER">回答</a></li>
____<li><a href="#SAMPLE">見本</a></li>
___</ol>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
_</div>
</body>
</html>
    • good
    • 0

ある意味難しいかも。


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

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

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

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

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

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

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

ありがとうございます。

とりあえず、引用のWEBを読んでみたいと思います。

さしあたっては、

「ビルダーなどのツールではユーザーの思いのままの変更は難しい」
「先の方がおっしゃたように、サイズがスマホでもPCでも両方で都合のいいページにすればよい」


ということですね。

勉強します。

お礼日時:2011/11/15 09:40

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


JavascriptかPHPで判定プログラムを書くのが普通だと思います。
この辺は書籍を買ったほうがいいです。

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

「useragent スマートフォン 判別」
あとは使用言語のjavascript とか PHP
とかで情報は出てくると思います。
    • good
    • 0
この回答へのお礼

ありがとうございます。

少し、ネットで検索しましたが、まだ理解は難しいです。

しばらく図書で勉強するしかないですね。

もう少し勉強します。

お礼日時:2011/11/15 09:31

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

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

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

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

QPC用ホームページを携帯用に変換は大変な作業?

ビルダーで作ったホームページをビルダー19の体験版で携帯用に変換してみました。

壁紙などが無くなって文字だけになっているページなどもあるんですが

横に長い文字列は何度も折れて何段にもなって読みにくいです。

これは携帯画面に収まるように編集し直すんですよね。そして実際に携帯画面で何度も確認するんですよね。

これって大変な作業ですよね?

Aベストアンサー

パソコン用の ホームページを スマホ対応に変換出来るサイトもあります。
http://shutto.com/

http://mobeek.net/

Qホームページビルダーで作成したサイト情報の保存場所は?

ホームページビルダーで作成したサイト情報の保存場所は?

パソコンをWindows XPからWindows7に買い換えたので、XPで使っていた【ホームページビルダーV6.5】を7にインストールし直しました。
しかしサイト情報(FTPサーバーアドレスやパスワード)をメモしたテキストファイルを誤って削除してしまい、サイトの再構築ができなくなってしまいました…

そこで質問です。

もともと使っていたXPの中からサイトの情報(転送時に使うFTP情報)をコピーして7に持っていきたいのですが、ホームページビルダーで作成したサイト情報の保存場所はどこなのでしょうか?
ホームページビルダー自身はCドライブ内のprogram filesにあります。
調べたところ、サイト情報はそことは別に「C:\Windows\Application Data\Ibm\HomePage Builder Version 6」に入っているという情報を見つけたのですが、Windowsフォルダ内にApplication Dataというフォルダはありませんでした。
自分のミスで本当に情けない限りですが、XPでのホームページビルダーV6.5のサイト情報が保存されている場所をご存じの方、いましたらご回答のほど宜しくお願い致します。

ホームページビルダーで作成したサイト情報の保存場所は?

パソコンをWindows XPからWindows7に買い換えたので、XPで使っていた【ホームページビルダーV6.5】を7にインストールし直しました。
しかしサイト情報(FTPサーバーアドレスやパスワード)をメモしたテキストファイルを誤って削除してしまい、サイトの再構築ができなくなってしまいました…

そこで質問です。

もともと使っていたXPの中からサイトの情報(転送時に使うFTP情報)をコピーして7に持っていきたいのですが、ホームページビルダーで作成し...続きを読む

Aベストアンサー

windows7だと、ビルダーv6.5は未対応となっていますので、
もしかしたらうまく使用できないかもしれませんが・・・。

xpだとWindowsじゃなくてDocuments and Settings¥ユーザー名¥内にApplication Dataがあります。
その中にIBM¥HomePage Builder Version ●¥site¥があると思います。
siteをクリックしてください、ご自分が作成したサイト名(ビルダーのサイト一覧でのサイト名)のフォルダがあると思います。
このフォルダの中身のファイルを直接確認することはできないと思うのですが、サイト情報が保存されているのはこちらかもしれません。
(転送設定情報が含まれているかどうかは確認できませんでした。)

Qホームページビルダーのスマホ同期の解除

ホームページビルダーのスマホ同期の解除
ホームページビルダーの16を使ってHPを作成しました。
スマホへの同期機能があったので、とりあえず同期をしてみましたが、出来上がったのを見てビックリ。脱字やレイアウトがめちゃくちゃでした。
これだったら同期していない状態の方が良いので元に戻したいのですが、方法がわかりません。どなたか助けていただけないでしょうか??

という過去の質問と同じで内容でしたので、下記ご返答を元に対応

サイトビューでindex.htmlを右クリック リダイレクトンの設定
ダイアログでリダイレクトを解除してみてください。

実施してみましたが、治らず。

フォルダ内のSPデータはすべて削除して、サイト転送しましたが、治らず。

単純にスマホでもPCと同じ内容のサイトを表示したいだけなのですが。

よろしくお願い致します!

Aベストアンサー

もうちょっと、頭を使いましょう。

パソコンで見て、URLをコピーしてスマホにメールで送ればいいと思うよ。
他、ちょっと考えれば見れると思いますよ。
そして、ブックマークすればいいよね。

Qホームページビルダーでセルの幅の固定するには

ホームページビルダー6.5の標準モードでの表の挿入ついて教えてください。
表のセルの幅を300ピクセルに固定したいと思っています。
セルをを選択→属性の変更→セル→セルの幅に300(ピクセル)を入力。
すると、セルの幅は300ピクセルに固定されますが、セルに長い文章を入力すると文章にあわせて幅が大きくなってしまいます。

どうすればセルの幅を固定し、文章がセルに合わせて表示されるようになりますか。
よろしくお願いします。

Aベストアンサー

スタイルシートを使います。
(後で説明書を読んでね。)

セルの幅に300をとりあえず未入力状態にします。
[表]又は[セル]タブ内の[スタイル]ボタンをクリック、
[スタイル]タブ内の[現在のタグのみにスタイルを設定]の[編集]ボタンをクリック、
[位置]タブ内の[幅]の「予約語」→「ピクセル」に変更して
入力ボックスに「300」を入力です。(以後、OKボタン)

下記URLも参考にしてください。

参考URL:http://tohoho.wakusei.ne.jp/wwwcss.htm

Qホームページビルダー リンク設定できない

ホームページビルダーで作っているのですが リンクできません
ビジュアルサイトビューでリンク設定できたらツリーみたいになるはずなのに
リンクされていないHTMLファイルのとこにあるのですが
リンク挿入 ページリンク作成する リンク先INDEX.HTMLとつなげたいのですが
どうしたらいいのですか?

Aベストアンサー

親ウィンドウ(index.html)のページを開きます。
その中の「この部分にリンクを貼りたい」というところを反転させます(文字の場合)。
ロゴや画像の場合はその部分をクリックするだけでOK。
そのリンクを貼りたいところで右クリックすれば、「リンク挿入」があります。
別ウィンドウが出てきます。
「参照」ボタンでどのページをリンクしたいのか設定。
一番下に「ターゲット」があります。
このターゲットで別ウィンドウを開くのか、フレーム使用で右側に開くのかなどを設定します。

右クリック→リンク挿入でなくても、
リンクを設定したいところをクリックして、ツールバーにある「挿入」→リンクでも出来ます。

他には、ご質問にある「ビジュアルサイトビュー」で、
「リンクされていないHTMLファイル」にあるページをリンクしたいページまでドラッグすることも出来ます。リンク解除したいときには、逆に「リンクされていないHTMLファイル」にドラッグすれば元通りですね。

http://www-6.ibm.com/jp/domino01/swhc/esupport.nsf/key/49256A6A0001F136492568B70015C90E?opendocument

参考URL:http://www-6.ibm.com/jp/domino01/swhc/esupport.nsf/key/49256A6A0001F136492568B70015C90E?opendocument

親ウィンドウ(index.html)のページを開きます。
その中の「この部分にリンクを貼りたい」というところを反転させます(文字の場合)。
ロゴや画像の場合はその部分をクリックするだけでOK。
そのリンクを貼りたいところで右クリックすれば、「リンク挿入」があります。
別ウィンドウが出てきます。
「参照」ボタンでどのページをリンクしたいのか設定。
一番下に「ターゲット」があります。
このターゲットで別ウィンドウを開くのか、フレーム使用で右側に開くのかなどを設定します。

右クリック→リン...続きを読む

QHPビルダーで中央表示がしたいのですが・・。 

HPビルダーで中央表示がしたいのですが・・。 
どこでも配置を使って作ったHPが、左端がブラウザに固定の表示になってしまいました。
常に開いたブラウザの中央に表示されるようにするにはどうしたらいいのでしょうか。

Aベストアンサー

>http://www-06.ibm.com/jp/domino01/swhc/esupport.nsf/all/hpb1037

IBMのサイトを参考にしてください。

標準モードで「表の挿入」で「表」を使って、表の一番外枠を選択状態で「書式(O)」「位置揃え(A)」「中央揃え(E)」で表が中央に来ます。

または、普通の「文字の中央」をクリックでもOKです。

どのサイズのディスプレイでも中央表示となります。

どこでもモードでは不可です、標準モードで作成です。

表の列や行は後からいくらでも追加や削除が出来ますので、文字列の配置や画像の挿入位置などレイアウトを考えて、列や行を作りましょう。

またセルの結合や分割もできますので、自由な画面のレイアウトが可能です。

表の外枠を選択状態で「編集(E)」「属性の変更(A)」で表やセルの寸法を決めたり枠表示を消したり、枠に色をつけたりも出来ます。


人気Q&Aランキング

おすすめ情報