レッスンお疲れさまでした。
本日は、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を使うと良いでしょう。