- ベストアンサー
CSSの外部ファイルの作り方
こんにちは、いつもはサイトのデザインをCSSで設定する時 HTMLファイルの<HEAD></HEAD>部分に書き込んでるのですが それらの量が段々多くなってきたので前ページ共通のCSSは外部ファイルでリンクさせようと思いました。 でも外部ファイルでCSSを作るのは初めてなので何分書き方などで少し分からないところがあります。 例えば1.文字の大きさ2.リンク下線消し3.行間の幅 などを指定する時これら全部を一つのCSSファイルに書いていいのですか? それとも一つのファイルには一つの設定しか書けないんでしょうか? あと、外部ファイルの場合<STYL>でまとめなくてもいいらしいのですが、もし一つのファイルに複数の設定を書けるなら その場合は一行あけて書いたりするのでしょうか? そして、これらCSSの外部ファイルにリンクさせたHTMLファイルの <HEAD>部分に後から他のCSSを書き込んでもそれは反映されますか? いろいろ多くて少し分かりづらい説明かもしれませんがお願いします。
- みんなの回答 (3)
- 専門家の回答
関連するQ&A
- CSS今度は外部ファイル!
前回「CSSが反映されない」で質問させていただきました。 おかげさまで、ヘッダー内で記述したものが、反映されるようになりました。 ところで、今度は外部ファイルの読み込みで「できない!」となっています。 自分ではどこがいけないのか、発見できなかったので、また皆さんのお力をいただきたいと 思います。 ○abc.css(外部ファイル) .body{ color:#006666; font-size:30px; } ○HTMLファイル <! DOCTYPE PUBLIC HTML "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charaset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- <link rel="stylesheet" href="abc.css" type="text/css"> --> </style> </head> <body> 背景色は濃い青緑です<br> フォントサイズは30px・・・<br> <br> になるはずです・・・ </body> </html> ・・・結果・・・ 真っ白な画面に標準フォントで表示。 ○外部ファイル .hp-name{ font-size:55px; color:#006666; text-align:center; } ⇒ファイル名 hp-name.css ○HTMLファイル <! DOCTYPE PUBLIC HTML "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type"Content="text/html;charaset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- <link rel="stylesheet" href="body.css" type="text/css"> --> </style> </head> <body> <div class="hp-name"> HP名は「○○△△◇◇」です </div> ////////////////////////////////////////////////////////////////////////////////////// 今度はどこがいけないのでしょう。 <link rel・・・・・・・・ で、外部ファイルを読み込むだけではいけないのでしょうか? それとも、外部ファイルの書き方がいけないのでしょうか? 外部ファイルには「スタイルシートの部分だけ」記述すればいいと思っていたのですが・・・ ○外部ファイルを <style type="text/css"> <!-- --> </style> をつけてみたのですが、ダメでした
- ベストアンサー
- その他(インターネット・Webサービス)
- CSSを外部ファイル
CSSを外部ファイルで作成して <link rel="stylesheet" href="○○○.css" type="text/css">で参照したいのですが外部ファイルは H1{color : #000000;} を反映させたいときこれだけ書けばいいのでしょうか。サイトの説明を読んでもよくわかりません。
- ベストアンサー
- その他([技術者向] コンピューター)
- 外部CSSを使ったテーブルが作りたいのですが・・・。
以前こちらで質問させて頂いて、「スタイル作りはCSSで」、と教えて頂き、CSSの勉強を始めました。 早速壁に当たっていまして、お知恵を拝借したいです。 外部CSSファイルに、ul.gaibu{color:ff0000}と記すと、 HTMLファイルに<ul class="gaibu">ここは赤で表示</ul> となる事は出来たのですが、 テーブルの場合、 外部CSSファイルにdiv#table{設定値}を記し、 HTMLに<div id=table>とすると、外部CSSの設定値が反映されましたが、 <tr>や<td>の内容をどう設定して、HTMLにどう記載すれば反映するかが分かりません。 因みに外部CSSに tr.table1 {border:1px #333333 solid; line-height:25px; padding-left:10px; paddting-right:10px; text-align:left; vertical-align:middle} と記載し、HTMLの方に <tr><td class="table1">表1</td><tr>としましたが、 CSSの内容は反映されていません。 宜しくお願い致します。
- 締切済み
- HTML
- 外部CSSの読み込みがうまくできない
<head>~ <link href="basic.css" rel="stylesheet" type="text/css"> ~</head> ↓basic.css body{font-size:80%;color:#4a4a4a;} a:link{color:#004a95;text-decoration:none;} a:visited{color:#950095;text-decoration:none;} a:hover{color:#ff80c0;text-decoration:none;} という感じで外部CSSを読み込んでいるのですが、 ブラウザのoperaやfirefoxだとbody{font-size:80%;color:#4a4a4a;}の所だけ反映されません。 IEだとその部分も反映されます。 cssファイルに修正箇所があるのでしょうか? それとも外部cssを読み込むhtmlファイルの方に追加して記述しなければいけないタグがあるのでしょうか?
- ベストアンサー
- CSS
- 外部CSSが一部適応されません
<LINK href="../style.css" rel="stylesheet" type="text/css"> というコードをHTMLファイルのヘッダ部分に記述しているんですが 同じディレクトリ内にあるAフォルダの各ページには反映されて Bフォルダの各ページには反映されません ホームページビルダー8で作成しています もちろんどちらのフォルダ内にある各ページごとに上記外部CSSの 呼び出しコードは記入してあります 問題がありそうな箇所をアドバイスいただけるとうれしいです よろしくお願いします
- ベストアンサー
- その他(プログラミング・開発)
- Dreamweaver CS5 外部CSSのリンク
Dreamweaver CS5です。 HTMLファイル内に、外部CSSファイルへのリンクについての質問です。 【CSSスタイル】パネルの「スタイルシートを添付」ボタンでCSSファイルをリンクさせますが、HTML内のhead内、titleタグの後の行に記述されます。JavaScriptの記述があると、さらにその後の行に記述されます。 <link rel=******~>の記述を、たとえば、先にクリックしておいてその位置にカーソルを移動しておくなどして指定の場所に書き出してもらうことはできないのでしょうか。 外部CSSファイルはいつも手入力で書き込んでいましたが、Dreamweaverを使ってみたら思ったところに書いてくれません。記述後、指定の位置にドラッグでもして移動すればどうということはないのですが。 文字コードなどは、日本語が表記されているtitleタグより前に記述すること、なんて聞いたことがありますが、外部CSSへのリンク記述にもtitleタグの後ろのほうがいいというようなことがあるのでしょうか。
- 締切済み
- ホームページ作成ソフト
- cssをhtml内から外部へ移すと読み込みません。
cssをhtml内から外部へ移すと読み込みません。 WEB作成初心者です。よろしくお願いします。 Dreamweaverでサイトを作成しています。 CSSを設定すると全てhmtl内に書き出されてしまっていたので 外部CSSファイルに書き出したいと思っているのですが 例えばhtmlの <head>内にある .article { padding-top: 275px; padding-left: 30px; width: 964px; min-height: 100%; padding-right: 30px; } をそのままカットペーストで外部cssファイルにペーストしても 反映されずに何も見えません。 カットペーストで行けるものとそうでないものもあるようです。 何か特別な設定等あるのでしょうか。 教えてください。よろしくお願いします。
- ベストアンサー
- HTML
- 外部スタイルシートがsafariブラウザに反映されない
初心者です、お願い致します。 環境mac osX 外部cssでhtmlファイルをコントロールしたく、外部css(dreamweaverを利用していますが、馴れていないのでテキストエディトでやろうか検討中)とhtmlファイル(テキストエディト)でhp作りをしております。 外部CSSファイルとHTMLファイルの一回目の作成(LINK時)では、どうやら反映がなされるようです。しかし、それ以後、外部CSSファイルをいじりその内容を保存し、HTMLファイルをSAFARIアプリで開くと反映されないのです。 よく分からないのですが、しばらく経って、dreamweaverやテキストエディットを立ち上げ外部CSSファイルの内容を変え、上記と同じ事をするとその時だけ反映され、それ以後、また反映されないという状況になった事もあったと思います。 外部cssファイルは一度しかその内容を指定出来ない、という事ではないですよね??まさか
- 締切済み
- Mac
- cssで外部ファイルを読み込む
XHTML+cssで制作中ですが、XHTMLの中にcssで外部ファイル(HTMLページ)を読み込むことはできますか? インラインフレームでやれないかとも思ったのですが、やってみたらインラインフレームの下のデータが表示されなくなってしまいました。 書き方が悪かったんでしょうか。 cssで読み込みができればいいんですが。。。 教えてください。 よろしくお願いいたします。
- ベストアンサー
- XML
- 外部CSSが読み込めません/HTML
HTMLにおいて、外部CSSを読み込めず困っております。 ググって対処法を実践しても一切反映されません。 現在下記のisaraというサイトを模写しております。 https://isara.life/ HTMLにおいて linkタグでCSSファイルを読み込んだのですがCSSが一切反映されず困っております。 HTMLとCSSファイルは同一フォルダ内にあります。 HTMLファイル名:isaramosya.html CSSファイル名:isaramosya.css HTMLの記述 <link rel=”stylesheet” href="isaramosya.css"> いくらググっても原因がわからず困っております。 原因思い当たる方いらっしゃいましたらお答えいただけましたら幸いです。
- ベストアンサー
- CSS
お礼
わ、わー!すごい具体的に書いていただいてとても参考になります! いくつでもファイルに書いていっていいのですね!(回答者さんの100行以上はすごいですね!) 確かに外部ファイルもいくつか作っておくと便利ですよね、勉強になります。 それからNo.1さんとNo.2さんの回答をまとめて頂いたような例などとてもわかりやすいです。 CSSの表記の仕方もどうもありがとうございます☆ 参考URLも是非見に行きます!どうもありがとうございました!