HTMLに記述した要素をCSSでレイアウト・デザインしたい！
でもどうすればいいのか分からない…
HTMLとCSSの紐づけするには、<head>タグ内にCSSを読み込む記述をします。
簡単なので一緒にやってみましょう！
HTMLファイルとCSSファイルを準備しよう！
まずは、HTMLファイルとCSSファイルをそれぞれ準備しましょう。
下記のHTMLは、今回例として作った<h1>タグと<p>タグを記述したHTMLファイルです。
HTML
See the Pen
by こんぺいとう꙳ 金平しゅがー (@confeitoblog209)
on CodePen.
まず、メモ帳やその他テキストエディタを使って、HTMLファイル（拡張子が.htmlのファイル）を準備してください。
HTMLの基本を知りたい方はこちら
HTMLの基本 書き始めのテンプレートはこれ！基本マークアップ
CSS
See the Pen
by こんぺいとう꙳ 金平しゅがー (@confeitoblog209)
on CodePen.
次に、メモ帳やその他テキストエディタを使って、CSSファイル（拡張子が.cssのファイル）を準備してください。
そもそもCSSとは何か…
HTMLで記述したそれぞれの要素をレイアウト・デザインするためのファイルです。
もっと具体的に言うと…CSSは、文字の大きさ・色を指定したり…文字だけでなく画像や文章の配置なども指定できます。
HTMLにもデザイン機能がないので、WebデザインにはCSSが必要になります。
※正確にはHTMLにもデザイン機能はあります…しかし、HTMLでのデザイン記述することは、現在のHTML仕様では推奨されていません。
HTMLとCSSを紐づけ
See the Pen
by こんぺいとう꙳ 金平しゅがー (@confeitoblog209)
on CodePen.
※上記では、「style.css」という名前でCSSファイルを準備したと仮定しています。
実際には、自分が準備したCSSのファイルパスを記述してください。
HTMLとCSSの紐づけには<head>タグ内に、
htmlの記述<link rel="stylesheet" href="CSSファイルへのパス">
と記述をしてあげます。
CSSファイルへのパスの部分に、自分が準備したCSSの格納されているパスを記述することで、HTMLにCSSを紐づけてデザインを反映させることができます！