今現在、ホームページビルダー9を標準で使っていますが、新しくホームページビルダー15のフルCSSプロフェッショナルテンプレートでホームページを作成したいのですが、今現在のホームページをフルCSSプロフェッショナルテンプレートにダイレクトに張り付ける方法とかあるのでしょうか?それともまた一から作り直さなければいけないのでしょうか?できれば今現在のホームページを生かした状態でフルCSSプロフェッショナルテンプレートを使って作成したいのですが。いろいろやってみたのですが、できませんでしたよろしくお願いします。
No.1
- 回答日時:
無理です。
私の仕事のもっとも大きな比重(負担)を占めるのがホームページビルダーの作成したウェブページの標準化です。
ホームページビルダーは、デザインのためにHTML自体を標準でないものに書き換えていますから、それを直す手段はありません。
古いデータはそのままにするか、全面的に書き直すしか方法はありません。基本的に、ブラウザで表示させて、それをコピーペーストすることすらできません(特にどこでも配置で作成されていた場合)。よってすべてゼロからの製作になります。
基本的に、ウェブオーサリングツール( http://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83% … )(特にホームページビルダー http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC% … )で作成されたページ(特に、HTMLやCSSをよく理解していない素人さんによって作成されたもの)は再利用はまったく不可能です。
Dreamweaverは、説明にも「HTMLやCSSの知識が必要」と書いてあるからまだしも、ホームページビルダーは「知らなくても作れる」なんて宣伝してるし、ユーザーも信じているから余計に厄介です。
現実には、どのオーサリングツールを使う場合も、というかオーサリングを使うなら余計にHTMLやCSSを知って理解しておく必要があります。そうしないと、ウェブオーサリングツールでとんでもない非標準ページを作成してしまいます。詳しくは上記リンクをご覧ください。
オーサリングツールを否定するわけではありませんが、HTMLはデザインをするものではなく、その文書の構造をマークアップするメタ言語( http://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%BF% … )です。すなわち、どれが見出しで、どの部分が引用で、どこが表、どこが目次なのかをマークアップしたものですから、内容を読み解き、最適なタグを選択する必要がありますが、それは著者か人でないとできません。オーサリングツールに頼れないし、頼られても困るでしょう。
ですから、文章を読み解きそれに最適なタグ(要素)を選ぶ作業はテキストエディタを使うにしろオーサリングツールを使うにしろ、HTMLの深い知識が必要です。私も当初は仕様書( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 … )を座右において常に参照していました。
CSSは、現時点で対応しているオーサリングツールはありません。これは無理です。プロパティはなんとか対応していますが、最も重要なカスケーディング処理には未対応ですからCSSは手で書くことになります。
具体的には、たとえば、
<body>
<div class="header">
<h1>サイト見出し</h1>
<p>これは何とかのページ</p>
<div class="nav">
<ol>
<li><a href="./index.html">サイトのトップ</a></li>
・・・・
</ol>
</div>
</div>
<div class="section">
<h1>本文見出し</h1>
<p>ほげほげ・・</p>
<div class="aside">
本文と関係ないコラム的記事
</div>
・・・
</div>
<div class="footer">
<h1>文書情報</h1>
<div class="aside">
本文と関係ないコラム的記事
</div>・・
と、文書構造にしたがって正しくマークアップされたHTMLがあったとして、(オーサリングツールでこれができないのはわかるでしょう。)それをCSSで、「本文見出しを赤フッターのh1は緑で表示したい。」「本文中のコラムだけは少し小さい字で」「フッターは一回り小さい文字」「フッター中のコラムは大きさを変えない」となると
div.section h1{color:red;}
div.footer h1{color:green;}
div.section div.aside,div.footer div.aside{font-size:0.9em;}
という簡単なものでOK、HTMLに一切手を加える必要はない。
しかも、あとでCSSを直したいときもHTMLも開かなくてよいしブラウザで確認しなくても、フッターの文字を青にしたけりゃできる。
こんな単純なことですら、オーサリングで行うことはできない。たぶん一つ一つの要素を選択してHTMLに不要なidを付与して、CSSの悠長なものになる。
基本的に、オーサリングツールを使ってWeb標準(を正しいとすれば)のページを作成しようとすると、とっても煩雑で大変な作業になります。
★結果として言えることは
既存のものはそのまま放って置くこと。
すくなくともHTMLとCSSはオーサリングツールに頼らない、頼るならきちんとHTMLやCSSの知識を身に付けること。
それができなければ、あえてウェブ標準(フルCSS)に惑わされず、非標準なものを作り続ける
オーサリングツールの問題点 ( http://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83% … )
ホームページビルダー「作成したウェブサイトの影響 」( http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC% …
ホームページビルダー「CSSへの対応」 http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC% … )
これはウェブ標準のウェブページを作成するときの話です。あなたが「フルCSS」をウェブ標準のために考えられているなら、厳しいですが、このアドバイスでよいでしょう。
そうでないなら、フルCSSにこだわる必要はありません。
ウェブ標準とは何かは、下記のリンク先周辺をしっかりお読みください。
【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
【引用】____________ここから
Webページのプレゼンテーションを向上させようという志は素晴らしいものではあったが、そのためのテクニックには思わぬ副産物があった。こうしたテクニックは、特定の人々、特定の時代状況でしか成り立たず、すべての人々、すべての時代状況において成り立つものではないのだ。こうしたテクニックの例を挙げよう。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
No.2ベストアンサー
- 回答日時:
リンクがきちんと読み込まれていないようですね。
5 作成したウェブサイトの影響 ( http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC% … )
ならよいかな?
私の周囲のプロでホームページビルダーを使ってウェブページを桜精している人はいません。持っていたとしても、ビルダーで作成したページを裸にしてしまうためか、画像などを作るためです。専用ソフトのほうがよいですが、コスト的に安いので。
大事なことは、HTMLを正しく作成することです。これはオーサリングツールすべてにいえることですが、文章を読み解き、内容を理解して、最適な要素名(タグ)を選択してマークアップすること・・・これだけは何を使おうと著者か、読解力のある人でないとできません。
それさえしっかりできていれば、スタイルシートでどのようにもデザインできます。
【引用】____________ここから
HTMLは、常に構造的マーク付けを規定するところのSGMLをルーツに持っている。HTMLの性質上、プレゼンテーションに関する要素や属性は、次々と他の機構、とりわけスタイルシートに置換えられていく。 また、文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
は、「文書の構造さえきちんとマークアップされていれば、様々にデザインできる」という意味です。
残念ながら、将来にわたってスタイルシートに対応できるツールはできないでしょう。原理的に無理な話です。
私は、スタイルシートを書くときには
・Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
・The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )
も通過して、HTMLは完成していますから、HTMLを見なくてスタイルシートが書けます。
たとえば
div.section div.article{font-size:0.9em;border:solid gray 1px;}
div.section div.article.note strong{color:red;}
は
「本文中の関連記事は灰色線で囲み、文字サイズを0.9で」
「本文中の関連記事(article)、かつnote(注意書き)内の強調文字列は赤くしよう」
とか・・、こんな単純なことすら、ツールではできるはずもないですね。
ましてや、HTMLに手をくわえないで(加えてはならないし)
・3カラムでデザインしていたものを2カラムにしよう
・i-phone用に狭い画面でも表示できるスタイルを作ろう
・印刷用に章番号をつけよう
などは不可能です。
だからプロは決して使わない・・
今までのものはそのまま、今後もフルCSSにしても、あまり手を加えずにそのままテンプレートに流し込むほうがよいでしょう。下手に手を加えると悲劇的になります。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS サイトをマルチデバイス対応にする為の準備や、CSSなどのおすすめサンプル集やアドバイスを頂きたいです 1 2022/07/13 22:15
- ホームページ作成・プログラミング web制作(HP作成について教えてください) 閲覧ありがとうございます。 今、WEB制作の勉強をして 2 2023/04/13 07:23
- ホームページ作成・プログラミング 友人のホームページを引き継ぐには 2 2023/06/13 15:23
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
- PowerPoint(パワーポイント) パワーポイントで、シートをコピーしたときにテンプレートを強制適用する方法 1 2022/05/26 22:41
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS ホームページについての質問です 最近学校でhtml等に触れる機会があったのですが、疑問がわきました 7 2022/05/06 15:42
- ホームページ作成・プログラミング ホームページ作成について。「ワードプレスではありません」。 3 2023/08/13 14:44
- その他(IT・Webサービス) ホームページが更新されない 2 2023/07/12 09:59
- Web・クリエイティブ 独学でwebデザイナーを目指すには 2 2022/09/17 16:27
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
min-heightとheightの違いについて
-
掲示板もtableを使わず作った方...
-
複数のボタンを等間隔に、かつ...
-
1時間30分を簡単に表したいで...
-
RMS レフトナビ問題
-
html の divとtable の役割
-
<DIV> と </DIV> の間が空です。
-
<div id="container">の使いか...
-
特定範囲内のCSSの継承を断ち切...
-
divを追加すると下に隠れてしまう
-
htmlの見出しタグ(<h1>)の次...
-
セクションをdivで囲むと見出し...
-
文字の下線を画像に変えて表示...
-
見出しタグのつけ方について
-
疑似インラインフレームの文字...
-
IE・NNの独自タグについて
-
スペースを使わず文字位置を揃...
-
CSSで画像を下に配置
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
div要素が重なってします
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
divとpの使いわけ
-
ヘッダーとフッターだけ背景を...
-
min-heightとheightの違いについて
-
セクションをdivで囲むと見出し...
-
画面を縮小するとカラムが落ち...
-
ヘッダーを左右に二分割する方...
-
1時間30分を簡単に表したいで...
-
スペースを使わず文字位置を揃...
-
CSSで、contentsがfooterに重な...
-
h1に自分自身へのリンクを張...
-
divの中に外部のHTMLを埋め込む
-
divを横に並べる方法
-
hタグの右横に画像を表示
-
h1のテキストサイズよりh2の方...
おすすめ情報