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

Question

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

abril · Accepted Answer

> 「外部にスタイルシートを作る」ということを学びましたが、「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

abril · Answer

簡略図を見て、どの様な「レイアウト」を希望されているのかはわかりました。しかし、 > せめて、この部分だけを固定できれば、ページが増えていっても、記事を書くだけで済むのですが…。今は、例えばメニューの１つを変えたら、何十ページもメニューだけを書き直さなければなりません。 > 他のサイトでは、固定divで外部シートにしておられるようなので、そういうことがオートマチックにできないかと思い、質問させて頂きました。上記を読む限り、CSSと他の技術の役目をちょっと混同されたまま捉えられている様に感じられました。まず、何度も「固定」という言葉を使用されていますが、この「固定」の意味がレイアウトとしての位置を固定する、という事であれば、それは装飾（スタイル）に関する調整ですのでCSSの制御領域となります。「divでheadやmanuなどを作ってはみたものの、「manuを右側に固定する」ことがうまくできず」と仰っているところを読むと、意図しておられるのは確かにCSSに関する問題だと思われました。ですが一方で「例えばメニューの１つを変えたら、何十ページもメニューだけを書き直さなければなりません。」「そういうことがオートマチックにできないかと思い」と仰られているのを読むと、今度は全く違う性質のものをさしている様に思われてしまうのです。こちらの場合、どちらかというとメニュー部分だけを別ファイルで管理する方法、所謂インクルード・ファイルやフレームの様なものを考えられているのでは、と受け止められます。 CSSでいう「外部シート」というのは、参照元のHTMLファイル内のマークアップに対する装飾的要素に関する指定だけを分離してhoge.cssといった様な外部ファイルのスタイルシートに一括して記述する事を言います。メニューの内容そのもの（タグとテキストもしくは"背景ではない"画像部分）はCSSには含まれません。ですから、【メニュー】の内容自体の変更は、あくまでHTMLファイルの記述変更が必要であり、CSSで制御できる事ではありません。CSSの管轄は、あくまで「スタイル」に関する事だけです。できるだけ簡単に説明します。現在、【メニュー】部分には下記のナビ項目（各ページへのリンク）だけがあるとします。

みかん

りんご

しかし、今度新しく「ぶどう」というページ（ファイル）が増える事になった。その場合、全ての対象ページの【メニュー】部分を以下の様に書き換えてやらなくてはいけない。

みかん

りんご

ぶどう

つまり、こういった内容そのものの追加・削除・編集が「外部シート」化したCSSファイルを編集すれば、全てのHTMLファイル側の表示も「オートマチック」に変更される、という様に考えておられませんか？という事です。もしそうだとしたら、それは認識が正しくありません。CSSで一括管理ができるのは、例えば各ナビの文字の大きさや色・背景のパターン・ボーダーのスタイル・幅・位置・余白…といった「スタイル」です。ですから、例えばナビのリンクの色が今は青になっているけど、今度は赤に変えたい、とかいう様な事であれば、それはCSSが外部ファイル化されていれば、沢山あるHTMLファイルの方は一切編集する事無く、CSSファイル内の該当するスタイルの指定部分だけを書き換えるだけで、対象となるHTMLファイルにはそのスタイル変更が一斉に反映されます。おわかり頂けたでしょうか？説明がよくわからない、あるいはこちらの認識が間違っている様であれば、補足して下さい。質問者様の抱えているトラブルの本質が双方誤解なく認識できれば、あるいはもう少々ヘルプができるかもしれませんので。

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

> 「外部にスタイルシートを作る」ということを学びましたが、「div」あたりになると、さっぱり理解できず、結局「body」や「A」などのCSSを外部にするという段階にとどまっています。

簡略図を見て、どの様な「レイアウト」を希望されているのかはわかりました。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング