【初心者・未経験者向け】CSSをデザインする準備をしようPart2

Webページをデザインするには、まずHTMLでページの基本的な構造を作り、CSSを使ってそれを装飾します。

前回、CSSを書くのに必要なものを紹介しました。ここでは、具体的にCSSをHTMLに適用する3つの方法を見ていきましょう。

HTMLにCSSを適用する方法

一番簡単な方法は、HTMLのタグ内に直接スタイルを書くことです。これを「インラインスタイル」と呼びます。たとえば、テキストを赤色にするには次のように書きます。

<p style="color: red;">こんにちは、CSS!</p>

これで<p>タグの中の文章が赤く表示されていたらOKです！

この方法は手軽ですが、多用すると後でスタイルの変更が大変になるので、基本的には少量のスタイルのみに使用しましょう。

もう少し整理してスタイルを適用したい場合は、HTMLの`<head>`部分に`<style>`タグを追加して、CSSを記述する方法があります。これにより、ページ全体に一貫したデザインを適用できます。例えば、ページ内の全ての段落を青色にするには以下のように書きます。

<head> 
  <style> 
   p { color: blue; 
  } 
  </style> 
</head> 
<body> 
  <p>こんにちは、CSS!</p> 
  <p>これがHTMLの例です。</p>
</body>

これで<p>タグの中の文章が青く表示されていたらOKです！

この方法は、インラインスタイルよりも管理がしやすく、複数の要素に一度にスタイルを適用できるので便利です。

スタイルシートを別のファイルとして保存し、HTMLからリンクする方法が一般的です。CSSを別ファイルに分けることで、スタイルの再利用や、複数のページに一貫したデザインを適用することが容易になります。例として、styles.cssというCSSファイルを作成し、以下のように記述しておきます。

body { 
 background-color: lightgrey; 
} 

h1 { 
color: navy; 
} 

p { 
 color: olive; 
}

そして、HTMLファイルでこのCSSファイルを読み込むには、headタグ内に以下のようにリンクを追加します。

<head> 
 　<link rel="stylesheet”　href="./styles.css"> 
</head> 
<body> 
 　<h1>こんにちは、CSS!</h1> 
 　<p>これがHTMLの例です。</p> 
</body>

本文の背景がライトグレーに、<h1>タグの中の文章がネイビーに、<p>タグの中の文章がオリーブに表示されていたらOKです！

このタグでは、href属性にCSSファイルの名前（相対パスで記述）を指定します。この例では「styles.css」というCSSファイルを紐付けています。これでHTMLとCSSがリンクされ、CSSで指定したスタイルがHTMLに適用されます。

CSSファイルとHTMLファイルを同じフォルダーに保存しておくと便利です。これにより、href属性にファイル名だけを指定することができます。

今後は３つめのファイルを読み込む方法でCSSを書いていきますので、準備しておきましょう！

平社員ハリちゃん

アパレル店員からWEBデザイナーになるため勉強中です。

平社員ハリちゃん

アパレル店員からWEBデザイナーになるため勉強中です。