CSSとは？

CSSとは、Cascading Style Sheetsの略で、HTMLやXMLなどの文書の外見を指定するためのスタイルシート言語です。HTMLはWebページの構造を定義する言語であり、CSSはそのHTMLに対してデザインや表現を行うための言語です。

CSSを使うことで、Webサイトの見た目を自由自在にカスタマイズすることができます。例えば、文字の色やサイズ、背景色、レイアウトなどを指定することができます。

CSSの基本構文

CSSは、「プロパティ: 値」という形式のルールを作ることで、Webページの見た目を指定します。例えば、次のように「color」プロパティに「red」の値を指定することで、テキストの色を赤色に変更することができます。

p {
  color: red;
}

このルールは、<p>要素に適用されます。つまり、HTMLの中に <p> 要素がある場合は、その <p> 要素のテキストが赤く表示されます。

CSSでは、ルールを適用する要素を指定する「セレクタ」と呼ばれるものがあります。セレクタには、HTMLのタグ名やID、クラスなどを指定することができます。

例えば、次のように、 IDが "header" の要素に "background-color: gray;" のスタイルを適用することができます。

#header {
    background-color: gray;
}

また、クラスを指定する場合は . を用いて表します。例えば、 class="box" というクラスを持つ要素に適用する場合は、次のようになります。

.box {
  background-color: #ddd;
}

CSSには「カスケーディング」という特性があります。これは、同じ要素に対して複数のスタイルがあった場合、どのように適用するかが決まる仕組みです。

CSSでは、次の3つのルールが存在します。

CSSでは、要素には「ボックス」という概念があります。これは、要素に対して、幅や高さ、余白、枠線などがあることを表します。これらは、クラスやIDを指定することで指定することができます。

.box {
  width: 300px;
  height: 200px;
  margin: 10px;
  padding: 5px;
  border: 1px solid #ccc;
}

このように、要素の外側から内側まで、幅や高さ、余白、枠線、パディングの順で指定することができます。

近年、Webサイトの利用環境が多様化してきたことから、レスポンシブデザインという考え方が注目されています。レスポンシブデザインとは、Webページのレイアウトが、デバイスのサイズに応じて自動的に調整されるように設計することです。

レスポンシブデザインには、メディアクエリという機能があります。これは、デバイスの幅や高さに応じて、CSSルールを切り替えることができます。例えば、次のように、デバイスの幅が600px以下の場合にだけ適用されるCSSを指定することができます。

@media (max-width: 600px) {
  .box {
    width: 100%;
  }
}

このように、CSSを使うことで、複雑なレイアウトを実現することができます。

以上、CSSについての紹介でした。CSSを使うことで、Webサイトの見た目を自由自在にカスタマイズすることができます。また、レスポンシブデザインの考え方を取り入れることで、多様なデバイスに対応する設計ができます。

参考リンク：

フルスタックエンジニア。徒然なるままに記事を投稿していきます。日々学習。