ホームページビルダーで簡単ホームページ作成講座


CSSを外部ファイルで作成してみよう
CSSを外部ファイルで保存しましょう。
何か特別な事あるの?と聞かれそうですが…ありません(笑
少しカッコイイ?ぐらいかな…。
HTMLソースが少し綺麗?になるぐらいです。
まぁ…同じ事をするなら少しでも美しく、簡単に!がモットーなので
興味のある人だけ実行してみてください。
一度作ってしまえば他のホームページにも使える優れものです。

HOME BACK

CSSを外部ファイルにしてみよう
サイトを開いた状態で
左図のようにサイト
サイト全体のスタイル
サイトにスタイルを適用を選択します。
左の画面が出るのでOKを選択してください。
スタイルシートがないのでサンプルを使います。
どうせ…ロクなのが存在しないので適当に選んでください。
後で変更するので問題ありません。
参照から保存先を選びます。デフォルトで問題ないはずです。
転送対象ファイルのみ適応以外に新規の方もチェックしてください
完了を押せば…あなたのサイトにもCSSが導入されます。
いきなりサイトが変になったので焦った人も居るかもしれません。
図のように選択してサイトスタイルを編集します。
この画面を使って自由にスタイルシートを設定します。
いらないものは削除してください。
足りない物は追加すればOKです。
再編集する場合は編集をクリックすれば出来ます。
どれでもいいので選択して編集を押してみてください。
画面左上HTMLタグのスタイル設定が
今までやってきた編集1と同じ感じです。
クラスとIDもありましたよね?
個別に設定する事だけは出来ません。
下のは見覚えありますよね?
そう同じ画面です。
今まで使ってた画面です。
少し画面が変わるだけで同じ事をするだけです。
好きなように設定して素敵なスタイルシートを作成してくださいね。
作成し終わったらHTMLソースを確認してください。
画面上部に以下のタグが埋め込まれました。
これだけで沢山のスタイルシートを表示出来る訳です。
便利でしょ?
ちなみにスタイルシートというのがどういうものか?
見てみましょうね。
ホームページデーターの入ってるフォルダを開いてください。
拡張子.cssと言うファイルがあるはずです。
ここにCSSの設定が書き込まれています。
中身もみてみましょうね。拡張子を.txtに変更します。
こんな感じで書かれています。
どこかで見たような…と思った人いますか?
そうHTMLタグに設定した時に上部に挿入されているものと同じです
それをcssファイルとしてまとめてあるだけですね。
このようにメモ帳からでも作成出来るというわけです。
ちゃんと拡張子.cssに戻しておきましょうね。
使っている内に慣れてきます。
一度使えば手放せなくなるぐらい使えます。
後は…皆で工夫してみてください。
HOME BACK
パソコン初心者講座ぱそおーる