cssについてcssを使ってみるカラムリファレンスカラムの色々ポイント!特集

CSS(スタイルシート)について

前章のHTML編、レイアウト・装飾でご紹介したcss…この章ではcssの用意〜使用例をご説明します。
また、考え方としては『記事』を『レイアウト』の中で、どの様に『装飾』するか…が、自然な流れだと思います。
出来るだけストーリーを考えてから取り組んで下さい。(もちろん順序に決まりはありません)

cssの意味

前章からの説明と多少重複しますが、cssとはカスケーティングスタイルシートと言いファイルの拡張子は『.css』です。
cssの記述方法は3通りありますが、外部ファイルを読み込む方法は1つだけです。
今回は『HTMLをキレイにすっきり書く』という目的のため、外部ファイルを読み込む方法を採用します。

cssファイルの作り方

cssファイル作成したフォルダの中(index.htmlと同じ場所)にメモ帳を作成します。
作り方は『フォルダ内で右クリック⇒新規作成⇒テキストドキュメント』です。
また、この時ファイル名は『style2c.css』に変更して下さい。

cssを宣言する

<meta http-equiv="Content-Style-Type" content="text/css">
を前章で作成したindex.htmlの中の
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
の下に記述しましょう。
意味は、そのページで使われているスタイルシート言語がCSSであるということを、ブラウザに伝えるためのものです。

cssをHTMLに反映させる

<link rel="stylesheet" type="text/css" href="style2c.css" media="all">
を前章で作成したindex.htmlの中の
<meta name="description" content="ホームページを説明する文章……">
の下に記述しましょう。
意味は、スタイルシートとしてstyle2c.cssを読み込む、となります。

まとめ

ソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>タイトル</title>
<meta name="keywords" content="キーワード1,キーワード2,キーワード3">
<meta name="description" content="ホームページを説明する文章……">
<link rel="stylesheet" type="text/css" href="style2c.css" media="all">
</head>
<body>
ブラウザ表示領域
</body>
</html>

事項はcssの記述の仕組みから⇒cssを使ってみる