第4章 CSSで文字スタイルを指定する
| CSSファイルを作成する
|
ウェブページのスタイリング（見栄えの指定）は、HTMLではなくCSSで指定します。 HTMLファイルとは別にCSSファイルを作成して、そのファイル内にCSSソースをまとめて記述します。
CSSファイルを新規作成してみましょう。 テキストエディタを起動して、先頭に以下の一行を記述してください。
CSSソース（base.css）@charset "utf-8"; 記述できたら名前を付けて保存します。 保存する場所は、index.htmlと同じフォルダの中です。ファイル名は「base.css」としてください。 base.cssとしたのは、このCSSファイルがウェブサイト全体の基本スタイルを指定するものになるからです。 ファイル名は自由につけられますが、どんな役割をするのか分かるような名前にしておくと管理がしやすいでしょう。
Windowsのメモ帳で作成している場合には、新規保存の際にファイルの種類は「すべてのファイル」、文字コードは「UTF-8」を選択します。 自動的に拡張子に.txtが選択されてしまって「base.txt」というファイル名で保存された場合には、拡張子を.cssにして保存し直すか、ファイル名をbase.cssという名前に変更してください。
base.cssという名前のファイルが作成できたら、CSSファイルの新規作成は成功です。 CSSファイルでは、ウェブページのスタイルを指定していきますが、この時点ではまだ、文字コードが「UTF-8」であることを宣言しただけです。 また、このCSSファイルと、スタイルを適用する対象となるウェブページとが関連付けられていないので、まだウェブページには何の影響もありません。
▶︎ 変更前を確認する
|
| CSSファイルを作成する
|
このチュートリアルでCSSに初めて触れたという方は、CSSとはどのようなものか簡単に理解しておきましょう。 だいたい分かるという方は、読み飛ばして次へ進んでください。
CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語です。 HTMLで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語のひとつであるCSSが一般的に利用されています。
CSSは、HTMLと組み合わせて使用する言語です。 HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。 ウェブページの背景色や文字色や表示サイズなどのスタイルは、HTMLではなくCSSで指定していくことになります。
CSSでは、スクリーン以外にもウェブページがプリンタで印刷される際の出力スタイル、ウェブページが音声で読み上げられる際の再生スタイルなど、メディアごとのスタイルを指定しわけることができます。
|
まとめ
- ウェブページのスタイリングは、HTMLではなくCSSで指定する
- CSSファイルを作成して、そのファイル内にCSSソースをまとめて記述する
- CSSファイルの先頭では、@charset で文字コードを宣言する
