【HTML&CSS】HTMLファイルにCSSを書き込む方法を紹介！

どうも皆さんこんにちは！

今回は、CSSをHTMLファイル内に書く方法をご紹介します！

何らかの不具合でCSSが読み込めない時や簡易的なCSSを記述する場合に使える技術なので、これからウェブデザインを学んでいく方は余裕があれば頭の片隅でこの技術を覚えておいてください！

また、ウェブデザインをまだ始めたてで、CSSファイルの作成・読み込みがいまいちわからない方でもこの方法でCSSを書くことができるので、いまいちCSSについて理解できていない方は、まずはこの方法でCSSとはどんなものなのかを試してみてください！

HTMLファイル内にCSSを書き込むには、<style>と言うタグを使います。

どのように使うかというと、<head>タグの終了タグと<body>タグの開始タグの間に記述します。

ある程度ウェブデザインを学んでいる方はこの説明でも理解ができるかもしれませんが、急にこんなことを言われても分からない方が大半だと思うので、具体的に説明します。

基本、HTMLを書くときにこのようなコードになっていますよね↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

そして、ここで言う<head>タグの終了タグとは</head>のことです。

<body>の開始タグとは<body>の」ことです。

つまり、このように記述します↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

少し例で<h1>タグにCSSを適用させてみました。

何とこれだけのコードで、HTMLファイルにCSSを書き込むことができます。

もちろん、別にCSSファイルを作成・読み込みをし、CSSファイルにCSSを書き込むのが一番ですが、このような技術もいずれは使うときが来るかもしれないので、予備知識として覚えておいてください！

いかがでしたでしょうか？

CSSファイルの作成・読み込みをしてそこにCSSを書き込むのが妥当ですが、簡易的な検証などをする場合には大きく手間を省くことができるので、是非、覚えてみてはいかがでしょうか？

今回も最後まで見てくれた方、ありがとうございました。

ぜひ、お手隙の際に他の記事もご覧ください！