css（スタイルシート）について

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

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

cssの意味

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

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を読み込む、となります。

まとめ

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