HTMLにCSSを適用させる

今まで学習したことを整理する記事。

htmlファイルとcssファイルを別々に作成すると、そのままではブラウザで表示したときの見た目はhtmlファイルだけを表示したときと変わらない。
cssを適用させるにはhtmlファイルにcssファイルを読み込む必要がある。

ファイル名とディレクトリ構造は次のようにし、index.htmlをブラウザで表示した時にstyle.cssが適用されるようにする。

ディレクトリ構造

src
├index.html
└css
  └style.css
index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTMLにCSSを適応させる</title>
  </head>
  <body>
    <h1>見出し1</h1>
    <p class="text1">テキスト1</p>
    <h2>見出し2</h2>
    <p class="text2">テキスト2</p>
  </body>
</html>
style.css
h1{
font-size:30px;
}
h2{
font-size:20px;
}
p{
fomt-size:14px;
}
.text1{
color:#f00;
}
.text2{
color:#0f0;
}

このままではhtmlにcssが適用されていない。
htmlにcssを読み込ませる時は、htmlの<head>タグ内に次のコードを書く。

<link rel="stylesheet" href="cssのファイルパス">

今回読み込ませたいstyle.cssファイルは、index.htmlと同じ階層にあるcssフォルダの一つ下にある。
なので実際にindex.htmlには次のコードを書く。

<link rel="stylesheet" href="css/style.css">

このコードをindex.htmlの<head>タグ内に記述する。

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTMLにCSSを適応させる</title>
  <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1>見出し1</h1>
    <p class="text1">テキスト1</p>
    <h2>見出し2</h2>
    <p class="text2">テキスト2</p>
  </body>
</html>

index.htmlをブラウザで表示してみる。

見出し1
テキスト1
見出し2
テキスト1

htmlにcssが読み込まれてブラウザ上での見た目が変わった。

コメント

タイトルとURLをコピーしました
Close Bitnami banner
Bitnami