読者です 読者をやめる 読者になる 読者になる

もばいりーde引きこm(y な日常

実際あんまり引きこもってない。

日々気ままにつぶやいています。
Windows・Android・iOSなど中心に、中華端末など情報収集!

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ですが、ほかに保存していればそちらに名前を変更しましょう。

 

実際にはどいうなるか以下にいくつかのカラーでサンプルを作ってありますので見てください。

サンプル1

サンプル2

サンプル3

さていかがでしょう。

こうしてbodyタグないの背景の色を変更できました。

これから先、"font"や"h1"タグなどを使用して、文字の色や"h1"というIDタグの場合のみ文字変更なども可能となります。

 

それはまた後述。。。