4. スタイルを書いてみよう&ブラウザで確認！
まずは、簡単なスタイルを書いて、HTMLに適用してみましょう。
HTMLファイルとCSSファイルを用意 既に作成済みの
index.htmlとstyle.cssを同じ階層に配置します。まだ用意していない方は、それぞれ、以下の内容でindex.htmlとstyle.cssと言う名前で新規作成し、同じ階層（フォルダ）に保存しましょう。html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>初めてのHTML & CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>こんにちは、世界！</h1> <p>私のウェブサイトへようこそ！</p> </body> </html>css/* style.css */ h1 { color: red; }ブラウザで確認
index.htmlをブラウザで開いてみましょう。こんにちは、世界！の文字が赤くなっていたら成功です！
5. 試してみよう！スタイルを変更してリアルタイムに反映！
次に、style.css の値を変えることで、見た目がどのように変化するのかを確認してみましょう。
style.cssを開いて編集 まずは、style.cssを開きます。値を変更 例えば、
color: red;をcolor: blue;に変更してみましょう。ファイルを上書き保存するのを忘れずに！ブラウザをリロード
index.htmlを表示しているブラウザの更新ボタン（通常は円形の矢印のアイコン）をクリックするか、F5キー（Macの場合はCommand+R）を押して、ページを再読み込みします。 どうでしょう？今度はこんにちは、世界！が青色になりましたね！いろいろ試してみよう！ 他にも、
font-sizeやbackground-colorなど、様々なプロパティの値を変更して、見た目がどのように変化するか試してみましょう。 例えば、cssh1 { color: blue; font-size: 50px; background-color: lightgray; }このように変更して、ファイルを保存し、ブラウザを更新すると、
こんにちは、世界！の文字が大きくなり、背景に薄いグレー色がつきます。
開発者ツールでさらに効率的に！
ブラウザの開発者ツールを使うと、さらに効率的にスタイルの確認ができます。
開発者ツールを開く 開発者ツールを開いてみましょう。(開き方は、HTMLの準備をしようを参照してください。)
Elementsまたは要素タブを選択 開発者ツールの上部にあるタブの中から、Elementsまたは要素と書かれたタブを選択します。要素を選択
<h1>タグが選択されていることを確認しましょう。選択されていない場合は、左側の<h1>こんにちは、世界！</h1>と書かれている部分をクリックしてください。スタイルを変更 右側の
Stylesまたはスタイルと書かれたペインに、style.cssで指定したスタイルが表示されています。ここを確認すると、style.css:2と書かれた部分にcolor: blue;と書かれていますね？この部分をクリックすると、値を直接変更することができます。例えば、blueの部分をgreenに変更してみましょう。リアルタイムに反映！ 値を変更すると、ブラウザの表示にリアルタイムに反映されます。つまり、ファイルを保存したり、ブラウザを更新したりする必要はありません。
開発者ツールを使うと、このように簡単にスタイルを変更して、見た目を確認することができます。本格的にCSSを学ぶ前に、開発者ツールに慣れておくことをおすすめします。