- ベストアンサー
css外部ファイル（ヘッダ、フッタ）の書き方
素人です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> でhtmlを（テキストエディタを使って）書いています。 ヘッダとフッタをcssで書きたいので参考サイト等を探していますが、 htmlに埋め込む方法ばかりで、外部ファイルの書き方が見つかりません。 例えば、 －－－－－－－－－－ <style> * { margin: 0; padding: 0; } #header { position: ●●●● left: 0; top: 0; background-color:●●●● color: ●●●● width: 100%; height: 30px; z-index: 3; －－－－－－－－－－ のようなソースは見つけることが出来るのですが、これを外部ファイルに書き出す方法が分かりません。 ヘッダ内にて <link rel="stylesheet" href="ファイル名.css" type="text/css" /> を宣言し、外部に読み込みファイルを作成する方法で、ヘッダとフッタは作れないのでしょうか？ 探し方が悪いのかもしれませんが、どうしても見つけることが出来ません。 書き方の参考サイトや、ソースの書き方を教えて下さい。 よろしくお願い致します。
- toatouto
- お礼率83% (492/588)
- HTML
- 回答数5
- ありがとう数4
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
あなたの質問を簡単に書くと 「cssファイルに変更を加えたら正しく表示されなくなった」 こういうことですよね。 この場合、cssファイルの書き方が間違っていると思われます。 括弧が閉じていない部分がないかなど調べてください。
その他の回答 (4)
HTMLやCSSの検証を実行したい場合以下で確認を。 HTML http://validator.w3.org/ 拠り正確な（厳格）確認は以下。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html CSS http://jigsaw.w3.org/css-validator/
お礼
ありがとうございます。 確認用に利用したいと思います。
- salonpath
- ベストアンサー率48% (194/399)
head内に書いてあるのが、そのままだとしたら </style>がないけどコピペミス？
お礼
いいえ。 この後、本文に当たる部分とフッタまでのソースがあって長い上に、このソースは参考にしただけのものですので、ヘッダの辺りまでで切りました。
- torayoshi
- ベストアンサー率62% (910/1449)
#1です。 そういった場合はCSS全構文とhtml構文をここに書き出してください。 でないと検証のしようがありませんから。
お礼
再度、ありがとうございます。 質問に実際のソースを記載していないのは、今回自分で書いた物を直して欲しい、と言うことでなく、通常どのような書き方かを知りたかったからなので、 外部cssファイル読み込みのhtmlで、bodyの色、テキスト色を指定した上でのヘッダ、フッタの指定の書き方を教えて頂きたいと思っています。 よろしくお願い致します。
- torayoshi
- ベストアンサー率62% (910/1449)
CSSはあなたが書くんですよね？ その方法で良いんですよ。 外部ファイルにスタイル宣言はいらないので中身だけ書いて、 ○○.cssで保存すれば良いんです。
補足
ありがとうございます。 私が書きます。 既にcssファイルは用意してあり、そこには背景とテキストのカラーを書き込んであるのです。 その状態で読み込んだ場合は上手く反映されるのですが、ヘッダとフッタの部分を読み込ませるために、質問文に書かれたソースを追加してみたところ、htmlが背景色すら読み込まなくなりました。 仮に質問文のソースをそのまま使うとして、外部ファイルに書き込む際、背景やテキストのソースに加え、どちらも反映されたページを作るには、どうしたら良いのでしょうか？
関連するQ&A
- CSSを外部ファイル
CSSを外部ファイルで作成して <link rel="stylesheet" href="○○○.css" type="text/css">で参照したいのですが外部ファイルは H1{color : #000000;} を反映させたいときこれだけ書けばいいのでしょうか。サイトの説明を読んでもよくわかりません。
- ベストアンサー
- その他([技術者向] コンピューター)
- CSS外部ファイル⇒ヘッダー＆フッター
こんにちは。 いまCSSファイルを使ってHPをキレイにしようと頑張っています。 そこで、教えて欲しいことがございます。 ワタシのHPは大きく分けて、ヘッター＆フッターと真ん中の３ブロクで分かれています。そのヘッダー＆フッター部分の画像と機能をそのままで複数ページにも適用させるようにしたいのです。 簡単に言いますと、indexにはリンクが沢山あり、そこから別ページに飛ぶようにしますが、そこで、ヘッダー＆フッターは同じ内容にしたいというものです。コノ場合はスタイルシートに何かを書き込むだけなのか、HTMLファイルを数の分だけイジルのでしょうか。 やり方がチンプンカンプンです。 どなたか教えて下さい。
- ベストアンサー
- ホームページ作成ソフト
- ＣＳＳ今度は外部ファイル！
前回「ＣＳＳが反映されない」で質問させていただきました。 おかげさまで、ヘッダー内で記述したものが、反映されるようになりました。 ところで、今度は外部ファイルの読み込みで「できない！」となっています。 自分ではどこがいけないのか、発見できなかったので、また皆さんのお力をいただきたいと 思います。 ○abc.css(外部ファイル） .body{ color:#006666; font-size:30px; } ○ＨＴＭＬファイル <! 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> フォントサイズは３０ｐｘ・・・<br> <br> になるはずです・・・ </body> </html> ・・・結果・・・ 真っ白な画面に標準フォントで表示。 ○外部ファイル .hp-name{ font-size:55px; color:#006666; text-align:center; } ⇒ファイル名 hp-name.css ○ＨＴＭＬファイル <! 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"> ＨＰ名は「○○△△◇◇」です </div> ////////////////////////////////////////////////////////////////////////////////////// 今度はどこがいけないのでしょう。 <link rel・・・・・・・・ で、外部ファイルを読み込むだけではいけないのでしょうか？ それとも、外部ファイルの書き方がいけないのでしょうか？ 外部ファイルには「スタイルシートの部分だけ」記述すればいいと思っていたのですが・・・ ○外部ファイルを <style type="text/css"> <!-- --> </style> をつけてみたのですが、ダメでした
- ベストアンサー
- その他（インターネット・Webサービス）
- 外部から読み込んだCSSとヘッダに書いたCSSでフォントサイズの表示が変わってしまう
Win IE6にて、外部から読み込んだCSSとヘッダに書いたCSSでフォントサイズの表示が変わってしまいます。 下のようにヘッダに書いた場合のフォントサイズが、 外部CSSにのみ同じように書いた場合に比べて小さくなります。 --------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>テスト</title> <link href="test.css" rel="stylesheet" type="text/css" media="all" /> <style type="text/css" media="all"> <!-- #a .b { font: 70% "ＭＳ Ｐゴシック", Osaka; color: #333333; } --> </style> </head> <body> <div id="a"> <div class="b">表示のテストです</div> </div> </body> </html> ----------------------------------------------------- 外部CSSに書いた場合でも小さく表示させるようにするには どうしたらいいでしょうか？ また、小さくなる原因はわかりましたらご教授願います。
- ベストアンサー
- HTML
- HTMLメールの外部CSSが有効になりません
HTMLメールから以下のように外部CSS（http://から始めてます）を利用したいのですが、実際にOUTLOOK 2003 SP3で見るとスタイルが適用されていません。 ローカルで同じHTMLをブラウザで開くとスタイルは適用されます。HTMLメールのときは何か特別なことが必要なのでしょうか？ <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> ヘッダ全体を以下に掲載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <title>TITLE</title> <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>
- 締切済み
- HTML
- 外部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
- ＣＳＳについて
前回「ＣＳＳ今度は外部ファイル！」で質問をさせていただきました http://okwave.jp/qa4254612.html ＃２の回答者様の記述ソースをコピペしてＣＳＳファイルと、ＨＴＭＬファイルを作ったところ、ＨＴＭＬファイルに外部ＣＳＳが反映されて表示されました。 しかし、このＣＳＳファイルの中身（だけ）とファイル名を変更したところ、今度は反映されなくなりました。 ■ＣＳＳファイルの変更■ 変更前 body { color: blue; font-size:30px; 変更後 .hpname{ font-size:50ox; color:#006666 text:align:center; } ■ＣＳＳファイル名 半角小文字でhpname.css ■ＨＴＭＬファイル 変更前 <! 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"> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> 背景色は青で文字は30px </body> </html> この中の <link rel="stylesheet" type="text/css" href="test.css"> を変更。 href="test.css">を href="hpname.css"> にしました。 ///////////////////////////////////////////////////////////// ＣＳＳファイルの作りかたがいけないのでしょうか？ 「.」をつけてはいけない？ それとも外部ファイルを読み込むパスを絶対指定などしなくてはならないのでしょうか（同じフォルダ階層内です） 何回やり直しても結果が同じなので、また質問させていただきました。
- 締切済み
- その他（インターネット・Webサービス）
- 外部CSSを適用させるための正しいソースコードの書き方
dreamweaverCS4のバグではないかと思うのですが、外部スタイルシート（test.css）を作成し、それをHTMLファイル（test.html）へ適用させたいのですが、ファイルの階層が同じなので、以下のようにソースコードを書くのが正解だと思いますが、 <link href="test.css" rel="stylesheet" type="text/css"> 以下のように、「../test.css」と「..」が付いても適用される場合があります。 <link href="../test.css" rel="stylesheet" type="text/css"> 逆に「..」が付く方が正解で、付かない方が間違っているのでしょうか？ どっちが正しいのでしょうか？ そもそも「..」とは何でしょうか？ すみません、根本的なところからわかっていません。 よろしくお願いします。
- ベストアンサー
- HTML
- CSSでの外部ファイル
こんばんは、いつもお世話になってます HPでの画像の無断転載対策として、CSSで外部ファイルを作り、 そこから呼び出すようにするという方法があることを知りました。 その場合のタグは<link rel="stylesheet" type="text/css" href="./●●.css"> でいいんですよね？ そこで質問なのですがCSSファイルを作るのはメモ帳などでと聞きましたが、その時のタグが↓だとすると table.gazou{ background-image:url("●●.jpg"); background-repeat: no-repeat;} これだけ記述すればいいのでしょうか？ そしてファイル名．CSSの名前で保存するのでしょうか？ そして最後にこのCSSファイルのソースを見られないようにするには、.htaccessなどを使えば大丈夫でしょうか？ すごくまとまってない質問でわかりにくいかもしれませんが回答お願いします；
- ベストアンサー
- ホームページ作成ソフト
お礼
ありがとうございます。 htmlの方も変更しているので、どちらが間違っているのか分からなかったのですが、確認してみます。 ありがとうございました。