❶D02より「mask」をダウンロード
❷zipファイルは必ずアンロック！ ダブルクリックして中のフォルダーを外に出す
❸もう使わないmask.zipフォルダーはゴミ箱へ ➡ ゴミ箱も空にしましょう
Bracketsを起動します。
ファイル ➡ フォルダーを開く ➡ maskフォルダーを選ぶ
フォルダー内の index.htmlを開く
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
</head>
<body>
</body>
</html>
<head>
<meta charset="utf-8">
<title>マスクの正しいつけ方</title>
</head>
<body>
<h1>マスクの正しいつけ方</h1>
</body>
HTML
<h1>マスクの正しいつけ方</h1>
<p>まちがい</p>
altテキストも指定しましょう！
画像がエラーで表示されない、目の見えない方の音声ブラウザ（voice browser）、SEO対策として大切です。
HTML
<p>まちがい</p>
<img src="mask1.jpg" alt="マスク1">
HTML
<p>まちがい</p>
<img src="mask1.jpg" alt="マスク1">
<hr>
HTML
<p>まちがい</p>
<img src="mask1.jpg" alt="マスク1">
<hr>
<p>まちがい</p>
<img src="mask2.jpg" alt="マスク2">
<hr>
<p>まちがい</p>
<img src="mask3.jpg" alt="マスク3">
<hr>
<p>せいかい！</p>
<img src="mask4.jpg" alt="マスク4">
<hr>
文字の装飾タグ CSSで装飾「テキストをデザイン」も参考に
「せいかい」の文字にマーカーの装飾をしてみよう
HTML
<p><mark>せいかい！</mark></p>
HTMLに色をつけたりデザインするのがCSSです。
スタイルシートは通常リンクさせて使用しますが、ここでは<head>～</head>内に入れて練習します。
head内に<style>～</style>
HTML
<head>
<meta charset="utf-8">
<title>マスクの正しいつけ方</title>
<style>
</style>
</head>
プロパティの値を :（コロン）で区切って、 ;（セミコロン）で終了
HTML
<head>
<meta charset="utf-8">
<title>マスクの正しいつけ方</title>
<style>
h1{
color:green;
}
</style>
</head>
テキストや画像が左によっているのでセンター揃えにしてみましょう
bodyの背景を変更したり、テキストのサイズを変更してみましょう
HTML
<head>
<meta charset="utf-8">
<title>マスクの正しいつけ方</title>
<style>
h1{
color:green;
}
body{
text-align: center;
background-color: skyblue;
}
</style>
</head>
初めてのコーディングは難しかったですか？
答え合わせは下にあります。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>マスクの正しいつけ方</title>
<style>
h1{
color:green;
}
body{
text-align: center;
background-color: skyblue;
}
</style>
</head>
<body>
<h1>マスクの正しいつけ方</h1>
<p>まちがい</p>
<img src="mask1.jpg" alt="マスク1">
<hr>
<p>まちがい</p>
<img src="mask2.jpg" alt="マスク2">
<hr>
<p>まちがい</p>
<img src="mask3.jpg" alt="マスク3">
<hr>
<p><mark>せいかい！</mark></p>
<img src="mask4.jpg" alt="マスク4">
<hr>
</body>
</html>