【コピペOK】HTMLにCSSを埋め込み適用させるサンプルをご紹介

2020年12月6日

こんにちは、リバティエンジニアのFUNA（フナ）です。

現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

この記事はこんな方におすすめ

今回はHTMLにCSSを埋め込み、適用させる方法についてサンプルコードを元にご紹介します。

初心者の方でもわかりやすいように、コピペでも簡単に実装できるようにまとめていますので、どんどん使ってください。

HTMLにCSSを適用させる2つの方法

HTMLにデザインを適用させるためにCSSを使います。

そのCSSをHTMLファイルに適用させるには大きく分けて2つの方法があります。

今回は、前述の「HTMLファイルに直接記述して埋め込む方法」について解説していきます。

では早速HTMLファイルに直接CSSを記述する方法をみていきましょう。

実は、直接CSSを記述する方法にもやり方が2つ存在します。

この方法は、HTMLファイル内の装飾したい要素を囲むタグにstyle属性を加えてその値にCSSを書き込みます。

ポイント

基本構文は<タグ名 style = “プロパティ: 値”>

See the Pen inline-css by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

このやり方だと、要素毎に細かいデザインを適用させることができるので、細かい微調整が可能で柔軟にスタイルを適用できますね。

この方法は、HTMLファイルの<head></head>内に<style>タグを追加して、そこにCSSを埋め込みます。

ポイント

基本構文は<style> 【ここに適用するCSS】 </style>

See the Pen head-in-css by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

外部のCSSファイルを読み込む方法だと、複数のページにまとめてデザインを適用できるというメリットがあるのですが、<style>タグを用いるこの方法では、1ページ毎にデザインを調整することが可能です。

HTMLに直接CSSを埋め込むメリットとしては主に以下のようなことがあります。

基本的には細かい微調整が簡単に行える。ということが大きなメリットですね。

とはいえ、実務では外部ファイルを作成して、読み込むことが多いのでどちらのやり方でもできるようになっておきましょう。

デメリットとしては、HTMLファイルの量が増えてくると、コードが見辛くなってしまうことです。

そのため、CSSの記述方法は上手に使い分けて実装することが、コーディングでは大切になってきます。

今回は、HTMLファイルにデザイン（スタイル）を適用する際の「HTMLに直接埋め込む方法」について解説しました。