今回は、主にWeb制作初心者向けに
HTMLファイルにCSSを当てる方法について、3つの方法を紹介していきます！
CSSは、Webサイトを制作する際の重要な役割を担っているので
ここでしっかり勉強していきましょう！
一緒に練習してみたい方は、ぜひVSCodeなどのエディターを開いて
自分でも記述をしてみてくださいね。
CSSの役割
Webサイトは、HTMLやCSS、JavaScriptなどの言語を利用してできています。
HTMLは、基本的にテキストや表などの表示しかできないので
HTMLだけで記述した場合は、大きさがバラバラだったり白と黒の色しかなかったりして
綺麗なサイトとは言えません。
このバラバラなテキストや表の大きさを揃えたり、逆にあるテキストだけを大きくしてメリハリを持たせたり
テキストや背景などに色をつけたり、そういった装飾の役割をするのがCSSです。
ちなみに、CSSはCascading Style Sheetの略称です。
また、今回は紹介しませんがCSSではアニメーションを作ることもできます。
ここで、少し勉強している人は
「アニメーションって、動きがあるからJavaScriptで実装するんじゃないの？」
と思われたかも知れません。
確かに、JavaScriptを実装することもありますが
実装したいものによっては、CSSの記述だけでできてしまうこともあります。
ということで、CSSの主な役割は
・テキストや表の大きさを変えたり、背景色などを変える
・アニメーションを施す
になります。
CSSは、装飾を加えたりアニメーションを表示したりと、Webサイトの中で重要な役割を担う
CSSを読み込む方法3選
では、CSSの役割がわかったところで、さっそくHTMLにCSSを読み込んでみましょう！
せっかくなので、CodePenを利用して、実際にCSSが当たっている様子を見せながら解説していこうと思います。
CSSを当てる前の状態は、こんな感じです。
See the Pen CSSの当て方（HTMLのみ） by わい (@y_programing) on CodePen.
①linkタグで設定する
1つ目は、「linkタグで設定する」方法です。
最も一般的な方法であり、メリットとしてlinkタグの1行だけ入れておけば、htmlファイルが複数あってもその全てに適応できる点です。
linkタグで設定をする場合は
<link rel=”stylesheet” href=”〇〇.css”>
の形に当てはめていきます。
htmlファイルにstyle.cssを当てたい場合は、<link rel=”stylesheet” href=”style.css”>
reset.cssを当てたい場合は、<link rel=”stylesheet” href=”reset.css”>
と記述します（linkタグを複数入れても問題ありません）。
また、CSSを当てるlinkタグはheadタグの中に入れないと適応されないので、その点も注意してください。
今回は、画面全体の背景をピンクにするCSSを当てていきたいと思います。
style.cssファイルの中に
body {
background: pink;
}を記述し、index.htmlファイルのheadタグ内に<link rel=”stylesheet” href=”style.css”>を書き込みます。
htmlファイルのheadタグの中に、<link rel=”stylesheet” href=”style.css”>が書かれていることを確認してみてください。
See the Pen CSSの当て方（linkタグで当てる方法） by わい (@y_programing) on CodePen.
②styleタグで設定する
次は、styleタグで設定をする方法です。
1番目に紹介したlinkタグと同じで、styleタグを利用する場合もheadタグの中に記述をします。
記述の仕方は、以下のようになります。
<style>
body {
background: pink;
}
</style>ちなみに、この書き方はWordPressでテーマに追加CSSを当てる方法とほぼ一緒の方法です。
テーマに追加CSSを当てることによって、WordPress側でheadタグ内にstyleタグで記述をする処理が行われているんですね。
では、styleタグを利用する方法を実際に見てみましょう。
See the Pen CSSの当て方（styleタグで当てる方法） by わい (@y_programing) on CodePen.
上手く当たっていますね。
③style属性でHTMLのタグに設定する
2番目のstyleタグの場合と、どう違うの？」
と思うかも知れませんが、今回の方法は、style「属性」にCSSを当てる方法で、HTMLのタグ内に記述をします。
実際の例を見てもらった方が早いと思いますので、さっそくコードを書いていきましょう。
<body style="background: pink;"></body>こんな感じで記述します。
styleタグを利用する場合はheadタグの中でないといけませんでしたが、style属性を利用する場合は、適応させたい要素のタグの中に直接書き込みます。
それでは、style属性を書き込んだ例もCodePenで確認してもらいましょう。
See the Pen CSSの当て方（style属性で当てる方法） by わい (@y_programing) on CodePen.
このように、CSSの当て方は色々ありますが
初心者のうちは、まず1つ目の方法を使ってみることをお勧めします。
慣れてきたら2, 3番目の練習をしてみましょう！
まとめ
ということで、今回はCSSを読み込む方法について、3つの方法を紹介してきました。
軽くおさらいをすると
①linkタグで設定する
②styleタグで設定する
③style属性でHTMLのタグに設定する
でした。
このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので
次回の記事もぜひ見てくださいね。
＼ 最新情報をチェック ／
コメント