- ベストアンサー
スタイルシートを外部ファイルに移す方法とは？
- スタイルシートを外部ファイルに移す方法を教えてください。
- 現在はページ内でスタイルシートを表記していますが、外部ファイルに移したいです。
- 外部ファイルへの移し方や中身の書き方について教えてください。
- neko984
- お礼率8% (4/45)
- ホームページ作成ソフト
- 回答数2
- ありがとう数18
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 外部スタイルシート（以下CSS）化するには、HTMLタグとコメントアウトを取り払うだけでできます。 質問者さんの設定で外部CSS化すると、 ★ .outer { width:; background-color:; padding:15px; margin:0 auto 0 auto; } .menu { float:left; width:20%; background-color:; height:100%; } .main { float:right; width:70%; background-color:; height:100%; } .clears{ clear:both; } /* CSSファイルでのコメントアウトはここ */ ★ ★～★までの範囲をテキストエディターなどで打ち込み、ファイルを保存するときに拡張子を「.css」とするとOKです。 あとは、HTMLのほうの設定です。 HTMLのheadタグの中に宣言を入れます。 例えば、 ★ <head> <link rel="stylesheet" href="ここにファイル名.css" type="text/css"> </head> ★ ★～★までの範囲をheadタグ内に入れてください。 HTMLファイルとCSSファイルは別のファイルなのでHTML側でのCSSファイルのファイルパスの指定が必要になってきます。 絶対パスでの指定は、後々面倒なので相対パスでの指定をオススメします。 参考URL： http://www.dspt.net/bgn/003/005.html http://www.dspt.net/seo/004/index.html
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
単純に絶対パスでは参照できていないだけでしょう。 相対パスで指定してみましょう。絶対パスはサーバーにアップしないと効きません。 その他スタイルシートの指定方法や優先順位、詳細度、継承については、 【参考サイト】 値の割り当て、カスケード処理、継承 http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html などをよく理解してください。 仕組み自体は、詳細度と優先順位を考えればよいだけですから、とても簡単ですがここを理解してないと、必ず迷います。
補足
単純に絶対パスの設定ミスでした。 ただ、SEO診断ツール ttp://dipper.septeni.co.jp/ でキーワード出現数をしらべると、どうもスタイルシート挿入箇所より下のキーワードが数えられていないようなのです。 何箇所か診断ツールで見比べた方がよさそうですね；
補足
なるほど、参考になります。ただ、実行してみましたが問題点が・・・ １、 <link rel="stylesheet" href="ここにファイル名.css" type="text/css"> は、下層フォルダ内のhtmlにもコピペで使いたいので、絶対パスで指定しました。 ２、 ページ内で <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML lang="ja-JP"> <head> <link rel="stylesheet" href="/home/まるまる/ばつばつ/css/ファイル名.css" type="text/css"> </head> <body style="margin-top : 0px;margin-left : 0px;margin-right : 0px;margin-bottom : 0px;"> （ここは普通の文章） あいうえお <div class="outer"> <!-- 左スタイル 開始 --> <div class="menu"> 文章など </div> <!-- 右スタイル 開始 --> <div class="main"> 文章など </div> <!-- 右スタイル おわり --> <br class="clears"> </div> <!-- 左右スタイルシート おわり --> （ここから又普通の文章） かきくけこ </body> </html> という方法での表記はまったく変えずにupしました・・・ そうすると、スタイルシートが反映されず、全て左詰めで表示されてしまいます。 初めの質問が説明不足という点もあり、失敗したかと思います。 body内部の一部をスタイルシートで表記、そのスタイルシートの雛形？を外部に・・・ ということは、出来るのでしょうか?