CSSをHTMLに適用する方法【3パターン】 TECH

CSSを使いたいけど、どうやったら使えるようになるんだっけ。

そういったお悩みをお持ちの方に向けて、この記事では解説していきます。

CSSとは

Cascading Style Sheetsの略で、Webページの装飾をするためのスタイルシート言語です。

CSSはHTMLと組み合わせて使用します。

CSSをHTMLに適用する方法は3パターンあります。順に解説します。

スタイルを記述したCSSファイルをHTMLとは別に作成し、HTMLファイルからlinkタグを使って、CSSファイルを指定して呼び出す方法です。

この方法はCSSを別ファイルにするので、HTMLが見やすくなることやCSSを使い回すことができるといったメリットがあります。

基本的にこのやり方でCSSを適用するのが一般的です。

この方法を外部スタイルシートと言います。

書き方は下記のような感じ。

<head>
  <link rel="stylesheet" type="text/css" href="〇〇.css">
</head>

p{
  color: red;
}

ファイルの指定方法は、相対パスでも絶対パスでもOKです。

HTMLファイルで、styleタグを使用してスタイルを記述する方法です。

この方法は、スタイルの適用がすぐ出来る、ページの読み込みが多少速くなるなどあのメリットがあるかと思いますが、基本的にこのやり方はあまり使わない場合が多いです。

この方法を内部スタイルシートと言います。

書き方は下記のような感じ。

HTML

<head>
  <style type="text/css">
  p{
    color: red;
  }
  </style>
</head>

HTMLファイルで、スタイルを適用したいタグにstyle属性を追加してスタイルを記述する方法です。

この方法は、一部分のスタイルだけ変えたい、応急的にスタイルを変えたい時などは使うかもしれませんが、基本的に使わない場合が多いです。この方法を使う時は、ダメなコードが出来上がってしまってると思いましょう。

この方法をインラインスタイルと言います。

書き方は下記のような感じ。

HTML

<p style="color: red;"></p>

CSSを適用する際には、注意しなければいけない事がいくつかあります。

HTMLからCSSファイルを呼び出す時に、半角の文字・スペースを使っているか

ブラウザによって、デフォルトで適用されているCSSがある

外部スタイルの指定方法は、絶対パスまたは相対パスを使う

CSSの適用され方には順番がある

CSSの書き方、HTMLの書き方に間違いがあると適用されない

場合によって、CSSが適用されないやCSSが思ったように適用されてないとなる場合があります。

今回3パターン、CSSの適用方法を紹介しましたが、最初に紹介したHTMLからCSSファイルを呼び出す方法を使う事が多いので、そのやり方には慣れましょう。

CSSが適用できるようになったら、色々なスタイルの付け方の方法を学んだり、どうやったら効率良いスタイルになるかを考えたり、CSSのフレームワークを学んでいくようにしていくと良いでしょう。