- ベストアンサー
ホームページビルダーでCSS使用サイトを修正したい
知人に作成してもらったウェブサイト（スタイルシートCSS使用）を修正したいので、 ホームページビルダー１２を使って自力で修正してみました。 ところが、修正したHTMLファイルを見ると、行間がかなり狭くなって表示されてしまいます。 ホームページビルダーを使うと、スタイルシートの設定が正しく反映されないのでしょうか？ 何か解決策はないものでしょうか？ それとも、ホームページビルダーを使う限りは、この現象を解決するのは無理なのでしょうか？ OSは Windows 7、ブラウザは Google Chrome を使用しています。 アドバイスのほどよろしくお願いします。
- pr-planner
- お礼率60% (3/5)
- ホームページ作成ソフト
- 回答数5
- ありがとう数3
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
どのようなオーサリングツールを使おうと、テンプレートなり誰かが作成したページなりを修正しようとすると、HTML,CSSの知識が絶対に必要です。 オーサリングツールを使えばHTMLやCSSの知識がなくてもというのは、ある意味誇大広告です。実情はまったく逆で、テキストエディタで作成する人以上に、HTMLやCSSの知識が必要になる上に、オーサリングツールの使い方まで知っていなくてはなりません。なぜなら、この様なツールが書き出すHTML/CSSは人の手で修正するには酷いものだからです。 多分、素のテキストに戻してゼロから作り直すほうが早いです。 私は、オーサリングツール--特にビルダーで作成されたページをウェブ標準のものに書き直す仕事が多いのですが、時間と労力から、テキストや画像を利用するだけでゼロから書き直す方法を選択します。HTMLもCSSも数分の一以下になりますし、後からのメンテナンスもとても楽になります。 なぜなら、HTMLもCSSも人が書くのに適したように考案されたフォーマットですから・・ そのまま妥協して利用されることをお勧めします。その間にHTMLやCSSを勉強しましょう。多分、想像以上に簡単なことに気がつきます。私が指導したある子は一ヵ月後には自分で作成していました。
その他の回答 (4)
- 鎌田 裕二（@yu2kama）
- ベストアンサー率62% (41/66)
ホームページビルダーがCSSに本格対応したのは確かバージョン１５から。 最新版（１７）の体験版を試されてはいかがでしょうか？
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞どうも私の質問の仕方がわかりにくかったようです。 いいえ、よくわかっています。 「ＨＴＭＬファイルのテキスト（文章）や画像を編集（修正）したいのです。」 はHTMLの該当部分を修正加筆するのです。 しかし、それをどのようにプレゼンテーションするか---行間を変更するとか---は、もっぱらスタイルシートの役目です。したがって、「もとのＨＴＭＬファイルの文章よりも行間が狭くなっていた」らスタイルシートを変更するのです。 そのときに「どの部分(要素)」かを指定するのがセレクタ(選択手段)で、行間などのプロパティに値を入れます。 たとえば、 div.section p{line-height:1.6em;} は、sectionのclassに属するDIV(汎用ブロック)内の(半角スペース)、p(段落)について、行間を1.6em--大文字のMの1.6倍にしろと言う意味です。 テキストエディタでHTMLが作成されている場合は、class名などはこのように文書構造を示す適切なものを使うのでわかりやすいのですが・・・HTMLを知らない人は、想像もつかないclass名になっていたり、一つ一つの要素に軒並みidを振ったりしていて、スタイルシートでどのように指定したらよいかがわかりづらいのです。 また、この様な子孫セレクタなどを組み合わせてセレクタを書くことはビルダーには出来ませんから、ビルダーを使うときも人がHTMLを読み取って手作業になります。 (ビルダーを使おうと使うまいと、HTMLを知っている人が書いたHTMLとそうでない人のHTMLの差が出てくることになります。) 『ホームページビルダーを使うと、スタイルシートの設定が正しく反映されないのでしょうか？』 そんなことはありません。どこに対して指定するのかさえ把握できていれば、それを直して、スタイルが反映するようにしてくださいとしか言えないのです。 [例] <body> ・・・【中略】・・・ <div class="section"> <h2>本文見出し</h2> <div class="section"> <h3>項見出し</h3> <p>段落</p><!-- 行高さ1.4em --> <p>この段落</p><!-- ここだけを変更したい --> <p>段落</p><!-- ここは元に戻す --> ですと、 div.section div.section p{line-height:1.4em;} div.section div.section p+p{line-height:1.6em;} div.section div.section p+p+p{line-height:1.4em;} です。ビルダーで【HTMLを知らない人が】作成したHTMLは、とてもこのようになっていませんから、大変苦労するでしょうね。
- saekikkt
- ベストアンサー率60% (378/622)
#2の続き CSSで行間を設定する場合は、普通は、下記のように定義されます。、 例えば、段落内の行の高さを2文字に指定する書き方 P{ line-height : 2em; } これをホームページビルダーでどうやって設定するかですが、 １．まず、添付図にようにビルダーのスタールマネージャーを立上げ ２．外部スタイルシートが使われているようなのでそれと関係づけをします。 ３．関係をつｋｒつと、例えば、段落：Ｐを選択すると右側にプロパティと値が（line-height 1em）とでも表示されるはずです。 この行間1→２に変更するには、 ４．下の「編集」のボタンをクリックします。 ５．スタイルの設定画面が出ます ６．文字の「レイアウトタブ」をクリックして「行間：２」、「予約語」を「文字の高さ」にすると2emとしてスタイルシートの段落Ｐのline-height が2emと修正されます。 以上は、一つの例です。 こういう手順で外部スタイルシートを変更していくことになりますが、このような関係を理解されることから始めないと質問にならないと思います。 回答2の方が書かれているようにホームページビルダーを通して外部スタイルシートを作成／編集するよりテキストエディターで直接、スタールシートを作成／編集する方が早い、或いは理解しやすいということにもなります。
お礼
saekikktさん、ごていねいな追加回答をありがとうございます。 No.2の回答のお礼にも書いたように、 今のところ私はスタイルシートを編集（修正）するつもりはありません。 ＨＴＭＬファイルのテキスト（文章）や画像を編集（修正）したいだけなので メモ帳を使ってＨＴＭＬソースを編集してみます。 ＣＳＳはわかりませんが、ＨＴＭＬなら多少わかるので何とかなると思います。 それにしても、知人が作成してくれたスタイルシートは修正していないのに、 ホームページビルダーのプレビュー画面でＨＴＭＬファイルを確認したときに なぜ行間が狭く表示されてしまうのかさっぱりわかりません…。 参考までに、ＣＳＳの設定は body { color:#000000; line-height:1.5; font-size:16px; background: transparent url(image/bg_body.jpg) repeat 0px 0px; } となっています。 他の部分も h1 { font-weight:bold; font-style:normal; font-size:28px; color:#ff0000; line-height:1.5; margin:0; padding:0; } のように、行間の設定は一部を除き、 line-height:1.5; となっているようです。
- saekikkt
- ベストアンサー率60% (378/622)
この質問内容では、回答は難しいですよ！ 以下は、回答ではないです。 >ホームページビルダーを使う限りは、この現象を解決するのは無理なのでしょうか？ >ホームページビルダーを使うと、スタイルシートの設定が正しく反映されないのでしょうか？ そんなことは、無いはずです。 ホームページビルダーにもCSSを使って作成する機能もありますし、CSSも含めて、ソースを直接修正することもできるのですから・・・ ただ、ＣＳＳが外部スタイルシートなのか、内部スタイルシートなのかを理解して修正していかないと混乱はすると思います。 >知人に作成してもらったウェブサイト（スタイルシートCSS使用）を修正したいので、ホームページビルダー１２を使って自力で修正してみました。 >ところが、修正したHTMLファイルを見ると、行間がかなり狭くなって表示されてしまいます。 ホームページビルダーで「行間」のＣＳＳをどのように修正されたか、によります。 行間を狭く設定してしまっていたのかもしれませんね？ ソースにどのように反映されたのか・・ この内容がないと回答は、できませんね。 ホームページビルダーは、所詮ソースを作り出すソフトです。 表示は、そのソース内容によります。 それを理解（解読）すれば、なぜ「行間」が狭くなったのかがわかると思いますが。
お礼
marginさん、早速アドバイスをいただきありがとうございます。 ＣＳＳの知識がないので、外部スタイルシートと内部スタイルシートのことも知りませんでした。 検索エンジンで調べて理解しました。 私のウェブサイトの場合、外部スタイルシートを使っているようです。 ホームページビルダーのマニュアルでＣＳＳの項目を読んで、 編集中のページにスタイルシートファイルの設定を反映させてみました。 しかし、ホームページビルダーのプレビュー画面で確認したところ、 行間が狭くなった状態は以前と同じように変わっていませんでした。 どうもよくわからないので、メモ帳でソースを直接編集しながら、 ＨＴＭＬタグがわからない部分はホームページビルダーで編集してみようと思います。
補足
saekikktさん、失礼しました！ ニックネームを「marginさん」と書いてしまいました。 ＣＳＳで使われている margin と padding という言葉を調べるためにコピーしたものを うっかりそのままペーストして気づかずに、お礼の投稿をしてしまいました…。 遅ればせながら、お詫びいたします。
関連するQ&A
- ホームページビルダー6でCSSレイアウトされたHTMLは編集可能ですか？
現在HTMLとスタイルシートでホームページを作っているのですが、 編集し終わったデータを今後お客様ご自身が ホームページビルダー6で編集していきたいとおっしゃっています。 ただ、私自身がホームページビルダー6及び ホームページビルダー自体を使用したことがないので、 HTML・CSSに分けられたデータを 実際にホームページビルダー6を使って 後々編集していただくことが可能なのか分かりません。 ご存じの方がいらっしゃいましたら宜しくお願いいたします。
- ベストアンサー
- HTML
- chromeでホームページ修正が反映されない
ホームページビルダーで作成したホームページをそのビルダーの機能を使いYahoo と Googleに登録しています。 そのHPを修正した場合、WINDOWS IE では、いずれの検索サイトとも即、修正は反映されるのですが、Google CHROME ではどちらのサイトとも反映されません。 何故でしょうか。
- 締切済み
- ホームページ作成ソフト
- ホームページビルダー14はXHTML+CSSですか？
ホームページビルダー14はXHTML+CSSですか？ バージョン8で作ったHTMLのサイトがあり、 14を購入するに当たって国際標準のXHTML+CSSを学ぼうと思います。 問題はビルダー14の標準モードではXHTML+CSSへコーディングできますか？ 使い勝ってというか・・・ パッケージは「移行も楽々」とか魅力的だったです。 この本買って来たら“いけそう”な気がしてきました。 「HTML/XHTML＆スタイルシート レッスンブック／エビスコム 著／ソシム」 サイトそのものはシンプルなもので テーブルで作っている表をCSSにしたいです。 JavaScript、Flash、Ajax、ASP.NET、PHP などは使っていません。
- ベストアンサー
- ホームページ作成ソフト
- ホームページビルダーで、スタイルシートを使用したHPを作りたいが、参考になるページ等
お世話になっております。 5年～6年くらいになりますでしょうか… ずっと、ホームページビルダー7で製作しています。 微妙と言われる事の多い、ホームページはテーブルレイアウトです。 ホームページビルダーは使用してますが、HTMLはある程度なら分かります。 今更ながらなんですが、スタイルシートを使用してホームページを製作したほうが更新が簡単とか、タグを見たときに簡素化されて見やすいなど…。 利点が多い事が判り、スタイルシートでの製作を考えています。 ホームページビルダーを使用し、尚且つスタイルシートも使用して、 ホームページ製作が出来ればベストなんですが、 なかなか思う様に出来ません。 google等で、スタイルシートについて記載してあるホームページを 探したりはしましたが、いまいち理解できません。 ここはお勧め！と言うスタイルシートに関して、 参考になるホームページがありましたら、教えていただけますと幸いです。 宜しくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- ホームページCSS設定について
はじめまして早速ですがホームページ作成についてお尋ねいたします。ホームページビルダーV6で以前からホームページを作っています。しかしHTMLだけの作成では文字のサイズや行間など設定を固定できずCSSも設定していこうと思っています。すでにビルダーなどで作成したホームページを後からCSSで固定していく手際のよい方法又はソフトなどはありますか？ご教示お願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- ビルダー12 CSSファイルの関連付けについて
こんにちは。 現在、ホームページビルダー12でサイトを作成しています。 外部スタイルシートを使って複数のHTMLを管理しているのですが、スタイルシートを編集する際、スタイルシートマネージャを使わずにCSSファイルをテキストエディタで開いています。 ビルダー上でCSSファイルを右クリックし、『テキストエディタで開く』を選択しているのですが、これで開くと必ずWindowsのメモ帳で開かれてしまいます。 私はテキストエディタにTerapadを使用しているのですが、なんとかこれでCSSファイルを開く方法はないでしょうか？ Windowsの既定のプログラムでCSSファイルをTerapadで開くように関連づけても、ビルダーではメモ帳で開かれてしまいます。 おそらくはビルダーの方で設定する必要があるのだと思いますが、オプション等をみても項目が見当たりません。 ご存知の方、いらっしゃいましたら教えて下さい。お願いします。
- ベストアンサー
- ホームページ作成ソフト
- ホームページビルダーでCSSをアップできないので困ってます。
ホームページビルダー６．５にてホームページをつくっております。今までは、ページ編集の部分に文字を打ち込んで使っていたのと、HTMLをコピー＆ペーストしてつくっていました。 今回、友人にCSSを使ったソースにてサイトをきれいにしてもらったのですが、ホームページビルダー６．５にて更新することができません。初心者でソースの表示からHTMLソースのところにコピー＆ペーストしたのですが、たぶんCSSの部分がうまく更新できずにプレビューがおかしく出ます。ちなみに友人はホームページビルダーを使ったことがないとのことで判らず、困っています。 どのようにすればホームページビルダーのHTMLソースからアップデートできるか、もしくは参照すればできそうなサイトなどありましたら教えて下さい。よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- ホームページビルダー8でスタイルシートができますか
ホームページビルダー８でサイトを作っています。HTMLはほとんどわかりません。 今まで「どこでもモード」で２種類作りましたが、「標準モード」で作るべきだという事を知り、今後は表(テーブル)を使って「標準モード」で作成しようと思っていた矢先、最近の傾向として表を使うのではなく、CSS(スタイルシート)を使うようになってきている、との情報を目にするようになりました。 質問(1) ホームページビルダー８の解説本の目次、索引にはCSSやスタイルシートの項目は載っていませんが、これはバージョン８よりも後のビルダーならできるるのでしょうか？ 質問(2) ホームページビルダー８でサイトを制作している者が、CSSでページの構成を作りたい場合、まずどうすればよいでしょうか？ (CSSはhtmlで書いてサイトを作成する方法と共に可能なもので、ビルダーと共に使うのは出来ないのでしょうか？)
- ベストアンサー
- ホームページ作成ソフト
- ホームページビルダーでの外部CSS
ホームページ作成しています。 ど素人なりに頑張っていますが、内容が増えていくにつれ、だんだん動作が遅くなってきました。 そこで、最近「外部にスタイルシートを作る」ということを学びましたが、「div」あたりになると、さっぱり理解できず、結局「body」や「A」などのCSSを外部にするという段階にとどまっています。 もうすでに、レイアウトやデザインは決まっているので、今ある「manu」や「head」などを外部CSSに固定すれば、あとは記事を書くだけでページが作れると思うのですが…。 CSSのサイトはいろいろ拝見したのですが、レイアウトの段階になると、途中でわからなくなってしまいます。 ホームページビルダー付属のスタイルシートでは、デザインが合いません。そこで、素人にもわかりやすい、レイアウト枠としての外部CSS作成法をご指導ください。また、そのようなフリースタイルシートのソースなどがあればご紹介ください。 とにかく、外部CSSで、レイアウトを固定したいのです。 よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- ホームページ・ビルダー９のCSSファイルについて
ホームページ・ビルダー９でサイトを制作しています。 編集が終わり、保存ボタンを押すと 「素材ファイルをコピーして保存」というダイアログ があらわれ、CSSファイルが保存ファイルとして あげられています。 バージョン８ではこのようなことはなく そのままHTML内にスタイルが記述され保存されます。 外部にファイルを置くのではなく、８と同じように HTML内に記述をしたのですが、どうすればいいでしょうか。 ９からそのような機能が追加されたならば 解除したいと思っています。 サイトには画像と表を入れた程度です。 素材の保存で一覧にあるのはCSSファイルのみです。 画像は画像のフォルダを指定しています。 ９のバージョンは修正パッチをあててありますので ９．０．２．０となっています。 なんでもいいので関連がありそうなものを教えてください。
- 締切済み
- ホームページ作成ソフト
お礼
ORUKA1951さん、アドバイスありがとうございます。 どうも私の質問の仕方がわかりにくかったようです。 私はスタイルシートを編集（修正）したいのではなく、 ＨＴＭＬファイルのテキスト（文章）や画像を編集（修正）したいのです。 つまり、知人が作成してくれたスタイルシートをそのまま使用して、 不要な文章を削除して新規の文章を加筆したり、 不要な画像を削除して新規の画像を挿入したりする作業を ホームページビルダーでやってみたわけです。 しかし、修正後のＨＴＭＬファイルをホームページビルダーのプレビュー画面で 確認したところ、もとのＨＴＭＬファイルの文章よりも行間が狭くなっていたので、 どうして行間が狭く表示されるのかわからなかったのです。