HTML入門編 外部CSSの呼び出し
スポンサーリンク
はい、やっとですがCSSについてちょっとさわりを。
前回で、とりあえずホームページ作成に必要な記述だけやりました。
この後はそれ以外の部分、デザインでCSSを使用したいと思いますが、それにあたりまして外部から呼び出してみたいと思います。
HTML宣言内に"CSSをリセットする"部分がありましたが、あれと同じ物を正直記載すればOKなんですけど、先のリセットより前に記述してしまうとそのままの通りでリセットされてしまうのであの記述より後に必ず記載して読み込ませましょう。
まぁぶっちゃけ、リセットCSS含む全部を作っちゃってもいいかもしれません。
それにはまだ先がながそうなのでリセット用はお借りしたままにして、新しくサイト専用にCSSファイルを作成します。
CSSファイルは「stylesheet」と呼ばれる物をHTMLファイル内に記述せずに外部ファイルにて保存、読み込ませる事でホームページのデザインを作成します。
では最初に新規でテキストを開きましょう。
開いたら、以下を記述してみましょう
--------------------------------------
body { background-color: #ffff00; }
--------------------------------------
bodyというタグに対して、バックグラウンド(背景色)を#ffff00(黄色)で指定したものです。
カラーコードはこちらとかこちらとか、検索に掛ければいっぱい出ますので確認してみてください。
そのファイルを今回はわかりやすいように｢stylesheet.css｣の名前で保存します。
先日のHTMLファイルの中、リセットCSSの読み込み直後に以下を記述
---------------------------------------
<link rel="stylesheet" type="text/css" href="stylesheet.css">
---------------------------------------
説明は別にいらないかな？
"href="の後は保存したファイル名です。今回はstylesheet.cssですが、ほかに保存していればそちらに名前を変更しましょう。
実際にはどいうなるか以下にいくつかのカラーでサンプルを作ってありますので見てください。
さていかがでしょう。
こうしてbodyタグないの背景の色を変更できました。
これから先、"font"や"h1"タグなどを使用して、文字の色や"h1"というIDタグの場合のみ文字変更なども可能となります。
それはまた後述。。。
