用語集

CSS とは?

投稿日:2018年3月9日 更新日:

CSS とは?

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

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

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

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

HTML とは?

2018.03.09

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の指定だけで見た目を変えることができます。

CSS の仕様

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

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

-用語集

執筆者:fitallright

関連記事

HTML とは?

目次HTML とは?HTML の例HTML の仕様参考 HTML とは? HTML は、正式には HyperText Markup Language といい、「ハイパーテキストを記述するためのマークア …

hostsファイルとは?

Windows, Mac, Linux どれのOSであっても、hostsというファイルを持っています(このファイル名に拡張子はありません)。 目次役割DNS というシステムhostsファイルhosts …

FTP とは?

目次FTP とは?レンタルサーバーを利用するにあたっての主な用途2つの転送モードFTP の問題点と、通信の暗号化FTP クライアントツール FTP とは? FTP (File Transfer Pro …

robots.txt ファイルとは?

目次1. robots.txt ファイルとは?2. 使い方ファイルの設置記述例 1. robots.txt ファイルとは? robots.txt ファイルとは、「Google などのクローラやボットに …

URL とは?

目次URL とは?URLの構成要素構成要素の説明仕様書 URL とは? URLとは、リソース(HTML文書や画像など)を特定するための識別子です。 ブラウザのアドレスバーに表示されているのがURLです …

ロリポップ!「スタンダードプラン」
さくらのレンタルサーバ「スタンダードプラン」