CSS入門

1. CSSの登場

ブラウザーが科学的な目的だけでなく、娯楽目的でも使われるようになった時、すぐに以下のようなマルチメディアが不足していることに気づいた：ビデオ、アニメーション、色、音、透明性など。

最初はこれらのためにたくさんのタグを追加しようとしましたが、新しいタグが何百種類にもなり、HTMLドキュメントの扱いが非常に複雑になるとわかりました。そこで、文書の「装飾」(スタイリング)を内容から分離するというアイデアが生まれました。これがCSSの始まりです。

Cascading Style Sheets (CSS) またはカスケードスタイルシートは、ウェブ開発の主要コンポーネントの1つで、ウェブページの視覚的なデザインを担当します。

CSSは、名前と値を持つプロパティのセットです。ウェブ開発者がそれらのプロパティを指定し、ブラウザがそれらを表示する仕組みです。ほぼすべての要素に対してこれらのプロパティを設定できます。以下はCSSスタイルの例です：

これらのCSSプロパティ（またはCSSプロパティと呼ばれるもの）は100以下です。ただし、それらは巧妙に相互作用し、予想外の効果を生み出すことができます。CodeGymでは、それらを使いこなして、本物の魔法のようなウェブページを作る方法を学びます 🦄。

2. 要素のスタイル

各HTML要素には、style属性を使用して独自のCSSスタイルを指定できます。

例：

      
<p style="color: blue; font-size: 16px;">これはインラインスタイルの例です。</p>
      
    

このスタイルはブラウザに対し、段落の内部テキストを青色で描画し、フォントサイズを16ピクセルにするよう指示しています。

実際にはここに2つの「スタイル」があります：

• color = blue
• font-size = 16px

ただし、それらは1行に指定され、セミコロンで区切られています。

また、たとえば黒い四角形の中に白いテキストを書き込むこともできます。このコードは次のようになります：

      
<div style="width:100%; height:200px;color:white;background-color:black"> 
白いテキストが黒い背景の上に表示されています 
</div>
      
    

3. 色

HTMLを学んだあとにCSSスタイルについて詳しく解説します。でも今日は興味を持ってもらうために色について少し触れましょう。CSSを使ってあらゆる色を指定でき、コンピューターに表示できる色以上の表現も可能です。

CSSでの色は、ウェブページのスタイルの重要な部分となっています。それは視覚的に魅力的で直感的なインターフェースを作成します。CSSでは複数の方法で色を指定できますが、それぞれの方法には独自の特徴と用途があります。

1. 色名 (Color Names)

CSSでは140以上の標準色名がサポートされています。これにより、色を簡単かつ直感的に指定できます。

      
<div style="color: lightblue;"> 青色のテキスト</div>
      
    

よく使われる色の名前：

2. 16進数値 (Hexadecimal Values)

別の方法として、16進数値を使用して任意の色を指定することができます。16百万色以上の色合いを指定できますが、それらすべてに名前を付けることは不可能なので、数字を使用します。

16進数値は、記号#の後に6桁の数字や文字を使用して設定され、赤、緑、青色 (RRGGBB) の強度を表します。

      
<div style="color: #ff0000; background-color: #00ff00;"> 赤色が緑色に表示されています </div>
      
    

このような色指定方法はよく例で見かけると思います。CSSを詳しく学ぶ際にこのトピックに戻る予定です。