レッスンお疲れさまでした。

本日は、HTMLの復習とCSSに関して行いました。

【HTML復習】

htmlは、文章の論理構造を表現します。

のように、カギカッコで囲まれたものがタグです。

<開始タグ>とが、基本的にひとセットになります。

開始タグと終了タグに囲まれた中は、見やすくするように字下げ(インデント)しましょう。

タグはいろいろな種類があるので、文章構造を考え、それにあったタグを使いましょう。

【CSS】

CSSは、見た目のデザインを表現します。

cssの書く場所は、以下の3箇所に書くことができます。

 1. style属性でタグに直接書く

 2. style要素でheadタグ内に書く

 3. link要素で外部ファイルに書く

1. と2. の書き方は、htmlの中にcss(文章構造とデザイン)が混ざってしまうので、3. の書き方で、cssを外部ファイルとし、文章構造とデザインを分けましょう。

cssの書き方は下記のように書きます。

 どこの{ 何を: どうする }

 

 「どこ」をセレクタ(h1など)で指定します。

 「なに」をプロパティで指定します。

 「どうする」を値で指定します。

 セレクタ{ プロパティ: 値 }

 

 具体的に、h1の文字の色を赤くするには、

 h1{ color: red }

 のように書きます。

スペースや改行は人が見たときに見やすくするためなので、あってもなくてもOKです。

 h1 {color:red}

 h1 { color: red }

 h1 {

  color: red

  }

CSSは、見た目のデザインを表現しますが、cssをなにも指定していないのに、h1の文字が大きくなったり、余白が開いたりします。

これはブラウザが自動的に設定しているからです。

自分好みの文字の大きさや余白にするには、ブラウザが自動で設定するcssをクリアする必要があります。

ひとつひとつクリアすると大変なので、リセットcssを使うと便利です。

リセットcssは、ネットで検索すると様々なものがあります。

ex05で使用している、reset.css

http://yuilibrary.com/yui/docs/cssreset/

ブラウザで自動設定される内容をクリアする

ex06で使用している、normalize.css

http://necolas.github.io/normalize.css/

ブラウザで自動設定される内容をクリアするが

必要な部分は残し、不要な部分をクリアする

ex07で使用している、sanitize.css

http://jonathantneal.github.io/sanitize.css/

ブラウザで自動設定される内容をクリアする

HTML5やモバイル環境にも対応

などがあります。

これから新しくWebサイトを作るのであれば、HTML5やモバイル環境にも対応したsanitize.cssを使うと良いでしょう。