- ベストアンサー
ホームページビルダーで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 という言葉を調べるためにコピーしたものを うっかりそのままペーストして気づかずに、お礼の投稿をしてしまいました…。 遅ればせながら、お詫びいたします。
お礼
ORUKA1951さん、アドバイスありがとうございます。 どうも私の質問の仕方がわかりにくかったようです。 私はスタイルシートを編集（修正）したいのではなく、 ＨＴＭＬファイルのテキスト（文章）や画像を編集（修正）したいのです。 つまり、知人が作成してくれたスタイルシートをそのまま使用して、 不要な文章を削除して新規の文章を加筆したり、 不要な画像を削除して新規の画像を挿入したりする作業を ホームページビルダーでやってみたわけです。 しかし、修正後のＨＴＭＬファイルをホームページビルダーのプレビュー画面で 確認したところ、もとのＨＴＭＬファイルの文章よりも行間が狭くなっていたので、 どうして行間が狭く表示されるのかわからなかったのです。