- ベストアンサー
CSSの外部ファイルの作り方
こんにちは、いつもはサイトのデザインをCSSで設定する時 HTMLファイルの<HEAD></HEAD>部分に書き込んでるのですが それらの量が段々多くなってきたので前ページ共通のCSSは外部ファイルでリンクさせようと思いました。 でも外部ファイルでCSSを作るのは初めてなので何分書き方などで少し分からないところがあります。 例えば１．文字の大きさ２．リンク下線消し３．行間の幅 などを指定する時これら全部を一つのCSSファイルに書いていいのですか？ それとも一つのファイルには一つの設定しか書けないんでしょうか？ あと、外部ファイルの場合<STYL>でまとめなくてもいいらしいのですが、もし一つのファイルに複数の設定を書けるなら その場合は一行あけて書いたりするのでしょうか？ そして、これらCSSの外部ファイルにリンクさせたHTMLファイルの <HEAD>部分に後から他のCSSを書き込んでもそれは反映されますか？ いろいろ多くて少し分かりづらい説明かもしれませんがお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは！ 私も初めて外部CSS使ったときは、あたまの上にハテナマークが飛び交っていました。 基本的には、head内に書くときも、外部ファイルに書くときも、書き方は全く同じです。 mimi1984さんのように、量が多くなったから別のファイルにしたい、と言う要望に応えているだけの機能、と思ってください。 具体的な記述方法は、参考URLに書いてありますが ↓こんな感じです。 <link href="sample_style.css" rel="stylesheet" type="text/css"> href=""のファイル名をご自分で作ったファイル名に変えてください。 具体的にこの例で言うところの「sample_style.css」の書き方ですが ----------------- body{font-size:90%;} ----------------- のように、唐突に書き始めて問題ありません。 （厳密には、charsetを指定するらしいですが、とりあえず。） ちなみに-----------------の線は、必要ありません。記述部分の区切りとして便宜上書いただけなので。 そして、その下に続けて ----------------- a{ color: #ff0000; text-decoration: none; } a:hover{ color: #ff0000; text-decoration: underline; } ----------------- などどんどん書いていって大丈夫です。 （私は1枚のcssに100行以上記述したりしてます） 更に、cssの表記ですが、 a:hover{color: #ff0000;text-decoration: underline;} でも a:hover{ color: #ff0000; text-decoration: underline; } でも大丈夫です。自分が見やすいと思う書き方でどうぞ。 ■ファイルの数について 外部ファイルは１つ、と決まっていませんので、都合に合わせて複数枚用意してもOKです。と言うか、分けた方が使い勝手良いです。 私は、 <link href="base.css" rel="stylesheet" type="text/css"> <link href="main.css" rel="stylesheet" type="text/css"> <link href="top.css" rel="stylesheet" type="text/css"> など、平均したら3枚くらいに分けています。 どのページでも共通して使うもの メインのコンテンツで使うもの トップページ用 みたいに分けています。 ★注意事項 ただし、後から読み込んだファイルの内容が優先されますので、 全部のファイルでbodyにフォントサイズを指定していたとしたら top.cssに書いてある物が適用されます。 さらに、外部ファイルよりも、そのHTMLのheadに記述されている物が優先されますし、最優先は、そのタグに直接書かれたstyle設定、だそうです。 例： base.css body{font-size:100%;} main.css body{font-size:90%;} ←上よりこっちが優先される top.css body{font-size:80%;} ←上よりこっちが優先される 結果 フォントサイズは 80% になる でも、Head内に body{font-size:90%;} と書かれていたら、90%になる。 そして、 <p style="font-size:100%;">あああ</p> と書いてあれば、この「あああ」は100%になる。 と、ゆー感じです。ややこしいですが、慣れると便利な機能なのでがんばってください！
その他の回答 (2)
>全部を一つのCSSファイルに書いて 良い >その場合は一行あけて書いたりするのでしょうか？ 不要。 <style>に書いた形のままで移植できる。(カット＆ペースト) >後から他のCSSを書き込んでも される。 注意は、HTMLを上から読み込んで行って、同じ設定が有った場合は後に書かれている物が有効になるという事。 No1はそれを言っている。 A.cssで table{border:1px} B.cssで table{border:solid} タグで style="border:red" としてあると 結果はそのタグは table{border:1px solid red} として描画される。
お礼
後に書かれているほうが優先されるというのは初めて知りました。 これは注意点ですね。 どうもありがとうございました！
- anwar
- ベストアンサー率47% (8/17)
書き方が間違っていなければ、１つにまとめて書いてもばらして書いても特に問題はありませんし、1行空きにする必要もありません。 ご自分が判りやすい方法がよいのではないでしょうか。 外部ファイルにて記述した指定よりもHTMLファイルに直にSTYLEタグで記述した指定の方が優先される事に気をつければ、両方とも反映されます。
お礼
全部一つのファイルに書いても大丈夫なんですね！ そして優先度はHTMLファイルの方だということもわかりました。 どうもありがとうございました！
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
わ、わー！すごい具体的に書いていただいてとても参考になります！ いくつでもファイルに書いていっていいのですね！（回答者さんの100行以上はすごいですね！） 確かに外部ファイルもいくつか作っておくと便利ですよね、勉強になります。 それからNo.１さんとNo.２さんの回答をまとめて頂いたような例などとてもわかりやすいです。 CSSの表記の仕方もどうもありがとうございます☆ 参考URLも是非見に行きます！どうもありがとうございました！