Webプログラミングの中で、CSSを使うための３つの設定方法

WebページでCSSを使おうとする時に
以下の３つのパターンがあります。

HTMLの中にCSS用のタグを追加
HTMLのタグの中にCSSを追加
HTMLとは別にCSS用のファイルを追加

この3パターンがある事は頭の片隅に入れて下さい。

ただ、実際に使うのは

HTMLとは別にCSS用のファイルを追加

が多いです。

初心者の方は、このパターンを使うことをオススメします。

それでは、3パターンの違いを見ていきましょう

HTMLの中にCSS用のタグを追加

<style></style>タグを使う

まず、このパターンは、HTMLの中に
styleというタグを使って、その中にCSSを記載します。

<!DOCTYPE html>
<html>
  <head>
   <style>
     body {
       background-color: red;
     }
   </style>
  </head>
  <body>
    <div>１つ目の要素</div>
    <div>２つ目の要素</div>
  </body>
</html>

このようにstyleタグを使って、
HTMLの中に追加します。

   <style>
     body {
       background-color: red;
     }
   </style>

このような使い方ができますが、実際は別ファイルにまとめたりすることが多いので、あまり使われません（このような方法もあることを頭の片隅に入れておくで大丈夫です）。

HTMLのタグの中にCSSを追加

タグの中にstyle=””で追加

これは、上記のstyleタグとは違って、
HTMLのタグの中にstyle=””で追加します。

<!DOCTYPE html>
<html>
  <head>
   <style>
      <link rel="stylesheet" type="text/css" href="sample.css">
   </style>
  </head>
  <body style="background-color: red;">
    <div>１つ目の要素</div>
    <div>２つ目の要素</div>
  </body>
</html>

このようにHTMLの中に

 <body style="background-color: red;">

と記載します。

この方法は、初心者の方には、他のサイトをみると、たまに見かけると思いますが、この次に説明するパターンが主流なので、そちらで覚えてもらえると良いかと思います。

HTMLとは別にCSS用のファイルを追加

CSSだけのファイルを作ります

この方法はCSSのみのファイルを使います。

シンプルな例として、
HTML = index.html
CSS = sample.css
の２つのファイルを例とします。

index.htmlというHTMLファイルの中身です。

<html>
  <head>
   <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>
    <div class="class_div1">１つ目の要素</div>
    <div class="class_div2">２つ目の要素</div>
  </body>
</html>

この中で、
「sample.cssというCSS用のファイルを使いますよ」
という設定が、この部分です。

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

この部分の記載があるので、sample.cssという別ファイルを使うことができます。

このように設定した場合、sample.cssでは、今までの説明で出てきたようなCSSを使います。

 body {
   background-color: red;
 }

このようにHTMLとCSSを分けて、使うことが主流ですので、Webプログラミング初心者の方には、まずは、このパターンを覚えて頂ければと思います。

ちなみに、この別ファイルで行うパターンをイメージしてもらえるように、CSSの別ファイルを複数設定した場合を例にイメージを説明します。

こちらの例は、CSSファイルとして
・sample1.css
・sample2.css
の２つのファイルを使っています。

<html>
  <head>
   <link rel="stylesheet" type="text/css" href="sample1.css">
   <link rel="stylesheet" type="text/css" href="sample2.css">
  </head>
  <body>
    <div class="class_div1">１つ目の要素</div>
    <div class="class_div2">２つ目の要素</div>
  </body>
</html>

この内容の時に実際のフォルダ（ファイルの置き場所）はこのようになります。