HTMLで作られた文書の装飾を行う言語は何ですか？

HTML文書を彩る言語：CSS

Webページを作成する際、HTMLは文書の構造を作る骨組みとして機能します。しかし、HTMLだけでは味気なく、魅力的なページを作ることはできません。そこで登場するのがCSSです。

CSSとは？

CSSは「Cascading Style Sheets」の略で、HTMLやXMLなどのマークアップ言語で記述された文書のスタイルを指定するための言語です。つまり、HTMLで表現された文章構造に対して、文字の色や大きさ、背景色、レイアウトなどを細かく設定することができます。

CSSを使うことで、HTML文書に様々な装飾を施すことができます。例えば、

など、Webページのデザインに関するほとんどの要素を制御できます。

CSSは、HTMLファイルとは別に記述することも、HTMLファイル内に直接記述することもできます。ここでは、HTMLファイル内に記述する方法を紹介します。

HTMLのタグ内に直接CSSを記述する場合は、style属性を使用します。

<p style="color: blue; font-size: 18px;">青い文字で、サイズは18pxです。</p>

上記コードでは、<p>タグにstyle属性を追加し、color: blue;で文字色を青に、font-size: 18px;で文字サイズを18pxに設定しています。

HTMLの<head>タグ内に<style>タグを記述し、その中にCSSを記述することもできます。

<head>
  <style>
    p {
      color: red;
      font-size: 16px;
    }
  </style>
</head>

上記コードでは、すべての<p>タグに対して、文字色を赤に、文字サイズを16pxに設定しています。

以下は、簡単なHTML文書にCSSを適用した例です。

HTML CSS 表示結果

HTML	CSS	表示結果
`<h1>見出し</h1> <p>これは段落です。</p>`	`h1 { color: blue; font-size: 32px; } p { color: gray; font-size: 16px; }`	見出しこれは段落です。


<h1>見出し</h1>
<p>これは段落です。</p>


h1 {
  color: blue;
  font-size: 32px;
}

p {
  color: gray;
  font-size: 16px;
}

これは段落です。

CSSはHTMLと合わせて使うことで、Webページのデザインを思い通りに作り込むことができます。CSSを学ぶことで、より魅力的で表現力豊かなWebページを作成することができるでしょう。