連載
» 2016年09月12日 05時00分 UPDATE

初心者のためのWebアプリ開発超入門(4):初めてWebデザインする人がマスターしておきたいCSSの基本的な書き方 (1/2)

初めてWebページをデザインするという人に向けて、CSSルールやセレクターの種類や意味、プロパティの設定方法など、基本的なCSSの書き方について解説する。

[金城俊哉,著]

連載目次

※本稿は、秀和システム発行の書籍『JavaScript Web開発パーフェクトマスター(2015年6月27日発行)』の中から、特に@IT読者に有用だと考えられる箇所を編集部が選び、著者及び出版社の許可を得て転載したものです。
ご注意:本稿は、タイトルを除き、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどは@ITのそれとは一致しません。あらかじめご了承ください。


 HTMLドキュメントの本体部分を「どのように見せるのか」を指定するのがCSSです。以前は、HTMLドキュメントだけでWebページの見栄えを決めていたのですが、現在は「Webページの見栄えはCSSで指定する」ことになっています。

 JavaScriptは、HTMLが扱うコンテンツだけでなく、CSSが扱うスタイル(見栄え)も処理します。Webページ上の文字をポイントすると文字の色を赤に変え、その下にメッセージをポップアップさせるような場合には、プログラムでCSSの内容を変更します。

Point CSSによるスタイルの設定

 CSSは、HTMLとはまったく別の言語で、スタイルシート言語に属する言語なので、コードの書き方も異なります。ただし、書き方自体はシンプルで、「どのタグに対して」、「何」を「どのように見せるのか」のように書きます。

 例えば、「h1 { color: red; }」のように書くと、HTMLドキュメントに配置されているすべてのh1要素のテキストが赤で表示されるようになります。

 次に、CSSルールを書く場所ですが、JavaScriptと同様にHTMLドキュメントの内部に記述することができます。この場合は、<style>〜</style>タグを記述して、タグで囲まれた範囲にCSSのコードを書きます。

Notepad++

CSSコードの記述方法

 CSSのコードは、HTMLドキュメントのヘッダー情報内部、またはCSS専用のファイルを作成して、このファイルに記述する方法があります。ここでは、前者の方法から見ていくことにします。

point
  • CSSをHTMLドキュメント内部に書くときは、ヘッダー情報として<style>〜</style>で囲まれた部分に記述する。
  • CSSは、「どのタグに対して」、「何」を「どのように見せるのか」のように書く。対象のタグ {何を : どう見せるのか; }

HTMLのヘッダー情報の中にCSSコードを記述する

 HTMLドキュメントのヘッダー情報として書き込む場合は、<style>〜</style>を記述し、この中に記述します。なお、CSSに対応していないWebブラウザーでCSSのコードがそのまま表示されることを防ぐために「<!--」と「-->」で囲んでコメントアウトするのですが、現在利用されているほとんどのブラウザーがCSSに対応しているので、コメントアウトは特に必要ではありません。

ヘッダー情報の中にCSSのコードを書くためのブロックを作る(CSS1.html)

 なお、<style type="text/css">では、スタイルシート言語としてCSSが使われていることを示しています。JavaScriptのときは<script type="text/javascript">のように書きましたが、typeは要素の内容(正確には「MIMEタイプ」)を示すための属性です。「text/css」は、CSSであることを示すMIMEタイプです。

CSSで見栄えを設定する

 CSSは、「どのタグに対して」、「何」を「どのように見せるのか」といった形式で、次のように記述します。

CSSルールの書き方

 冒頭の例では、<h1>〜</h1>でマークアップされた範囲の文字を赤で表示するために、次のように記述しています。

h1 { color: red; }

冒頭のHTMLドキュメントをWebブラウザーで表示すると、次のようになります。

ブラウザーで表示したところ

 ここでは、見出し1を設定するh1要素に対して、文字を赤で表示するためのCSSのコードを記述してみました。簡単な設定ですが、CSSではこのような方法を使ってHTMLドキュメントの見栄えを設定していきます。

       1|2 次のページへ

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。