概要

CSSの概要

CSS の機能

html で記載したドキュメントを装飾することができます。装飾前の HTML とそのブラウザでの表示を下記に示します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Example Page</title>
  </head>
  <body>
    <h1>概要</h1>
    <p>pタグ内のサンプルの文章です。</p>
    <p class="class1">クラス属性が設定されたpタグ内のサンプルの文章です。</p>
  </body>
</html>

次に、CSS でスタイルを当てた HTML とそのブラウザでの表示を示します。 style 要素で囲まれた部分に CSS を記載しています。また、２つ目の p 要素にクラス属性を追加していることにも注目してください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Example Page</title>
    <style>
      body {
        font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN",
          sans-serif;
      }
      h1 {
        color: gray;
      }
      p {
        text-align: center;
      }
      .class1 {
        padding: 5rem;
        background-color: #f0f0f0;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <h1>概要</h1>
    <p>pタグ内のサンプルの文章です。</p>
    <p class="class1">クラス属性が設定されたpタグ内のサンプルの文章です。</p>
  </body>
</html>

上の例では、body のフォントに明朝体を適用していますが、子要素の h1 や p 要素のフォントにも同じ明朝体が適用されています。このような特性から、Cascading Style Sheets と呼ばれています。