- PR -

スタイルシートが有効になりません。。。

投稿者投稿内容
Jetta
常連さん
会議室デビュー日: 2008/10/15
投稿数: 44
投稿日時: 2009-02-02 15:02
asp.net、VS2550でWEB画面の開発を行っています。

ローカルで開発し画面を表示してテストしていた時は、作成したスタイルシートが有効になっていたのですが、サーバーに移行し画面を表示すると意図した形にならず困っています。

現在の構成ですが、マスターページを作成し、各処理画面はマスターページを使用しています。
スタイルシートはこのマスターページにのみ設定しています(各処理画面にスタイルシートを設定しようとし、VS2005のエディターで作成したStyleSheet.cssをドラッグしたのですが、マスターページにしか設定されなかったためです)。

作成したスタイルシート(StyleSheet.css)の内容ですが
body
{
font-size: 12px;
font-family: 'MS Pゴシック' , 'MS ゴシック' , Serif;
}
これだけとなっています。

サーバーで表示すると、文字のサイズがかなり大きくなってしまいます(ローカルでテストしている間は12ポイントのようですが、サーバー移行後実行すると多分14ポイント位になってしまいます)。
また、マスターページとスタイルシートの各ファイルはWEBサイトフォルダーの直下に置いてあり、各処理画面ファイルはWEBサイトフォルダーの下に1つフォルダーを作成しその中に格納しています。

どなたかお分かりになる方がいらしたらご教授頂けると助かります。

よろしくお願いします。
King
ぬし
会議室デビュー日: 2008/06/20
投稿数: 284
投稿日時: 2009-02-02 15:46
情報として下記の事を教えていただけますか。
・マスターページに StyleSheet.css の指定をどの様に記述しているか。
・ローカルでの Web アプリケーションのルートディレクトリからの StyleSheet.css のパス。
・サーバーでの Web アプリケーションのルートディレクトリからの StyleSheet.css のパス。

VS2005 なのであればテーマを使っても良いと思いますがどうでしょうか。
(VS2550 と書いてありますが VS2005 と解釈します)
http://msdn.microsoft.com/ja-jp/library/ykzx33wh(VS.80).aspx
あすか
ぬし
会議室デビュー日: 2006/07/12
投稿数: 309
投稿日時: 2009-02-02 15:50
実際に表示されている画面のHTMLソース内に
<link rel="stylesheet" href="/stylesheet/club_new.css"
のようにスタイルシートへの参照がなければ
スタイルシートは適用されません。


※ちなみに
<link rel="stylesheet" href="/stylesheet/club_new.css"
はここのサイトのスタイルシート。
Jetta
常連さん
会議室デビュー日: 2008/10/15
投稿数: 44
投稿日時: 2009-02-02 16:55
Kingさん、あすかさん

ありがとうございます。

@作成したマスターページのソースを貼り付けます。
 body内は多いでの割愛しました。
 <head>〜</head>内に、下記のように入れてあります。

<%@ Master Language="VB" CodeFile="MP_home.master.vb" Inherits="MP_home" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
  <title>ログインページ</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
<form id="form1" runat="server">
<div>
<table style="width: 960px; border-collapse: collapse; background-position: right center; background-attachment: fixed; background-repeat: no-repeat; border-top-width: thin; border-left-width: thin; border-bottom-width: thin; border-right-width: thin;">
       :
<table style="width: 960px; border-collapse: collapse; border-top-width: thin; border-left-width: thin; border-bottom-width: thin; border-right-width: thin;">
</table>
</form>
</body>
</html>

Aパス関連の確認ですが

> ・ローカルでの Web アプリケーションのルートディレクトリからの StyleSheet.css のパス。

c:\products\web_pj\マスターページ
c:\products\web_pj\スタイルシート

> ・サーバーでの Web アプリケーションのルートディレクトリからの StyleSheet.css のパス。
サーバーでは、仮想ディレクトリーを採用していまして、d:ドライブ直下に、上記ローカルパスの「\web_pj\・・・」フォルダーごとローカルの環境を全てそのまま格納しています。

d:\web_pj\マスターページ
d:\web_pj\スタイルシート

のようになります。また、サーバーへ移した後は何も変えていません。
この場合「href」タグの変更が必要になりますでしょうか?


※> (VS2550 と書いてありますが VS2005 と解釈します)
仰る通りで、誤記です。すいませんでした。


> VS2005 なのであればテーマを使っても良いと思いますがどうでしょうか。
ご助言ありがとうございます。
web開発はまだまだ新人ですので、「テーマ」は知りませんでした。
このあとすぐ調べてみます。

よろしくお願いします。
どっとねっとふぁん
ぬし
会議室デビュー日: 2005/02/23
投稿数: 935
投稿日時: 2009-02-02 17:13
> また、マスターページとスタイルシートの各ファイルはWEBサイトフォルダーの
> 直下に置いてあり、各処理画面ファイルはWEBサイトフォルダーの下に
> 1つフォルダーを作成しその中に格納しています。

これ、本当にローカルの開発サーバでちゃんと動いてますか?
マスターページ、というと独立のページがあるように勘違いしてしまう人が多いですが、
実際にはマスターページは各処理画面のaspxの中によみこまれて動作します。
このため、マスターページでcssファイルを相対アドレスで指定する場合、読み込まれる
処理画面からの相対アドレスを指定しないといけないかと思います。

#ローカルでは処理画面と同じフォルダに同じ内容のcssファイルがおいてあったりしませんか?
Jetta
常連さん
会議室デビュー日: 2008/10/15
投稿数: 44
投稿日時: 2009-02-02 17:30
どっとねっとふぁんさん

ありがとうございます。

> #ローカルでは処理画面と同じフォルダに同じ内容のcssファイルがおいてあったりしませんか?
確認しましたが、処理画面をおいてあるフォルダーにはcssファイルはなく、cssファイルは1つしか使用していませんが、web_pj直下にしかありませんでした。

ちなみに、処理画面のパスは以下のようになっています。

c:\products\web_pj\マスターページ1
c:\products\web_pj\スタイルシート
c:\products\web_pj\job\処理1
c:\products\web_pj\job\処理2

※例えば、処理1、処理2では、マスターページ1を設定しています。

よろしくお願いします。
どっとねっとふぁん
ぬし
会議室デビュー日: 2005/02/23
投稿数: 935
投稿日時: 2009-02-02 18:41
とりあえず、マスターページでのCSSファイルの指定を絶対パスとかにしたら動きますか?
あと、処理ファイルからの相対パスにしたらどうですか?
べる
ぬし
会議室デビュー日: 2003/09/20
投稿数: 1093
投稿日時: 2009-02-02 21:07
引用:
ちなみに、処理画面のパスは以下のようになっています。

c:\products\web_pj\マスターページ1
c:\products\web_pj\スタイルシート
c:\products\web_pj\job\処理1
c:\products\web_pj\job\処理2


重要なのは
1.ローカルの処理1や処理2を、ブラウザで開いたときのURL
2.サーバーの処理1や処理2を、ブラウザで開いたときのURL
3.それらの出力HTMLソースに記述されているcssファイルのURL(linkタグ)
ですかね。

runat="server" がついたheadタグの中にcssを記述すると、実行時のパスにあわせて
出力HTMLが以下のように書き換えられるのが普通です。
<link href="../StyleSheet.css" rel="stylesheet" type="text/css" />
このようになっていれば、OKなはずなんですけどね。

あとは、出力HTMLに書かれているcssのパスを直接ブラウザで開いてどうなるか、ですかね。

スキルアップ/キャリアアップ(JOB@IT)