ホームページビルダーでの外部CSS

このQ&Aのポイント
  • ホームページ作成の際に外部CSSを使用する方法をご紹介します。レイアウトの段階で迷ってしまう方にもわかりやすい解説です。
  • ホームページビルダー付属のスタイルシートではデザインが合わない場合、外部CSSを使用することでレイアウトを固定することができます。
  • 外部CSSを使用することで、ホームページのデザインを自由にカスタマイズできます。特定の要素にCSSを適用する方法をお伝えします。
回答を見る
  • ベストアンサー

ホームページビルダーでの外部CSS

ホームページ作成しています。 ど素人なりに頑張っていますが、内容が増えていくにつれ、だんだん動作が遅くなってきました。 そこで、最近「外部にスタイルシートを作る」ということを学びましたが、「div」あたりになると、さっぱり理解できず、結局「body」や「A」などのCSSを外部にするという段階にとどまっています。 もうすでに、レイアウトやデザインは決まっているので、今ある「manu」や「head」などを外部CSSに固定すれば、あとは記事を書くだけでページが作れると思うのですが…。 CSSのサイトはいろいろ拝見したのですが、レイアウトの段階になると、途中でわからなくなってしまいます。 ホームページビルダー付属のスタイルシートでは、デザインが合いません。そこで、素人にもわかりやすい、レイアウト枠としての外部CSS作成法をご指導ください。また、そのようなフリースタイルシートのソースなどがあればご紹介ください。 とにかく、外部CSSで、レイアウトを固定したいのです。 よろしくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • abril
  • ベストアンサー率69% (388/560)
回答No.1

> 「外部にスタイルシートを作る」ということを学びましたが、「div」あたりになると、さっぱり理解できず、結局「body」や「A」などのCSSを外部にするという段階にとどまっています。 ということは既に外部スタイルシートを参照する方法は取り入れられているのですね? で、bodyやaタグに関するスタイルだけそちらに設定して、divでマークアップしている部分のスタイルはHTMLファイル内のhead内に直接styleタグで記述しているということですか?それとも各divタグにstyle属性で直接記述している、という事ですか? > もうすでに、レイアウトやデザインは決まっているので、今ある「manu」や「head」などを外部CSSに固定すれば、あとは記事を書くだけでページが作れると思うのですが…。 ??正直申し上げて状況がよく飲み込めないのですが… ここで仰っている「今ある「manu」や「head」」というのは、HTMLファイル内の当該箇所のタグ(おそらくdiv?)に対してclass属性もしくはid属性で指定してあるのですか?それらを「外部CSSに固定」するとはどういう意味ですか?HTML側のマークアップだけできているけれど、実際それらのclassやidに対応するスタイルの設定はできていないから、これからその内容を外部スタイルシートに記述して行きたい、という事ですか? > CSSのサイトはいろいろ拝見したのですが、レイアウトの段階になると、途中でわからなくなってしまいます。 わからない、というのは何がわからないのでしょう?少なくとも現段階ではbodyやaに対するスタイル設定はでき、それらのプロパティやセレクタの意味も理解されてらっしゃるわけですよね?であれば、適用するタグがdivであろうと何であろうと同じ事です。そのマークアップされたブロックに対して適用可能な各プロパティの性質や意味、又はセレクタに関するシンタックス(文法)を理解する、というのがまずCSSレイアウトの第一段階です。HTML文書の作成の仕方を学ぶ時と何ら本質的な違いはありません。 ですから、そういうものを一足飛びにした、「レイアウト枠としての外部CSS作成法」というものはありません。上記の様な理屈を学び実践を積めば自ずと作成はできる様になるからです。 その段階をすっ飛ばしたいのであれば、残念ですが「ホームページビルダー付属のスタイルシート」を使用して下さい。「デザインが合いません」と仰られても、自分のイメージしたデザイン通りに自由にCSSでレイアウトをしたいのであれば、地道に基礎を習得しなければモノにはなりません。これは素人さんであろうがプロであろうが関係のない事です(勿論プロはそこを疎かにする事など許されませんが)。 > フリースタイルシートのソースなどがあればご紹介ください。 テンプレートだけ拝借しても、何故そのテンプレートではその様なレイアウトが実現できているのか、という「理屈」が理解できなければ所詮それで終わり、カスタマイズもままならず(挙げ句の果てはあちこちから拾ってきた断片的な知識を見よう見まねで適用してぐちゃぐちゃに…それで泣きついてくる質問者様の何と多い事か…)壁にぶち当たるのが関の山です。 ”基礎を習得してから”なら、有用なテンプレートやtipsを提供されているサイトのご紹介もできますが… カテゴリは異なりますが、過去似た様な性質の問題を抱えられた質問者様のスレッドがありますので、参考までに。 http://oshiete1.goo.ne.jp/qa4185652.html

kiraraai
質問者

お礼

返事が大変遅くなって申し訳ありませんでした。 >挙げ句の果てはあちこちから拾ってきた断片的な知識を見よう見まねで適用してぐちゃぐちゃに…それで泣きついてくる質問者様の何と多い事か… まさにその通りです。…なのに、ご丁寧にかみくだいてご回答くださいまして、本当にありがとうございます。何度も何度も、読み返しました。 >bodyやaタグに関するスタイルだけそちらに設定して、divでマークアップしている部分のスタイルはHTMLファイル内のhead内に直接styleタグで記述しているということですか?それとも各divタグにstyle属性で直接記述している、という事ですか? divでheadやmanuなどを作ってはみたものの、「manuを右側に固定する」ことがうまくできず、今はmanuなどdivにせず、直接スタイルシートでTDにしています。 -------------------------------------------------- 【ヘッダー】  ロゴ ナビ1 ナビ2 ナビ3 ナビ4 ナビ5… --------------------------------------------------                   【メニュー】                    ・ナビ1                    ・ナビ2                    ・                    ・ せめて、この部分だけを固定できれば、ページが増えていっても、記事を書くだけで済むのですが…。今は、例えばメニューの1つを変えたら、何十ページもメニューだけを書き直さなければなりません。 他のサイトでは、固定divで外部シートにしておられるようなので、そういうことがオートマチックにできないかと思い、質問させて頂きました。 確かにどのサイト様も「地道に学ぶしかない」と書いてあります。その通りだと思います。ただ、「せめてこの部分だけ…」というものが決まってたので、こちらで何か打開策が見いだせないか…と思った次第です。 ありがとうございました。

その他の回答 (1)

  • abril
  • ベストアンサー率69% (388/560)
回答No.2

簡略図を見て、どの様な「レイアウト」を希望されているのかはわかりました。 しかし、 > せめて、この部分だけを固定できれば、ページが増えていっても、記事を書くだけで済むのですが…。今は、例えばメニューの1つを変えたら、何十ページもメニューだけを書き直さなければなりません。 > 他のサイトでは、固定divで外部シートにしておられるようなので、そういうことがオートマチックにできないかと思い、質問させて頂きました。 上記を読む限り、CSSと他の技術の役目をちょっと混同されたまま捉えられている様に感じられました。まず、何度も「固定」という言葉を使用されていますが、この「固定」の意味がレイアウトとしての位置を固定する、という事であれば、それは装飾(スタイル)に関する調整ですのでCSSの制御領域となります。「divでheadやmanuなどを作ってはみたものの、「manuを右側に固定する」ことがうまくできず」と仰っているところを読むと、意図しておられるのは確かにCSSに関する問題だと思われました。 ですが一方で「例えばメニューの1つを変えたら、何十ページもメニューだけを書き直さなければなりません。」「そういうことがオートマチックにできないかと思い」と仰られているのを読むと、今度は全く違う性質のものをさしている様に思われてしまうのです。こちらの場合、どちらかというとメニュー部分だけを別ファイルで管理する方法、所謂インクルード・ファイルやフレームの様なものを考えられているのでは、と受け止められます。 CSSでいう「外部シート」というのは、参照元のHTMLファイル内のマークアップに対する装飾的要素に関する指定だけを分離してhoge.cssといった様な外部ファイルのスタイルシートに一括して記述する事を言います。メニューの内容そのもの(タグとテキストもしくは"背景ではない"画像部分)はCSSには含まれません。ですから、【メニュー】の内容自体の変更は、あくまでHTMLファイルの記述変更が必要であり、CSSで制御できる事ではありません。CSSの管轄は、あくまで「スタイル」に関する事だけです。 できるだけ簡単に説明します。 現在、【メニュー】部分には下記のナビ項目(各ページへのリンク)だけがあるとします。 <ul> <li><a href="mikan.html">みかん</li> <li><a href="ringo.html">りんご</li> </ul> しかし、今度新しく「ぶどう」というページ(ファイル)が増える事になった。その場合、全ての対象ページの【メニュー】部分を以下の様に書き換えてやらなくてはいけない。 <ul> <li><a href="mikan.html">みかん</li> <li><a href="ringo.html">りんご</li> <li><a href="budo.html">ぶどう</li> </ul> つまり、こういった内容そのものの追加・削除・編集が「外部シート」化したCSSファイルを編集すれば、全てのHTMLファイル側の表示も「オートマチック」に変更される、という様に考えておられませんか?という事です。 もしそうだとしたら、それは認識が正しくありません。CSSで一括管理ができるのは、例えば各ナビの文字の大きさや色・背景のパターン・ボーダーのスタイル・幅・位置・余白…といった「スタイル」です。ですから、例えばナビのリンクの色が今は青になっているけど、今度は赤に変えたい、とかいう様な事であれば、それはCSSが外部ファイル化されていれば、沢山あるHTMLファイルの方は一切編集する事無く、CSSファイル内の該当するスタイルの指定部分だけを書き換えるだけで、対象となるHTMLファイルにはそのスタイル変更が一斉に反映されます。 おわかり頂けたでしょうか? 説明がよくわからない、あるいはこちらの認識が間違っている様であれば、補足して下さい。質問者様の抱えているトラブルの本質が双方誤解なく認識できれば、あるいはもう少々ヘルプができるかもしれませんので。

kiraraai
質問者

お礼

お礼が遅くなってしまい、大変申し訳ありませんでした。 ご丁寧に回答していただき、こんな不勉強な私に時間を割いていただきましたこと、大変恐縮すると同時に、とてもよく分かる内容で、やっと目の前の霧が晴れたような気がいたしました。ありがとうございました! 確かに、その通りです!外部CSSと、別ファイルで管理する方法を、混同しておりました。そう理解すると、すべてに辻褄が合い、なるほど私の知識のなさを痛感いたしました。 「manuを右側に固定する」ことがうまくできなかったのは、幅だけの問題で、途中でやめてしまったので、もっとチャレンジします。 それから、さっそく「インクルード・ファイル」「フレーム」などを調べてみたいと思います。 本当に参考になりました!ありがとうございました!

関連するQ&A

  • ホームページビルダー11 CSSの画像ファイルを何度も保存

    ホームページビルダー11でホームページを作っています。 外部スタイルシート(.css)で一部レイアウトやデザインを行っているのですが、その中の画像ファイルを、htmlファイルを保存するたびに保存しようと確認してきます。 そのたびにいちいち「保存場所にファイルをコピーする」のチェックをはずしています。 これがとても面倒です。 外部スタイルシートの画像の保存確認をしないような設定は出来ませんか?

  • 外部CSSからクラスを呼び出すとき

    CSSスタイルシート初心者です。 ネットショップを運営しているのですが、ほぼ同じレイアウトの商品紹介ページが多数あるため、外部CSSファイルを読み込ませて統一したいと思っています。 H1などのHTMLタグはちゃんと外部ファイルで設定して読み込ませることができるのですが・・・、 .text01{ text-align : left; margin-left : 10px; font-size : 14px; } 上記のように自分が作ったクラスをHTMLソースの中でどのように呼び出してよいのかいまいちわかりません。 本を読んでいると埋め込み方は、<div class="text01">・・・</div>のような感じで<div>でくくって記述するように書いてあるのですが、外部CSSの場合もこのような形で記述してよいのでしょうか? ホームページビルダーを使っていて、上記のように指定すると、CSSがテキストに適用はされるのですが、なぜか上記で表示した部分が赤色でエラーになっていることを示してしまいます。 何か文法的に誤っている所があるのでしょうか? どなたか是非アドバイスを宜しくお願い致します。

  • ホームページビルダーでcssレイアウトは可能ですか?

    Web制作初心者です。 Htmlのtableでトップページ全体をレイアウトすると、読み込みが遅くなるそうですが、ホームページビルダー9を使っているため、レイアウトを作るのは簡単にすみ、いままでtableで作成してきました。 今度、新たにサイトを作るのですが、cssでレイアウトを作りたいと思います。そこで、ホームページビルダー9はcssでtableのようなレイアウトを作ることは可能なのでしょうか? tableの場合は、「表の挿入」を選んで、「行の追加」や「列の追加」、「選択セルの結合」とかでどんどん表を作っていって、セルに画像追加や文字を書いていました。 こういうのはcssでは(ホームページビルダー上では)どのようにするのでしょうか? あと、tableを作って、その下にもtableを追加していくと、ページをプレビューした場合、下のほうに行くにつれてそれぞれの表がズレていきます。cssではズレないようにできるのでしょうか?

  • ホームページビルダーの編集画面で外部CSSの設定が反映されない

    フォントサイズや各種デザインなどを外部CSSファイルとして作成しましたが、 ホームページビルダー12の編集画面では、デザイン関連は反映されていますが、フォントサイズが反映されません。 しかし、ホームページビルダー12のプレビュー画面にすると、フォントサイズも正しく反映されるようです。 なぜ、編集画面ではCSSファイルで定義したフォントサイズが反映されないのでしょうか。 なお、通常のブラウザ(IE&Firefox)でもCSSファイルが正しく認識されて、フォントサイズも反映されています。

    • ベストアンサー
    • HTML
  • ビルダー12 CSSファイルの関連付けについて

    こんにちは。 現在、ホームページビルダー12でサイトを作成しています。 外部スタイルシートを使って複数のHTMLを管理しているのですが、スタイルシートを編集する際、スタイルシートマネージャを使わずにCSSファイルをテキストエディタで開いています。 ビルダー上でCSSファイルを右クリックし、『テキストエディタで開く』を選択しているのですが、これで開くと必ずWindowsのメモ帳で開かれてしまいます。 私はテキストエディタにTerapadを使用しているのですが、なんとかこれでCSSファイルを開く方法はないでしょうか? Windowsの既定のプログラムでCSSファイルをTerapadで開くように関連づけても、ビルダーではメモ帳で開かれてしまいます。 おそらくはビルダーの方で設定する必要があるのだと思いますが、オプション等をみても項目が見当たりません。 ご存知の方、いらっしゃいましたら教えて下さい。お願いします。

  • ホームページビルダーでCSS使用サイトを修正したい

    知人に作成してもらったウェブサイト(スタイルシートCSS使用)を修正したいので、 ホームページビルダー12を使って自力で修正してみました。 ところが、修正したHTMLファイルを見ると、行間がかなり狭くなって表示されてしまいます。 ホームページビルダーを使うと、スタイルシートの設定が正しく反映されないのでしょうか? 何か解決策はないものでしょうか? それとも、ホームページビルダーを使う限りは、この現象を解決するのは無理なのでしょうか? OSは Windows 7、ブラウザは Google Chrome を使用しています。 アドバイスのほどよろしくお願いします。

  • ホームページビルダーV9でのCSS対応

    ホームページの制作を請け負うことになりました。 私自身はタグを直接編集して作成しています。 普段はHTMLとCSSを組み合わせて、レイアウトにはテーブルを使わずに制作しています。 今回のクライアントは、サイトオープン後の更新をホームページビルダーV9を使って自分で作業したいと要望しています。 そこで、ホームページビルダーのサイトを確認したところ、「CSS Level1をサポート(一部を除く)/ CSS Level2をサポート(一部)」と書いてありました。 テーブルレイアウトをせずに、構造はHTML、属性はCSSという作り方をした時に、ホームページビルダー上で適切に表示されるかどうかが心配です。 体験版で試してみようと思いましたが、Mac対応していないようなのであきらめました。 ホームページビルダーで対応している/していないCSSについてご存知の方、どうぞよろしくお願いします。

  • ホームページビルダーV9を使いながらHTML・CSSを覚えたい

    ホームページビルダーでHPを作成しています。基本的なところまでは、HTML・CSSの知識が無い私でも出来るのですが、思い通りにレイアウト出来なかったり任意の場所にバナーを貼れなかったりとかなり行き詰っています。 HP作成ソフトを使わず、サンプルを作りながら学習していく類のテキストは見かけますが、ホームページビルダーを基本にHTML・CSSを覚えていく様なテキストはないでしょうか? あれば是非教えて下さい。

  • Homepage managerでcssテンプレートは使えますか。

    Homepage managerでcssテンプレートは使えますか。 レイアウト用にcssのテンプレートを使ってみようと思い、他のサイトからダウロードしたのですが、Homepage managerでとりこんで使うことができるのでしょうか。スタイルシートファイルエディタを使うのかと思ったのですが、やり方がまったくわかりません。 また、css自体よくわかっていないのですが、このレイアウトの中に細かい表などを作成していくことも可能なのでしょうか。 ご教授よろしくお願い致します。

  • ホームページビルダー8でスタイルシートができますか

    ホームページビルダー8でサイトを作っています。HTMLはほとんどわかりません。 今まで「どこでもモード」で2種類作りましたが、「標準モード」で作るべきだという事を知り、今後は表(テーブル)を使って「標準モード」で作成しようと思っていた矢先、最近の傾向として表を使うのではなく、CSS(スタイルシート)を使うようになってきている、との情報を目にするようになりました。 質問(1) ホームページビルダー8の解説本の目次、索引にはCSSやスタイルシートの項目は載っていませんが、これはバージョン8よりも後のビルダーならできるるのでしょうか? 質問(2) ホームページビルダー8でサイトを制作している者が、CSSでページの構成を作りたい場合、まずどうすればよいでしょうか? (CSSはhtmlで書いてサイトを作成する方法と共に可能なもので、ビルダーと共に使うのは出来ないのでしょうか?)

専門家に質問してみよう