- ベストアンサー
外部スタイルシートについて
「@rt web」というテンプレートを使いホームページ制作しようと考えていますが、そのテンプレートのスタイルシートは外部スタイルシートになっていません。 http://www.ddnj.com/product/hp/artweb/index.html これを簡単に外部スタイルシートにする方法はないものでしょうか？ 簡単ではなくても外部スタイルシートに設定し直す手順を教えて頂けると助かります。 ソフトはDreamweaver４を使っています。 どうぞよろしくお願いします。
- focus69
- お礼率80% (278/345)
- ホームページ作成ソフト
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
テーブルタグを使わないためには正しいHTMLタグを使え、 正しいスタイルシートを使えることが望ましいと思います。 レイアウトはテーブルタグではなく、スタイルシートで行うとよいでしょう。 HTMLの基本については とほほのWWW入門 http://www.tohoho-web.com/www.htm というサイトさま、 スタイルシートなどについては http://www.kanzaki.com/docs/html/htminfo17.html や http://www.openspc2.org/reibun/css/ あたりがよいかもしれません。 ただ、人によって好みが異なりますので、 HTMLやスタイルシートというキーワードでそれぞれ検索してみてください。 でも今できなくても焦る必要は全然ありません。 ・・・自分もネットを始めた（ほぼホームページを持ち始めた）時から、4年程度は理解するのにかかっていますので（でも今でも完璧に理解できているかと言うとそういえませんが・・・苦笑） もし納期がいつまで、と決められているのでなければ、じっくり時間をかけて自分の納得の行くホームページを作ってくださいね。
その他の回答 (3)
- sr-agent
- ベストアンサー率43% (594/1373)
なお、これは個人的な意見ですが、テーブルタグをレイアウトに使っている上、テーブルの中にテーブルが2重に入っています。 このような使い方をすると、表示が遅くなりますし、 （内側のテーブルを表示してから徐々に外側を読み込んでいくらしいので） テーブルタグの閉じ忘れをする可能性も高くなりますので あまりおススメできません（苦笑） IEの場合は閉じ忘れをしても見えますが NNの場合、閉じ忘れをすると、全くテーブルの中身が表示されず、 ページが真っ白！ということになりかねません。 ・・・以前に実は・・・ 「私ネスケなんだけどページが真っ白で見えない！」って言われたことがあるんですよ。 自分から（IE）は見えているのにへんだなぁって。 原因は・・・閉じ忘れでした。 ので極力レイアウトのためのテーブルタグは使わないようにしようって。
お礼
ありがとうございます。 テーブルタグを使わないとなると・・・。 勉強するのに何か良いサイトはあるでしょうか？ 何度も済みません。アドバイス頂けるとうれしいです。
- sr-agent
- ベストアンサー率43% (594/1373)
おそらくお考えのとおりでよいと思います。 例えばソースファイルは <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <title>company_website18</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta name="Description" content="Made By Web Design Template @rt_web Designed With TimeLineDesignUnitLens"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="content.css" type="text/css"> </head> <body background="image/bg_back.gif"> <table width="701" border="0" cellpadding="0" cellspacing="0" background=""> <tr> <td width="693" valign="top" bgcolor="#ffffff"> <table width="693" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="15"><img src="image/spacer.gif" width="15" height="50"></td> <td width="332"><img src="image/obj_sitetitle.gif" width="192" height="20"></td> <td width="331" align="right"> <table border="0" cellspacing="0" cellpadding="3"> <tr> <td><img src="image/obj_lastupdated.gif" width="74" height="13"></td> <td><font color="#669966" size="2">20xx/00/00</font></td> </tr> </table> </td></tr> </table> </td></tr></table> </body> </html> スタイルシートは body { margin: 0% 0% 0% 0%; color: #666666; background: #ffffff } a:link { color: #006699; background: #ffffff } a:visited { color: #996699; background: #ffffff } a:active { color: #ffcc00; background: #ffffff } という感じになるのではないかと思います。 （tableタグが不足しているようなので編集しなおしています。）
お礼
sr-agentさん、ありがとうございます。 とにかくやってみます。 詳細に亘るアドバイスに感謝しております。
- sr-agent
- ベストアンサー率43% (594/1373)
お使いのソフトを使ったことがありませんので参考になるかどうかわかりませんが、 まず、ファイルの「ソース」を見て、 <meta http-equiv="Content-Style-Type" content="text/css"> というタグがない場合には、このタグを書き加える。 そして、 <link rel="stylesheet" type="text/css" href="okwave.css"> というタグを書き加えます。 okwave.cssというところには、実際にスタイルシートで使用するファイル名を入れます。 同じディレクトリにスタイルシートのファイルを置いているなら 上記のとおりでよいですが 違うディレクトリにおく場合は、記述のしかたが若干違ってくると思います。 なお、もしスタイルシートに関する文章がテンプレートの中にある場合には <style type="text/css"> <!-- body { margin: 2% 10% 2% 10%; color: #000000; background-color: #ffffff } ・ ・ ・ --> </style> という部分を削除されればよいのではないかと考えられます。 以上ご参考まで。 もしHTMLではなくXHTMLで書いている場合には、 <meta http-equiv="Content-Style-Type" content="text/css" /> と括弧を閉じる部分の表現が異なります。
お礼
sr-agentさん、ありがとうございます。 補足ですが、前半のソースはこんな感じなんです↓ fontのサイズやbgcolorがそれぞれの箇所で書かれている状態です。 これらを外部スタイルシートに書くんですよね。そして、改めてそれぞれの場所で関連付けていく。←合ってますか？ <html> <head> <title>company_website18</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta name="Description" content="Made By Web Design Template @rt_web Designed With TimeLineDesignUnitLens"> </head> <body bgcolor="#FFFFFF" background="image/bg_back.gif" text="#666666" link="#006699" vlink="#996699" alink="#FFCC00" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table width="701" border="0" cellpadding="0" cellspacing="0" backbround=""> <tr> <td width="693" valign="top" bgcolor="#FFFFFF"> <table width="693" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="15"><img src="image/spacer.gif" width="15" height="50"></td> <td width="332"><img src="image/obj_sitetitle.gif" width="192" height="20"></td> <td width="331" align="right"> <table border="0" cellspacing="0" cellpadding="3"> <tr> <td><img src="image/obj_lastupdated.gif" width="74" height="13"></td> <td><font color="#669966" size="2">20xx/00/00</font></td> </tr> </table>
お礼
分かりやすいアドバイスありがとうございます。 焦らず地道にやってみます！