こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

スタイルシート 外部ファイルについて質問です。

スタイルシート 外部ファイルについて質問です。

レイアウト用のスタイルシート

<style type="text/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;
}
-->
</style>

を、外部ファイルに移したいのですが、やり方が分かりません。
現在ページ内で

<div class="outer">
  <!-- 左スタイル 開始 -->
  <div class="menu">
  文章など
  </div>
  <!-- 右スタイル 開始 -->
  <div class="main">
  文章など
  </div>
  <!-- 右スタイル おわり -->
<br class="clears">
</div>
<!-- 左右スタイルシート おわり -->

という方法で表記しています。

外部ファイルへの移し方、外部ファイルの中身をどうしたらいいか、
お手数ですが、教えていただけると幸いです。

投稿日時 - 2010-05-20 16:37:11

QNo.5908879

すぐに回答ほしいです

質問者が選んだベストアンサー

こんにちは。

外部スタイルシート(以下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

投稿日時 - 2010-05-20 17:14:30

補足

なるほど、参考になります。ただ、実行してみましたが問題点が・・・

1、
<link rel="stylesheet" href="ここにファイル名.css" type="text/css">
は、下層フォルダ内のhtmlにもコピペで使いたいので、絶対パスで指定しました。

2、
ページ内で

<!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内部の一部をスタイルシートで表記、そのスタイルシートの雛形?を外部に・・・
ということは、出来るのでしょうか?

投稿日時 - 2010-05-20 17:57:56

このQ&Aは役に立ちましたか?

18人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

単純に絶対パスでは参照できていないだけでしょう。
相対パスで指定してみましょう。絶対パスはサーバーにアップしないと効きません。
その他スタイルシートの指定方法や優先順位、詳細度、継承については、
【参考サイト】
値の割り当て、カスケード処理、継承
  http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html
などをよく理解してください。
 仕組み自体は、詳細度と優先順位を考えればよいだけですから、とても簡単ですがここを理解してないと、必ず迷います。

投稿日時 - 2010-05-20 19:11:16

補足

単純に絶対パスの設定ミスでした。

ただ、SEO診断ツール

ttp://dipper.septeni.co.jp/
でキーワード出現数をしらべると、どうもスタイルシート挿入箇所より下のキーワードが数えられていないようなのです。

何箇所か診断ツールで見比べた方がよさそうですね;

投稿日時 - 2010-05-21 09:49:13

あなたにオススメの質問