用語集

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

関連記事

no image

ウェブサーバー(Webサーバー)とは?

ウェブサーバー(Webサーバー)とは? ウェブサーバーとは、ウェブサイトを提供するためのサーバープログラムです。サーバープログラムというのは、クライアントからのアクセスを常時待ち、アクセスがあった際に …

HTML とは?

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

hostsファイルとは?

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

PHP とは?

PHP は、プログラミング言語の1つです。 HTML 文書の中に簡単に混ぜることができるので、ウェブページの作成によく使用されています。 ここで詳細は説明しませんが、例えば以下のような記述を行った場合 …

ドメインロック(レジストラロック、トランスファーロック)とは?

ドメインロック(レジストラロック、トランスファーロック)とは、自分が取得しているドメインを第三者によって勝手に他のレジストラに移管されてしまうのを防ぐサービスです。 例えば、お名前.com で何か1つ …

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