ホームページビルダー１９SPで作ったものをHTMLではつくるにはどうしたらいいのでしょうか？

締切済

質問者：輝3
質問日時：2015/02/25 22:47
回答数：2件

ほぼ初心者です。
ホームページビルダー１９、SPで作ったらほぼ自分の好みに近い形、内容のものができましたが、今まで作ったサイトはなぜか比較的上位に上がってます。ですので、それまでに作ったクラシックのように作れたらと考えていますが、互換性がないので困っています。
どうしたら良いのかお教え下さい。
よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： ORUKA1951
回答日時：2015/02/28 15:33

＞ホームページビルダー１９、SPで作ったらほぼ自分の好みに近い形、内容のものができましたが、

「ほぼ」と言うより、相当な初心者、それも間違った沢道に迷い込んでいる。このままだと本堂に戻るのが大変になるので、早めに直しましょう。
　以下、参照すべきリンク先を併記して詳しく説明しますから、リンク先も読んでおくこと。

　HTMLは、デザインツールではありません。
2.4.1 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
【最も重要な基礎知識】
　HTMLは、その文書を構成する要素(Element)に分解し、それぞれの要素をタグを用いて、どんな要素であるかを示すマークアップ言語です。

<body><!-- ここから本文(body)-- >
<h1>ここはこの文書の最上位の見だし(heading)</h1>
<p>ここから一つの段落(Pargraph)であり<q>ここは引用(quote)語句</q>です。</p>

とね。もっぱら文書の構造を示していくのがHTMLです。HTML4(XHTML1.1)以前は、文書の意味を示す要素が不足していたため、『id属性及び class属性と併用することで、文書に構造を付加( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』しなければなりませんでした。★デザインのためにDIVやSPANを使うのじゃない★
　その反省から、HTML5では、『文書をよりよく構造化するために( http://standards.mitsue.co.jp/resources/w3c/TR/h … )』新しい要素が追加されました。
　これについては、
HTML5“とか”アプリ開発入門（1）：Webの3つの問題を解決する「HTML5」とは何なのか (2/2) - ＠IT( http://www.atmarkit.co.jp/ait/articles/1008/30/n … )
　の中ほどの「【問題2】文書内に埋め込まれた「意味」が不明確」も読むこと!!

　それによって、検索エンジンはそのページの内容を正確に把握できるようになります。これこそがSEO 検索エンジン最適化(Search Engine Optimization)の本来の意味であり、目的なのです。それによって検索結果に反映されるのは、結果であって、決して検索順位を上げるための手順が目的ではありません。

　デザインは、文書構造さえ適切にマークアップされていれば、自在に、そして効果的にできますから、シンプルなHTMLとあいまってメンテナンス性も向上します。副次的に検索結果にも反映される。

　これらの基本を知らずしてオーサリングツール--特にビルダーのような最悪なツールを使用すると、このウェブ標準に反したものができてしまいます。 https://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC …
　HTMLを知らなくても良いページができるなんてありえないのですょ。良心的なオーサリングツールは、HTMLやCSSを知らなければ扱えないと言っている。

[基本]デザインためにHTMLは作らない。
　まず、ページ全体を平のテキストで書いていきます。
　ついで、その文書を読み解いて要素に分解し、それぞれの要素を示すタグでマークアップする。
　示しきれないときはclass名を併用してDIVやSPAN要素を使う
[デザインする]
　シンプルなページができるはずです。そのページはブラウザの持つデフォルトのスタイルシートで装飾されているはずです。
　それぞれの要素をセレクタを使って指定してスタイルシートでデザインして行きます。

　こうなると、反ってビルダーは極めて扱い難いツールになってしまいます。文章を読んで、要素に分解して、それに最適なタグを選択するなんて作業はツールにはできません。著者であるあなたにしかできない。
　デザインを適用したい要素を、セレクタを駆使して特定する作業は、どんなオーサリングツールでも不可能でしょう。
　例えば、div.secton div.section+div.section p{color:blue;}とは、section(主題)中の主題に続く(;)主題中の段落の・・・・・・文字色は青・・なんて、セレクタの書き方を知らないとツールは手助けしてくれない。
5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

　⇒HTMLエディタで作成するシンプルなコードは検索エンジン最適化にも効果的であることから、一部のウェブデザイナーには見直されつつあり( https://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83 … )

実例のサンプル
ナビゲーションリストを様々にデザインしてみよう。( http://ichiya.com/WebService/Howto/sample/HTML/n … )
のページに行って、ページの右クリックからHTMLソースを見るとビルダーが作ったものと一目で違いがわかるシンプルな物で、記事の追加やメンテナンスが容易なこと、検索エンジンが内容を把握しやすいことが分かるでしょう。
　ついで、ブラウザ--chromeを除く)の[表示]メニューからスタイル(シート)を選択して、色々用意されているスタイルシートを選択してみましょう。また[ファイル]メニューから印刷プレビューも確認してみましょう。HTMLに文書構造しか書かれていないから、「自分の好みに近い形」ではなく「自分好みのデザイン」に自在にできるのですよ。デザイン変えたければスタイルシートだけ書き直せばよいし、携帯電話やスマホに対応させたければ、そのスタイルシートだけ書けば良い。

　あなたが最初にテキストエディタから入られたのだったら方法を変えるのは簡単なのですが、もしビルダーから始められたら大変な苦労をされることになるでしょう。なぜならビルダーは、本来のウェブとは逆のアプローチで作られたツールなのですから。