CSSの適応方法

こんにちは。Webデザイン初心者のmikulonです。 HTMLの基本的なタグはある程度学習できたので、すこしCSSについて独学で学んだ範囲で記事にしてみようと思います。
これまで書いた記事でいたってシンプルなブログ程度はなんとなく作成できますが真っ白でとてもサイトと呼べるようなものではありません。 CSSを適応することでデザインが華やかになり見やすいサイトになります。 CSSはまだまだ使いこなせていないのですこしずつの投稿になるかと思います。

CSSをHTMLへ適応させるには

CSSをHTMLへ適応する方法は主に3つあります。

• linkタグでフォルダを指定
• HTMLのheadタグの中に直接記載
• HTMLの中に実際に記載

これらの方法でCSSを適応させることができます。

linkタグでフォルダを指定

HTMLのheadタグの中にCSSのフォルダをlinkタグで指定して記載します。 「<link rel=”stylesheet” type="text/css" href=filename.css”>」のようにheadタグ内で記載します。（filename.cssにはCSSを実際に記載しているフォルダ名をいれてください。）
試しに書いたものをブラウザで確認した際にCSSが適応されていないなという場合はだいたい、CSSのフォルダ名やタグの綴りをミスしていることが多いのでよく確認して更新をかけてみましょう。フォルダの階層が違う場合は指定先も確認しましょう。
CSSは主にこの手段を使用することが多いかと思います。HTMLの中に記載すると量によってはごちゃっとしてほかの人が見にくかったり、HTMLを書くコーダーさんとCSSを書く人が違う場合もあります。

HTMLをheadタグの中に記載

別フォルダにCSSを記載せずにHTMLのheadタグ内に直接記載することも可能です。 その場合、headタグ内にこのように記載します。 「<style type="text/css"> *{background-color:#red </style>」 この場合は背景色を赤色に指定しています。
色はブラウザや閲覧方法によっては正しく表示されない場合があるためサイトを参考にしてRGB16進数で記載するのがおすすめです。 WEB色見本　原色大辞典へリンクします。

HTMLへstyleを追記して記載する

HTMLに直接記載する方法もあります。 ほんの一部のみCSSを指定したい場合などに使用します。

<h2 style="backgroud-color: #fff8dc;">こんにちは</h2>

この場合記載したH2の見出しにのみバックグラウンドカラーを指定しています。 ひとつだけ別のデザインを指定したい場合に便利ですね。

おわりに

まずはCSSをHTMLへ適応させる方法をまとめました。 CSSは背景色を指定したり、テキストの間隔やフォントを指定したりと見た目を編集して見栄えをよくするために使用されます。CSSを使いこなせればオシャレなブログを作成したりすることも可能です。ぜひ身に着けたいです。