- ベストアンサー
CSSの外部ファイルの方法について
- CSSの外部ファイルの方法についてご指導ください
- CSSを外部ファイルにする方法が分からないので、お教えいただけますか
- index.htmlとtest.htmlに記述しているCSSを外部ファイルとして使用したいのですが、方法が分かりません
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
> 書籍は見たのですが、複数のページのcssをまとめる方法のようなものが、書いていなくて、 「複数のページのcssをまとめる」方法、という形では書いてないのかもしれませんが、外部スタイルシートの設定の仕方、は必ず出ているでしょう。 そして、 【A】複数のHTMLファイルから共通の外部スタイルシートを参照できる事 【B】一つのHTMLファイルから複数の外部スタイルシートを参照できる事 も必ず説明されている筈です。もしその質問者様がお読みになっている書籍にこういった事が一言も書かれていない、というのであればそんな不良品は参考にすべきではありません。 ＃まあ、有り得ないと思いますけど。私の手元に10年以上前に出版されたCSSの解説本もありますが、それだって勿論ちゃんと説明があります。 【A】【B】が理解できていれば、自ずとCSSファイルを複数作って適切にスタイルをまとめ、各HTMLファイルで共通のスタイルと、ある一定の条件下でのみ使用される個別のスタイルを複数のCSSファイルに分けて管理する、という考え方が生まれてくるでしょう。 ＃というか、先ずはサイト構成の段階で、全コンテンツに共通するテンプレート部分とそうではない固有のスタイル、という事を考えて設計しておくべきであり、CSSもそれに応じて種類や数を管理して作成するのが本来の順序でしょう。 > Ｗというフォルダがあります。その中にaというフォルダがあり、その中にindex.htmlがあります。 > Ｗフォルダの中にbというフォルダがあり、その中にtest.htmlがあります。 > index.htmlもtest.htmlにもそれぞれ<head>～</head>にcssの記述をしております。 では仮にこういう構造になっていると仮定します。 W ├ a │ └ index.html ├ b │ └ test.html ├ css │ ├ common.css…aにもbにも共通のスタイル部分をまとめる │ ├ a.css…a内のHTMLファイルにのみ出てくるスタイル部分をまとめる │ └ b.css…b内のHTMLファイルにのみ出てくるスタイル部分をまとめる ├ images │ ├ common │ │ ├ site_logo.gif │ │ └ header.jpg │ ├ a │ │ ├ product01.gif │ │ └ product02.gif │ ├ b │ │ ├ photo01.jpg │ │ └ photo02.jpg common.cssには、index.htmlとtest.htmlの<head>～</head>内で指定しているスタイルの内、共通のもの（ありますよね？サイト全体でコンテンツ毎のスタイルが全く統一されてないなんていうのは有り得ませんから…ベースとなる文字サイズ・文字色・背景色・行間といったスタイルや、ヘッダー・ナビ・フッター・メインなどのレイアウトを決める部分、等々）を抜き出します。 一方、a.cssにはindex.htmlに固有のスタイルの指定のみを、同じくb.cssにはtest.htmlに固有の指定のみを、それぞれまとめます。 そしたらあとはindex.htmlからはcommon.cssとa.cssを参照する、test.htmlからはcommon.cssとb.cssを参照する、という形にすれば良いだけです。 ＃なお、上記は複数のCSSファイルにわける場合の考え方のあくまで「一例」であり、これが正解、というわけではありません。 ＃制作者のポリシーやコンテンツの性質によっては「違う分け方」もあるでしょう。 この手順は、No.1でも参考として挙げさせて頂いたhttp://www.tagindex.com/stylesheet/basic/setting1.htmlの方に図解入りで平易に解説されてますから、そちらをよく読んで意図を理解される事が先決です。 > ネットでは調べていません。 調べましょう。有益な情報がタダで且つリアルタイムで得られるのですから利用しない手はありません。
その他の回答 (1)
- abril
- ベストアンサー率69% (388/560)
> cssを外部ファイルにしたいのですが方法が分かりません。 CSSを扱う上でものすごい基礎的な事なんですけれど…ちょっとはマニュアルを読むなりググって見るなりして調べてみましたか？ 以前、最近の頻繁なCSSに関する一連のご質問に答えさせて頂いた時にもアドバイスしたのですが、基礎を理解する事無く見よう見まねでやって上手くいかないとここで聞く、みたいな事を繰り返している限り、クオリティの高いサイトを自力で作ることはいつまでたってもできないですよ。まあ質問者様がその程度のサイトしか作れなくても・作るのに毎回効率の悪い思いをしても構わない、というのであればご自由にどうぞ、なので無視して下さって結構です。 やり方は例えば下記など（他にもいくらでも…）に「具体的に」載ってます。 http://www.tagindex.com/stylesheet/basic/setting1.html http://w3g.jp/css/guide/outline とりあえずこれで試してみてはいかがですか。それでも「わからない・できない」のであれば、解説サイトのどの部分がどの様にわからないのかを具体的に補足して下さればお手伝いできますけれど。
お礼
abril様 いつもいつもありがとう御座います。 書籍は見たのですが、複数のページのcssをまとめる方法のようなものが、書いていなくて、良く分からなくご質問させていただきました。 すいません。ネットでは調べていません。 確かに調べればキット出るんですよね。 学習させていただきます。 いつもいつも的確なご指導感謝申し上げます。 ありがとう御座いました。
補足
abril様 いつもご指導ありがとう御座います。 今回ご指導を頂いた通りに実行してみたのですが、結論から申し上げると、外部ファイルが機能しません。htmlにもきちんと記述したつもりなのですが、何が原因なのか良く分かりません。しいて申し上げると 以下の記述をした後にhtmlにチエッカーにかけたのですが、そこで以下のようにエラーが出たのですがそれば原因でしょうか？ ですが、色々と調べて見てもabril様から教えていただいたサイトを見ても、以下のようには記載されていなく何が問題なのかがわかりません。 まずは、<title>下に以下のように記述をしました。 <link rel="stylesheet" type="text/css"href="Css.Commonness.css"> <link rel="stylesheet" type="text/css" href="Css.a.css"> <style type="text/css"> cssファイルについては、Ｗの中にCssというフォルダを作成してその中に保存してあります。Commonness.cssの中には全てのページに該当するヘッダーやＰの部分を記載して、その他のcssはa.cssの中に記述しています。 そして、htmlチエッカーにかけたところ以下のように出てしまいました 9: line 10: 空要素タグ <link> の要素には空白さえも含めることはできません。 → 解説 40 9: line 11: 空要素タグ <link> の要素には空白さえも含めることはできません。 → 解説 40 9: line 16: 11行目の <link> に対応する終了タグ </link> が見つかりません。 → 解説 72 9: line 16: 10行目の <link> に対応する終了タグ </link> が見つかりません。 → 解説 72 <link>に</link>が必要なのでしょうか？ 書籍を見ても、サイトを見ても<link>という記述は内容なのですが？ いつもすいません。ご指導をいただけませんでしょうか？ 本当にいつもありがとう御座います。
お礼
abril様 度々、すいません。 先ほどの、ご質問間違えて記述してしまいました。 正しくは、以下の通りになります。 <link rel="stylesheet" type="text/css" href="css/commonness.css"> <link rel="stylesheet" type="text/css" href="css/a.css"> <style type="text/css"> 但し、これでもやはり外部cssが有効になりません。 何度も、お手数で御座います。 ご指導の程よろしくお願いします。
補足
abril様 いつも適切なご指導を頂きまして本当にありがとう御座います。 そして、なによりご返事遅れました事深くお詫び申し上げます。 まずは今回ご指導いただいたとおりに実行させていただきます。 そして、よろしければ再度ご連絡、ご報告させていただけましたら 幸いで御座います。 最終的には、もちろん締め切りをさせていただきますが、今しばらく お待ち頂けますよう併せてよろしくお願い致します。 本当にいつもありがとう御座います。