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

ローカル環境で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 | │├テクニック
<< 最近よく質問される内容 スキンのバックアップに”紙”を... >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。