CSS HTML Webデザイン

HTMLにCSSを紐付けしたい!タグ内にCSSを読み込む記述をしよう!

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を紐づけてデザインを反映させることができます!

-CSS, HTML, Webデザイン