<< 最近よく質問される内容 スキンのバックアップに”紙”を... >>
 

ローカル環境でCSS編集をする方法(ステップアップ講座)


ちょっとしたテクニックをご紹介します。
このテクニックを使用して、ステップアップしましょう(^_-)-☆
皆さんはCSSの編集をネット上で行っていると思いますが、実はローカル環境でテストすることが可能です。遅い回線を使用している方や、頼まれてCSSを見てあげる時など活躍します。
初心者の方は難しいので、レベルがアップしたら試してください。

転記禁止です、トラックバックでご紹介下さい<(_ _)>






ローカル環境でテストするテクニック


1.ローカル環境にサイトを保存する。
 ローカルな環境、つまり自分のハードディスクにサイトを保存します。IEですと、ファイル(F)/名前を付けて保存(A)を選択します。

2.エンコードを日本語(シフトJIS)を選択して保存します。
日本語(シフトJIS)を選択しなくてもいいのですが、WinやMacの方は日本語(シフトJIS)を選択したほうが扱えるソフトが多いからです。もちろんUnicode(UTF-8)を扱えるエディタを持っている方はそのままでもOKです。

a0031863_18183559.gif


3.エディタで今保存したファイルを開きます。
 このままででも編集は可能です。

4.<STYLE>から</STYLE>までの間がCSSです。この部分を削除します。

5.同じフォルダにTEST.CSSファイルを作成します。

6.作成したTEST.CSSファイルにCSS編集画面からCSSをコピーして貼り付けて保存してください。

7.2で保存したサイトのファイルとCSSをリンクします。

4で.<STYLE>から</STYLE>を削除したところに以下のコードを追加して下さい。

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


8.サイトのファイルをダブルクリックして表示して下さい。
 ローカル環境で、サイトが表示されたと思います。

9.ここからCSSを編集してみましょう。TEST.CSSファイルをエディタで開いて(メモ帖でもOKです。)編集して見ましょう。一番簡単なのは、BODYの BACKGROUNDの色を変えてみると分かりやすいと思います。


10.CSSを編集して保存したら、ブラウザで先ほど表示していたサイトを更新してみましょう。
どうですか、変わってましたか?

このようにしてCSSを変更しながらテストが可能です。もちろん、テストが完了したらCSSをコピーして張り付ければ設定を反映することが可能です。

もし貼り付けて文字化けした場合はもう一度貼り付けをしてみて下さい。


このテクニックはCSSだけで編集のテストを行う方には非常に役に立つテクニックです。また、初心者の方のブログを見てあげるときに重宝します。
多くの方が困っている方を助けてあげられるように今回このテクニックを紹介しました。

これによって、ブログのお医者さんが増えるといいのですが・・・



今日のポイント
  • サイトのデータをローカル環境に保存して編集テストが可能です。
  • 保存の時には、エンコードを日本語(シフトJIS)にしましょう。
  • <link rel="stylesheet" href="TEST.css" type="text/css">
    でCSSのリンクができます。
  • コメント欄やトラックバックの編集をする場合は保存前にコメントやトラックバックを表示して保存すればOK
  • CSSのリンクをしないで、保存したファイルだけでテストも可能です。テストした結果が良かったら実際に反映するといいと思います。

ぽっと


CopyRight(C) 2004 All rights reserved by potto37


[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-07-31 18:14 | │├テクニック | Trackback(1) | Comments(10)
トラックバックURL : http://potto.exblog.jp/tb/780445
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
Tracked from Ramu's Blog at 2004-09-09 02:47
タイトル : スキン編集してみました。(その3)
ぽっとさんの『ぽっとの陽だまり研究室』にあった、ローカル環境でCSS編集をする方法(ステップアップ講座)を参考に、ローカル環境でCSSをいじってみました。ホームページビルダーで開いてスキン編集をテストでき、全体のバランスを取りながら、一気にスタイルシートを編集するにはとってもいい方法だと思います。ぜひお試しを…。... more
Commented by hikkoro-dayori21 at 2004-07-31 20:31
こんばんは。

結構今日のは難しそうですが、私の回線非常に遅いので
このような形で編集できると助かるかもしれません。

今、ネット上でやってますが、一回一回プレビューしな
ければならないのが面倒ですよね??

そう思うなら、こっちの方法を使った方が便利ですか?
Commented by potto37 at 2004-07-31 20:40
こんばんは、 hikkoroさん

そうですね。CSSの編集だけならこちらの方がやりやすいですよ。
でも、ちょっとだけの修正なら今までの方が楽ですね。

テスト的にやってみて、なれたらこの方法を利用するといいですよ。


Commented by hikkoro-dayori21 at 2004-07-31 20:43
なるほど。

個人的にはCSSをいじっている頻度の方が多いので、
こっちの方がラクかもしれません。

結構、色を変えるときに苦労しているので。
(表示されている色と設置した時の色が微妙に違っていたりして)
Commented by potto37 at 2004-07-31 20:54
色は難しいですね。
256色表示にすると、設定されている近い色を選択するそうです。

この手法は覚えておくと、後で役にたちますよ。

私も教えて欲しいとか言われると、よくこの方法で試してから
説明をしています。
Commented by hikkoro-dayori21 at 2004-07-31 21:18
256色表示にするには、何か設定が必要ですか?
よく想像していたのとは違う色になっちゃって、なかなか
探すのに苦労しています。
Commented by potto37 at 2004-07-31 21:24
256色の表示にしなくても、以下のサイトに書いてある色を使用するとイメージとあった色を設定できるそうです。
まだ、試したことないのですが。
よろしかったらどうぞ

http://tohoho.wakusei.ne.jp/wwwcolor.htm
Commented by hikkoro-dayori21 at 2004-07-31 22:45
ほぉーそれは有り難いですね。
のちのち見てみます!
Commented by aspswim at 2004-07-31 23:15
こんばんは
いつもいろいろなヒントがあって興味深いです
影つき画像,おかげさまで思っていたようにできました。
3列レイアウトは左にぴったり寄ってしまうのをどうにも出来なくて,これからの課題にする事にしました。
お時間のある時にまだ全体は未完成ですが影つき画像をご覧いただければと思います。。
Commented by snowy2465 at 2004-07-31 23:21
凄いこんな事ができるのですねっ!!!!!
難しそうで恐る恐るやってみましたが、ローカルな場所でテストが可能になりました。
私は、CSSの編集が出来ないのでこれなら思い切っていじれそう(笑
Commented by potto37 at 2004-08-01 09:39
>hikkoroさん、おはようございます^^
256色ってでも、少ないような気がしますよね。

>aspswimさん、おはようございます。
がんばってますね。
ブログのデザインもいいですね。

>snowy2465さん、おはようございます。
すごいですね、成功したんですね。
常日頃、snowy2465さんは実力が有る方ではと思っていたのですが、すぐに理解されて実施するとはやはりすごい!
<< 最近よく質問される内容 スキンのバックアップに”紙”を... >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。