Web

CSS とは?

投稿日:2022年10月20日 更新日:

1. CSS とは?

CSS は、HTMLで記述された文書に対して「どのHTMLタグをどのような見た目にするか?」を指定するためのスタイルシート言語です(これはかなり簡略した説明です)。実際には、HTMLのタグ名だけでなく、タグの属性に対しても装飾を指定することができます。

HTMLによって文書の各要素に「意味・構造」を持たせた上で、その要素に対して「見た目」を指定するのが CSSです。HTMLとCSSで役割を分担することにより、メンテナンスがラクになります。

そして、HTML とは? でも説明していますが、HTMLのタグと CSSの記述の両方を読み込んで、HTML文書に CSSの内容を反映してくれるのが「Webブラウザ」と呼ばれるアプリケーションです。具体的には、Chrome, Firefox, Edge, IE などがあります。これらのアプリケーションは、インターネット上から目的のWebページを閲覧する時に使用しますが、Webページを表示する度にこのような処理を行っているのです。

Webブラウザの動作
Webブラウザの動作
(実際には画像ファイルやJavaScriptファイルなどもあります。)

2. CSS の例

例えば、箇条書きしたいところをHTMLで以下のように書いたとします。

<ul class="foo">
  <li>晴れ</li>
  <li>曇り</li>
  <li>雨</li>
</ul>

これをこの画面にそのまま記述すると、以下のように表示されます。

—– ここから —–

  • 晴れ
  • 曇り

—– ここまで —–

では、以下のようなCSSを記述した場合はどうでしょうか?
(ここでは詳しく説明しませんが、class属性に”foo”が指定された ul要素に対して見た目の定義を行っています)

ul.foo {
  list-style: none;
}
ul.foo {
  margin: 20px 0;
  padding: 1em 1em 1em 2em;
  background-color: #f9f9f9;
  border: solid 1px #eaeaea;
}
ul.foo > li:before {
  content: "●";
  color: orange;
  font-size: 50%;
  position: relative;
  bottom: 0.3em;
  right: 0.7em;
}

画像で申し訳ないのですが、以下のような表示になります。

このように、HTMLを変更することなく、CSSの指定だけで見た目を変えることができます。

3. CSS の仕様

CSS の仕様書はとてもたくさんあります。というのも、CSS には多くの機能があり、機能によって仕様書が分かれているからです。
以下のページで仕様書を一覧することができますが、いくつあるのかよく分からないくらいあります。

詳しく知りたい方は、以下の文書から読むことをお勧めします。

4. 関連記事

HTML

HTML とは?

2022.10.19

CSS については、これより詳しい記事も書いています。

CSS

CSS の基礎

2017.06.20

📂-Web
-

執筆者:labo


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

Chrome

Chrome のタブをグループ分けして使う

Chrome ブラウザのタブをグループ分けしながら使う手順を紹介します

Web

Webページ上のコピーしずらい文章をコピーする

Webページ上のコピーしずらい文章をコピーする方法を紹介します。

ウェブブラウザのリロード処理

目次1. ウェブブラウザの「リロード」は普通のアクセスとは違う!2. もう一つのリロード3. 表にまとめてみました4. おまけ5. おまけ2: Chrome でのリロード操作6. 参考 1. ウェブブ …

WordPress

WordPress の推奨環境

WordPress を動作させるための推奨環境については、以下のページに載っています。 About » Requirements — WordPress 最初に、 To run WordPress w …

Web Vitals

Web Vitals patterns の Responsive Images を試してみました

Web Vitals patterns に載っている「Responsive Images」を実際に試してみました。