A080 スタイルシートの記述

エアケント教育コンテンツ > 初級(フロントエンド) > CSS > A080 スタイルシートの記述

スタイルシートの記述方法

今回は実際にCSSを記載する際の方法や書き方の例を紹介いたします。下記のHTMLを例にブラウザ表示のようになるようCSSを追加していきましょう。

<h1>タイトル</h1>
<div>
  <p class="content">本文</p>
  <p>まとめ</p>
</div>

ブラウザ表示

タイトル

本文

まとめ

CSSファイルを作成する

.css拡張子でファイルを作り、そのファイル内にCSSを記載していきます。CSSファイルの読み込み方やファイルの作り方については次の記事で紹介いたしますので、今回は別ファイルから読み込むというやり方を覚えていただければ問題ないです。セレクタの指定方法については前の記事を参照ください。

h1{
  color:blue;
}

.content{
  width:50%;
  background-color:red;
}

別ファイルとして上記内容を記載し、読み込むことによってHTMLにCSSが適応され装飾されます。実際の開発現場では一番一般的な記載方法です。

<style>タグの中に記載する

HTMLとは別にCSSファイルを作るのではなくHTMLファイルの中にCSSを記載することもできます。その際の方法の一つで<style>タグというものを用いることで同一ファイルにCSSを記載しても読み込むことができます。通常は<head>タグの中で<style>タグを用います。

<head>
  <style>
    h1{
      color:blue;
    }
    
    .content{
      width:50%;
      background-color:red;
    }
  </style>
</head>

<h1>タイトル</h1>
<div>
  <p class="content">本文</p>
  <p>まとめ</p>
</div>

上記のように<style>タグの中にCSSを記載することもできます。記載のファイル内でしか使用しないCSSなどを記載する際に用いることがあります。

インラインで記載する

こちらも別ファイルを作成するのではなく、HTMLファイルの中に直接CSSを記載する方法です。

<h1 style="color:blue;">タイトル</h1>
<div>
  <p style="width:50%; background-color:red;">本文</p>
  <p>まとめ</p>
</div>

上記のように指定したい要素に style=”” を記載しその中にCSSプロパティを直接記載することも可能です。

エンジニアからのアドバイス

インラインでの記載や<style>タグを使用すると修正の工数がかかり、第三者がコードを見た際に読みにくくなるケースがあるので、基本的には別のファイルへCSSをまとめて記載し読み込む方法を用いてCSSを記載することが一般的です。開発現場により記載のルールが決まっていることが多いのでコーディング前にマネージャーに確認しましょう。

---