ボディ部分の構造

(赤いトマト)
CSSを使ってみる

前回までに作成したページはこれです。

作ってない人は、前のページのHTMLをコピーして、inndex.htmで保存して下さい。
index.html
ブラウザで見ると、できているのは黒い字で書かれた赤いトマトの見出しです
  赤いトマト
です。これを、CSSで,赤い字で書かれた見出しにします。
  赤いトマト

CSSとHTMLの関係

HTMLは、文章等(コンテンツといった方が適当か?)を書きます。
・見出しを<h1></h1>タグなどで書いて
・段落を<p></p>タグでかいて
改行を<br>タグで書いて・・・こうして文章等を書きます。
新聞でいうと、記事を書くことにあたります。
CSSは、この表示を扱います。
・文字の大きさ文字のフォントを決め
・ブラウザに表示する場所を決める等のことをするのです。
新聞でいうと、デザインに当たります。

そこで、CSSを書いたファイルを作り、保存します。
拡張子は「css」と決まっています。ドットの前の名前は自由です。
そして、HTMLの中に、このCSSを使うよと指定を書きます。
やってみましょう。

CSSを作成する

エディターを開いて。ファイル→新規作成 として、何も書いてないファイルを作り
まず、main.css として保存して下さい。
保存する場所は、ここではindex.htmlのあるフォルダと同じフォルダに入れて下さい。

CSSを書く

次のようにCSSを書いて上書き保存します
  h1{ 
    color: red;
  }
名前はmain.css です。
 h1・・・・・・・・・・・・・見出し1(セレクタ:・選択という意味) 
 { ・・・・・・・・・・・・・・ここから
 coler ・・・・・・・・・・色は(プロパティ・属性という意味)
 ;: ・・・・・・・・・・・・・コロン
 red ・・・・・・・・・・・・赤(値)
 ; ・・・・・・・・・・・・・・セミコロン
 } ・・・・・・・・・・・・・ここまで

HTMLにCSSを指定する文章を書き込む

次に、inndex.htmlを書き換えます。
  <link rel="stylesheet" href="css/main.css" type="text/css"> 
を<head></head>の中に書き込みます。
文章を見て下さい。
<link rel="stylesheet" href="css/main.css" type="text/css">
まず、スタイルシートへのリンクですとあり、
つぎに、 href="css/main.css" でcssフォルダの中にあるmain.cssとある場所と名前を指し示しています。
こんなふうになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="keywords" content=",で切って、キーワードを並べる">
<meta name="description" content="ページの内容を短く書く">
<link rel="stylesheet" href="main.css">                   /*   ←ここ     */
<title>赤いトマト</title>
</head>
<body>
    <header>
    </header> 
    <h1>赤いトマト</h1>
    <footer>
    </footer>
</body>
</html>

ブラウザで見てみましょう

ブラウザで見てみましょう。
赤いトマトが赤ければ合格です

プロパティを書き加えることで色々できます。

s下のように書き換えてみよう。
h1{
    color: red;
    background-color: greenyellow;
    font-style: italic;
}
background-coloというのは、文字の背景色です。
フォントスタイルは、文字を太くしたり、斜体にしたりできます。
まず、タグ名を指定し
{}で、始まりと終わりを指定し、その中へ
プロパティ+コロン+値+セミコロン
という風に書いていくのです。

次の問題へ進む