【美大生が登場】色のユニバーサルデザインとは? >>

外部にcssファイルを作り、
文字のみスタイルシートで制御します。
DREAMWEAVER上でスタイルシートは反映されています。
F12を押しても、スタイルシートは反映されています。
しかし、フォルダからhtmlファイルを直接ひらいたり、
アップロードしたファイルをみると、
スタイルシートが反映されていません、
もちろん、cssファイルも一緒にアップロードしてます。
DREAMWEAVER4を使っています。

なんでだか、わかりません。。。
お手数かと思いますが、よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (6件)

こんばんわぁ、Blackwinglsです。



ちょっと心配になって動作確認してみました。

あれ、確かに思った通りの動作しませんねぇ・・・

でソースを良くみてみたらパスがチョットおかしいかも(^^;)

ソースの
<link rel="stylesheet" href="/textStyle.css" type="text/css">
の部分を
<link rel="stylesheet" href="./textStyle.css" type="text/css">
に変更して試してみてください。

恐らくhtmlファイルと同じ階層(フォルダ)にcssファイルをアップしてるんですよね。
最初の記述だとルートにcssファイルがあることになってしまうので・・・・・

ではでは~☆彡
    • good
    • 2
この回答へのお礼

ビンゴです(^-^)
わざわざ動作確認してもらって恐縮です。
お手数おかけしました。
パスは自動的に修正されるものだと思っていましたが、
手をくわえなきゃいけないときもある?んですね。

>恐らくhtmlファイルと同じ階層(フォルダ)にcssファイルをアップしてるんですよね。
同じ位置で一番上の階層に移動していました。

お礼日時:2005/04/26 13:06

こんばんわぁ、Blackwinglsです。



スタイルシートの記述方法には
1、インラインに埋め込む方法
2、HTMLファイル内に埋め込む方法
3、外部ファイルを読み込む方法
とありますが、
件のソースを拝見すると
2、HTMLファイル内に埋め込む方法
<style type="text/css">
<!--
-->
</style>
の記述と
3、外部ファイルを読み込む方法
<link rel="stylesheet" href="/textStyle.css" type="text/css">
と同時に記述されてるようです。
それぞれの記述には当然優先順位があります
1→2→3
の順位で優先順位がありますが、
3、外部ファイルを読み込む方法
よりも
2、HTMLファイル内に埋め込む方法
の方が優先されますので、
<link rel="stylesheet" href="/textStyle.css" type="text/css">
が読み込まれても
<style type="text/css">
<!--
-->
</style>
が優先されて何も反映しない(何も指定していないので)のではないでしょうか・・・・

以上、内容確認せずの思い付き回答です(^^;)

ではでは~☆彡
    • good
    • 1
この回答へのお礼

ご丁寧にありがとうございあます。
勉強になりました。

お礼日時:2005/04/26 13:03

<link rel="stylesheet" href="/textStyle.css" type="text/css">



という指定なのですか?

<a href="/textStyle.css">css</a>
とでもいう記述を加え、そのリンクが正常に行われるか試してみてください。

というか、絶対パス、相対パスどちらなのでしょうか。
    • good
    • 0
この回答へのお礼

どうもありがとうございます。
相対パスによる指定だと思うんですが。

お礼日時:2005/04/26 13:02

私の方では再現できませんでした。


ちゃんとCSSは反映されていますので…

<link rel="stylesheet" href="/textstyle.css" type="text/css">
の部分がCSSファイルの位置で間違いないのか、再度確認してみて下さい。
    • good
    • 0
この回答へのお礼

たびたびありがとうございます。

お礼日時:2005/04/26 12:57

Dreamweaverで見れたからと言って、各ブラウザで見えるという保証はありません。


ブラウザ同様にエディタも規格の統一がなされていないからです。
F12で正しく見れるのに、ローカルファイルを開くと見れないのですね。まず、ローカルファイルを開いた時点で正しくないことがおかしいですね。
CSSファイルの指定の仕方に問題がないでしょうか?
    • good
    • 0
この回答へのお礼

ありがとうございます。そう思います~。
どこを確認したらよろしいでしょうか?

cssスタイル > スタイルシート編集
さらに編集でみると、テキストスタイルがいくつか
定義されています。

そういうのは、一応みたんですが。
そっちじゃなくて他が原因ですか?
一度、階層を移動したんですが、
そういうのって自動的に修正されます?

お礼日時:2005/04/25 16:49

反映されていないブラウザを教えて下さい。


また、できればこういう質問はソースを見せて
頂いた方が的確な回答ができる場合が多いと思いますよ。
    • good
    • 0
この回答へのお礼

ありがとうございます。
反映されていないブラウザーは、IE、FireFoxの両方。
F12で確認したときのみ、反映されています。

<html>
<head>
<title>テスト</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
-->
</style>
<link rel="stylesheet" href="/textStyle.css" type="text/css">
</head>

<body bgcolor="#FFFFFF" text="#333333" leftmargin="0" topmargin="50" marginwidth="0" marginheight="0" class="gray12" link="#1717FF">
<div align="center">
<p><span class="gray12">テスト<br>
テストテストテストテストテストテスト</span>

(中略)

</div>
</body>
</html>

ソースの一部です。どこも反映されていません。

お礼日時:2005/04/25 16:38

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qcssが反映されません

FC2のホームページについてです。

ホームページはなんとか作れてサーバーにアップしたのですが、
style.cssで設定した背景画像とスクロールバーが反映されません><
テンプレートをお借りして、その中に入っていたstyle.cssもそのままffftpに
アップロードしました。

ファイル内で自分のホームページを見てみると背景画像と色など設定したスクロールバーは
しっかり反映されているのですが、サーバーにアップすると反映されません。

ffftpにstyle.cssをそのままアップロードしたのが間違いだったのでしょうか;;
検索して調べてみるとCSSのフォルダごとアップロードしろと書いてあったりするのですが
テンプレートに入っているのはstyle.cssというものだけで、cssフォルダは入っていません。
それともcssフォルダは自分で作るのですか><?

Aベストアンサー

とても忙しいのですが、少し時間が取れたのでサイト拝見しました。
本当にまだ初心者なのですね。
ちょっとショックかもしれませんが、ページを作成したら
★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
 などでチェックするのがもっとも良いです。減点0の項目は宗教的なものもありますからこだわらなくて良いですが、減点数の書かれているものは治すと良いでしょう。
 Another HTML-lintは、厳しいですがなにが悪いかと、その解説や対策まで教えてくれるからとても勉強になります。

<DOCTYPE>の宣言がされていますが、今からはじめられるなら必ずstrictにするべきです。これは1999年のHTML4.01の勧告時に
『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』とされて来たものです。多分参考にされている書籍かサイトは相当古いものだと思います。
 というか、まったく仕様書を知らない人が作られたテンプレートではないかな。Another HTML Lintを確認するまでもなく酷いものです。

 その後、そのままXML化されたXHTML1.0の後、XHTML1.1が勧告されましたが、XHTML1.1ではstrict以外はありません。【現在、勧告直前になっているHTML5は、HTML4.01strictの改訂で、transitinal的なものは一切ありません。】

 そして、HTML4.01で方向性は示されていたのですが、それがまったく徹底していなかった反省からHTML5は、完全に文書構造とプレゼンテーション(表現)は分離されます。たとえば、
「構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」
「単に文書内容を整形する目的だけで表を用いるべきでない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )」
★<DOCTYPE>はおまじないなんかじゃありません。仕様書にきちんと書かれているルールです。これはブラウザ(IE)を標準モードで起動させるスイッチにもなっています。
→DOCTYPEスイッチ - Google 検索 ( https://www.google.co.jp/#hl=ja&safe=off&sclient=psy-ab&q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&oq=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&gs_l=hp.3..35i39j0.254219.263038.2.263743.24.19.5.0.0.0.330.2992.0j18j0j1.19.0...0.0...1c.1.ix0-Vuoh6Ac&psj=1&bav=on.2,or.r_gc.r_pw.r_qf.&fp=769cfc6a4773dbdc&biw=1024&bih=619 )

 実は、DOCTYPEの宣言以上にあなたのサイトは、この点で誤りだといえます。厳しいですが、これは今後は絶対に守らなければならない条件の一つです。詳しくは
・スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )
 など。

たぶん携帯やスマートホンを想定されたページだと思います。
本来は下記サンプルのようにシンプルなものであるはずです。
iframeはstrictでは使えませんので、objectを使っています。
そのため、targetは同様に使えませんので、それぞれのページにこのソースを書く方が良いです。
 →FRAME 問題 HTML - Google 検索 ( https://www.google.co.jp/#hl=ja&safe=off&output=search&sclient=psy-ab&q=FRAME+%E5%95%8F%E9%A1%8C+HTML&oq=FRAME+%E5%95%8F%E9%A1%8C+HTML&gs_l=hp.3..0i8i10i30j0i8i30.2515.15781.1.16360.23.20.3.0.0.0.408.3490.0j15j3j1j1.20.0...0.0...1c.1.Jvj_QaC4uiM&psj=1&bav=on.2,or.r_gc.r_pw.r_qf.&fp=769cfc6a4773dbdc&biw=1024&bih=619 )


★Anothe HTML Lint
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )
でテスト済み
(注意) タブは_に置換してあるので戻すこと!!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<meta http-equiv="Content-Script-Type" content="text/javascript">
_<title>pochette</title>
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rel="stylesheet" type="text/css" media="screen" href="./test.css">
_<style type="text/css">
<!--
-->
_</style>
</head>
<body>
<!-- ここから -->
_<div class="header">
__<h1>*pochette*</h1>
_</div>
<!-- ここまではすべてのページで共通 -->
_<div class="section">
__<h2>本文</h2>
__<p><object data="./main.html">新着情報は<a href="./main.html">新着情報</a>へ</object></p>
__<div class="Navigation">
___<ul>
____<li><a href="main.html">Top</a></li>
____<li><a href="about.html">About</a></li>
____<li><a href="material.html">Material</a></li>
____<li><a href="bbs.html">BBS</a></li>
____<li><a href="link.html">Link</a></li>
___</ul>
__</div>
__<p><img src="./g8.png" height="273" width="250" alt=""></p>
_</div>
<!-- ここから -->
_<div class="footer">
__<address>Copyright (c) 2012 *pochette* All Rights Reserved.</address>
<!-- ここまではすべてのページで共通 -->
<script type="text/javascript"><!--
この部分はFC2自動挿入なので省略
-->
</script>
_</div>
</body>
</html>

[CSS]
@charset "Shift_Jis";
html,body{margin:0;padding:0;}
body{
_color: #808080;
_font-family: 'Osaka,verdana';
_font-size: 10px;
_letter-spacing: 1px;
_line-height: 12pt;
_text-align:center;
}
div.header,div.section,div.footer{
width:30%;min-width:320px;
margin:0 auto;
}
div.section object{width:300px;height:200px;}
a:link{color: #808080;}
a:hover {color: #FF8040;}
h1,div.Navigation{
background-image: url("./cccc12.png");
}
div.section div{margin:20px

とても忙しいのですが、少し時間が取れたのでサイト拝見しました。
本当にまだ初心者なのですね。
ちょっとショックかもしれませんが、ページを作成したら
★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
 などでチェックするのがもっとも良いです。減点0の項目は宗教的なものもありますからこだわらなくて良いですが、減点数の書かれているものは治すと良いでしょう。
 Another HTML-lintは、厳しいですがなにが悪いかと、その解説や対策まで教えてくれるからとても勉強になりま...続きを読む

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qスタイルシート(CSSスタイル)が読み込めない。

Webデザイナー修行中の者です。

社内の人が作ったホームページ。背景や線の画像を各
ページで統一するため、ソースをコピー&ペーストして
新たなページを作ったのですが、作成の時点では線画像も
背景も表示されるのですが、ブラウザで見てみると背景も
線も出ません。
おそらくスタイルシートというもの(CSSスタイル)が
読み込めていないのだと思いますが、考えられる原因は
どんなものでしょう?
作成者に聞けばいいのでしょうが、いないので聞くことが
できません。
かといって、大幅にページを変更する時間もなく、私が
作るページだけを全く別の背景等にするのも、不自然な
ものになってしまいます。
業務にかかわるものですので、Webページやタグを公開
できないのですが、アドバイス、よろしくお願いいたし
ます。

作成はメモ帳、またはDreamweaver4を使用しています。

Aベストアンサー

No1です。
えと、あなたのPCにサイトの全データがあるわけではないのですね。
だったらそのPC上では確認できないかもしれませんね。
方法としては、言われるとおりアップして確認する方法。
もう1つはCSSファイルをDLし、サイトと同じ階層構成を作り上げることです。
<link rel="stylesheet" href="../catalog/stylesheet.css" type="text/css">
の場合は、保存してあるフォルダの1つ上に「catalog」というフォルダを作り、そこにDLした「stylesheet.css」を配置しブラウザで確認してください。
ちゃんとCSSが認識されるはずです。

QFFFTPでページに反映されません

過去にアップしたものを上書きしてアップしたのですが、
サイトで確認すると反映されてなく、
前のページのままになっています。
アップ自体は問題なくできています。
アップしてから反映されるまでに時間がかかるのでしょうか?
それとも、何かおかしな点があるのでしょうか?

詳しい方がいらっしゃいましたら、
是非回答よろしくお願いします。

Aベストアンサー

ページのキャッシュが残っているのかもしれません。

インターネットの一時ファイルを削除してください。
IEの場合は「ツール」―「インターネットオプション」―「一時ファイルの削除」で、できます。
(クッキーの削除はしないでください。他のサイトを見るときに影響を及ぼす場合もあります)

あるいは、ブラウザのページの更新ボタンを何度か押すと、新しいものが表示される場合があります。

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

QIEで外部スタイルシートが反映されない

IEで外部スタイルシートが反映されない


HPを製作したところ、
Firefoxでは、完璧に外部スタイルシートが適用されていたのですが、
IEでテストしたところ、CSSが全く反映されていてませんでした。

多くの皆さんがしてるように、
ヘッダーに、
<link href="style.css" rel="stylesheet" type="text/css" />
と記述しているのですが・・・


原因としては何が考えるでしょうか?

ご助力願います。

Aベストアンサー

別アカウント作成した質問者です。

ご報告いたします。
原因が判明しました

CSSの一番上、
@charset "utf-8;


このutf-8の後の”(アポストロフィ)が消えてました。

@charset "utf-8";が必要なのは、IEの7以前のみ。
なので、IE8とMozilaは問題なく表示されたようです。


皆様ご協力ありがとうございました。


因みに、この場合、
なぜか次のBodyの部分や、他の部分がチェッカーに引っ掛かっていました。

Q複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value=">> 進 む>>" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

よろしくお願いいたします。

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="<< 戻る <<" />
<input type="submit" value="選択リセット" />
<input type="submit" value=">> 進 む>>" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}

Qphpにcssを適応させたいのですが?

phpで出力させた結果をブラウズするのに、css指定させたいのですが?

できるのでしょうか?

Aベストアンサー

PHPだから特別な考えはしなくて良いです

PHPはあくまでも、サーバー側で動いて、その結果を出力させるだけです

つまり出力させたHTMLにごくごく普通にCSSを適用させれば良いだけです
又、テクニックとしCSSそのものをPHPで処理させることも可能ですよ

例えば
---------------index.html(又はindex.php)のhead内
<link rel="stylesheet" type="text/css" href="stylecss.php"/>
---------------

------------stylecss.php
BODY {
background-color: #<?php echo $background; ?>;
margin: 0px;
}

A:link {
color: #<?php echo $acollar; ?>;
text-decoration:none;
}
-----------
のようにしてしまって、CSSそのものを動的に生成することも可能です

PHPだから特別な考えはしなくて良いです

PHPはあくまでも、サーバー側で動いて、その結果を出力させるだけです

つまり出力させたHTMLにごくごく普通にCSSを適用させれば良いだけです
又、テクニックとしCSSそのものをPHPで処理させることも可能ですよ

例えば
---------------index.html(又はindex.php)のhead内
<link rel="stylesheet" type="text/css" href="stylecss.php"/>
---------------

------------stylecss.php
BODY {
background-color: #<?php echo $background; ?>;
margin: 0px;
...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

価格.com 格安SIM 料金比較