ホームページのための、もう一つのコードCSSについて:CSSはホームページを装飾するコードです。
CSS装飾は実はわかりやすい

- CSSは、セレクター(何の?)
- プロパティ(どこを?)
- 値(ど~する?)
※CSSは セレクター{プロパティ:値;} が基本的な書き方
CSSを書く前に

CSSのフォルダを作っていくところから始めます。
ホームページの内容をフォルダにまとめよう

ディスクトップ右クリック→フォルダ作成→名前をつけて保存

名前は、この動画ではkuma-siteにします。

前回までに作成していたkuma.html のファイルをkuma-siteに移動(ドラッグ)します。
ファイル名を書き換えよう

- kuma-siteのフォルダを開く
- kuma.htmlのファイル名を書き換える。
ファイル名を書き換える

index.htmlに変更する
index.html とは?

ここまで来たら、一度フォルダは閉じて下さい。
Bracketsを立ち上げよう

タスクバーにあるBracketsアイコンをクリックして開く。
ファイルの場所と名前が変わっているので、ファイルエラーが出ても、気にせず、OKボタンを押す。

Bracketsでフォルダを開こう。
一番上のリンクをクリック。
フォルダを開きます。

フォルダの中からkuma.siteをクリックする

index.htmlをクリックする
外部のCSSファイルをHTMLで読み込む

CSSを使えるようにする。
今回はスタンダードな方法を使います。
外部のCSSファイルを読み込んでHTMLを装飾していく方法です。
外部のCSSを作ろう

Bracketsのサイドメニューを右クリックして新しいファイルをクリック、名称をstyel.cssと入力。
HTMLとCSSを連結しよう

index.htmlをクリックする。
<head>〜</head>の中身を見てみましょう

<title>〜</title>タグの次に、外部のCSSファイルを呼び込むCSSを書き込んで行きます。

エンターキーを1回押し
行が出来たら、linkと書きtabキーを押して下さい。
コードが追加されます。
まだ、この段階では、どのコードを読むか指定されていません。

href=""のところに入力します。

先程作ったstyle.cssを入れるのですが、そのままいれても良いですが、最初のsを入れるだけで候補が出てきます。
CSSファイルの中身を作ろう

Bracketsの作業中のファイルの横の箱をクリックします。
画面を分割して使うことができるボタンです。
3パターンから選ぶことが出来ます。
今回は上下分割を使います。
style.cssをドラッグで「下」に持ってくる。
CSSファイルを作る方法
CSSファイルを作る時のお約束。
1行目に文字コードを書くということ。
CSSの一行目には文字コードを書きます
@マークを入力する。

Bracketsが@マークに続く候補としてあげてくれる。
ここではcharsetを選択。

半角でスペースをいれダブルクォーテーションを入れる。
文字コードを書こう

HTMLでも指定されているので、同じようにする。

CSSにもUTF-8を設定したら、セミコロンを入力して、文字コードは完了。
実際にCSSを書いてみよう
ライブプレビューを開いておこう
大見出しの文字を赤くする文字を書いてみよう

文字を一文字入れると、候補を出してくれます。

ファイル保存のキホンは「すべて保存」!

次回は、もっとカッコよく仕上げよう
CSSにおいても、コードの仕組みを知ることは、とても大事です。
来週は、クマのプロフィールをHTMLとCSSでもっとかっこよくして見ましょう。
では、bye bye。
コメントをお書きください