スタイルシート言語

出典: フリー教科書『ウィキブックス(Wikibooks)』

スタイルシート言語は、ウェブページやドキュメントのデザインやレイアウトを定義するための言語です。ウェブ開発者は、HTMLを使用してコンテンツを記述し、スタイルシートを使用してコンテンツの見た目を変更できます。スタイルシートは、テキストの色、フォントの種類、背景色、レイアウトなどの属性を定義できます。

以下に、代表的なスタイルシート言語と具体的なスタイルシートの例をいくつか紹介します。

  1. CSS(Cascading Style Sheets) — CSSは、ウェブ開発者によって最も広く使用されているスタイルシート言語です。CSSは、HTMLによって定義された要素に対してスタイルを定義することができます。以下は、CSSを使用してテキストの色、フォント、背景色、余白を定義する例です。
    body {
      font-family: Arial, sans-serif;
      color: #333;
      background-color: #fff;
      margin: 0;
      padding: 0;
    }
    
  2. SCSS(Sass) — SCSSは、CSSの拡張機能を提供する言語で、Sassとも呼ばれます。SCSSは、変数、ネスト、ミックスイン、継承などの機能を提供し、CSSの書き方をより簡潔にすることができます。以下は、SCSSを使用してテキストの色、フォント、背景色、余白を定義する例です。
    $primary-font: Arial, sans-serif;
    $primary-color: #333;
    $background-color: #fff;
    
    body {
      font-family: $primary-font;
      color: $primary-color;
      background-color: $background-color;
      margin: 0;
      padding: 0;
    }
    
  3. Less  — Lessは、CSSの拡張機能を提供する言語で、Sassと同様の機能を提供します。以下は、Lessを使用してテキストの色、フォント、背景色、余白を定義する例です。
    @primary-font: Arial, sans-serif;
    @primary-color: #333;
    @background-color: #fff;
    
    body {
      font-family: @primary-font;
      color: @primary-color;
      background-color: @background-color;
      margin: 0;
      padding: 0;
    }
    

以上の例は、すべて同じ結果を出力しますが、それぞれの言語には異なる構文や機能があります。ウェブ開発者は、プロジェクトのニーズに合わせて、最適なスタイルシート言語を選択することができます。