Webサイト作成道場④ 〜cssを実際に書いてみよう！〜
前回の道場③はこちら🔽
道場を最初から復習する方はこちら🔽
cssを書く前の準備
今回はcssを書いていきますが、まずはcssを書く準備をしましょう！
htmlは「index.html」という拡張子がhtmlのファイルに書いていきました。
cssは同じhtmlファイル内に書くこともできますが、htmlとcssが混ざっていると分かりづらいため、他のファイルに分割することが多いです。
まずはindex.htmlを作成した時と同様にcssのファイルを作っていきます。
①新規フォルダ作成ボタンをクリック
②フォルダ名を「css」に指定
③新規ファイル作成ボタンをクリック
④cssフォルダの中に「style.css」という名前のファイルを作成
cssはこのstyle.cssファイルに書いていきます！
ただし、このファイルに書いても、このままではhtmlと紐づいておらず反映されません。
htmlとcssを紐づけるために、index.htmlの中身を以下に書き換えてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>道場</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<link rel="icon" href="">
<link rel="stylesheet" href="https://unpkg.com/modern-css-reset/dist/reset.min.css"/>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<h1>こんにちは！</h1>
<p>これは本文です。</p>
<img src="/img/cat.jpg" alt="">
</body>
</html>
追加した部分に関しての説明は、また別の機会にお話しできればと思いますが、
htmlとcssの紐付けに関する記述についてだけ、今回はお話ししておきます！
<link rel="stylesheet" href="/css/style.css">linkタグとは「そのファイル」と「別のファイル」を紐づけるためのタグです。
rel属性とは、紐づけるファイルの種類を表しています。
cssとは（Cascading Style Sheets：カスケーディング・スタイル・シート）の略で、名前の通りスタイルシート（デザインなどを記述するファイル）のため、「rel=”stylesheet”」と記載されています。
href属性はそのファイルの格納場所を記載します。
今回はcssフォルダの中のstyle.cssを指定するため、「href=”/css/style.css”」としています。
これでhtmlとcssの紐付けが完了しました！
見出しタグのcssを書こう！
まずは前回書いた見出しタグ（h1タグ）のデザインを変更していきましょう！
cssを書く際は「タグ名 { }」と記載し、{ }の中にスタイル（デザイン）を記載していきます。
今は{ }の中に「//ここにスタイルを記載していきます。」と書いてありますが、文字の先頭に//をつけるとコメント（デザインではなく注釈）として認識されます。
では、早速スタイルを変更していきましょう！
h1 {
//ここにスタイルを記載していきます。
}文字サイズを変更する場合、「font-size」というプロパティ（スタイルの種類）を使います。
サイズの指定方法は色々ありますが、今回は「px」を使っていきます。
h1 {
//ここにスタイルを記載していきます。
font-size: 24px;
}今度は見出しの文字の色を変えましょう！
背景色のプロパティは「color」を使います。
色を指定するか、もしくはカラーコードを使って記載します。
h1 {
//ここにスタイルを記載していきます。
font-size: 24px;
color: pink;
}最後に見出しの背景に色を変えましょう！
文字色のプロパティは「background-color」を使います。色の指定は文字色と同じです！
h1 {
//ここにスタイルを記載していきます。
font-size: 24px;
color: pink;
background-color: red;
}Challenge
見出しの文字サイズを「48px」にしよう！
見出しの文字色を白（white）にしよう！
見出しの背景色を青（blue）にしよう！
段落タグのcssを書こう！
Challenge
段落タグ<p>の文字サイズを「16px」にしよう！
画像タグのcssを書こう！
画像タグはサイズを調整してみましょう！
画像の横幅を変更する際のプロパティは「width」になります。
横幅は主に「px」もしくは「%」で設定します。
img {
width: 100px;
}Challenge
画像<img>の横幅を300pxに設定しよう！
まとめ
今回はcssでデザインを変更してみました。
最終的に以下のようになりましたか？
※以下のサンプルは見やすいように少し隙間を空けています。
今回は一部のプロパティを紹介してみましたが、最初のhtmlのみの時と比べると少し見やすくなったのではないでしょうか？
このようにcssを使うことでデザイン性が上がり、見やすくなったり、目立たせたり、様々な効果をもたらすことができます。
cssをコピペで使える見出しのデザインサンプル集もあるので、興味がある方はぜひ見てみてください🔽
次から使えるhtml/cssを増やしていくために、サンプルサイトを作りながら少しずつ解説していこうと思います！
POINT
- 文字サイズは「font-size」
- 文字色は「color」
- 背景色は「background-color」
- 横幅は「width」