WEBページのスタイリングに欠かせない「CSS」。
今回は、初心者の方でも理解しやすいように、CSSの基本的な概念とHTMLへの適用方法を詳しくご紹介します。
ぜひ最後まで見ていってください！
CSSとは
CSS（Cascading Style Sheets）は、ウェブページの見た目やレイアウトを指定するためのスタイルシート言語です。
HTML（HyperText Markup Language）がウェブページの構造を定義するのに対し、CSSはその構造に対してデザインや装飾を加える役割を持っています。
CSSを使うことで、以下のようなことが可能になります。
- テキストの色やフォントを変更する
- 背景色や背景画像を設定する
- 要素の位置やサイズを指定する
- ページ全体のレイアウトを調整する
例えば、HTMLだけで書かれたページはとてもシンプルで味気ないものになりますが、CSSを加えることで、見栄えの良い、ユーザーフレンドリーなページに仕上げることができます。
HTMLにCSSを読み込ませる方法
HTMLにCSSを読み込ませる方法はいくつかあります。
主に以下の3つの方法が一般的です。
- インラインスタイル
- 内部スタイルシート
- 外部スタイルシート
以下はブラウザの表示結果です。
今回は文字の色をピンク色に変更しました。
インラインスタイル
HTMLのstyle属性に直接CSSを記述する方法です。
<!--サンプルHTMLコード-->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Aichan Web Design</title>
</head>
<body>
<p style="color: pink">Aichan Web Design</p>
</body>
</html>Webページ内の１カ所だけ装飾したい場合に使います。
複数のタグを一度に指定することはできないため、スタイルを変更する場合はそれぞれの要素に対して個別に設定をし直す必要があります。
内部スタイルシート
HTMLの<head>タグ内に<style>タグを使ってスタイルを記述する方法です。
<!--サンプルHTMLコード-->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Aichan Web Design</title>
<style>
p {
color: pink;
}
</style>
</head>
<body>
<p>Aichan Web Design</p>
</body>
</html>
あらかじめCSSを設定しておくことで、ページ内の各要素に個別にスタイルを指定する手間が省けます。
ただし、スタイルを変更する場合は、各ページのスタイルを一つ一つ修正する必要があります。
外部スタイルシート
こちらが最も一般的な方法です。
別ファイルにCSSを記述し、それをHTMLファイルにリンクさせる方法です。
以下のように<link>タグを使用して外部CSSファイルを読み込みます。
<!--サンプルHTMLコード-->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Aichan Web Design</title>
<link rel="stylesheet" href="css/styles.css">
"CSSファイルの保存場所"
</head>
<body>
<p>Aichan Web Design</p>
</body>
</html><!--サンプルCSSコード-->
p {
color: pink;
}Webサイト全体で統一されたスタイルを適用できるため、変更が必要な際も一度の手間で全てのスタイルを更新することができます。
まとめ
今回は、Webサイトのデザインに欠かせない重要な要素であるCSSの基本とHTMLへの適用方法を紹介しました。
いかがでしたでしょうか？
CSSを使うことで、簡単に色やレイアウトを変更し、好みのデザインにすることができます。
ぜひご自身のサイトにCSSを取り入れて、魅力的なデザインを作り上げてください。
別投稿では、HTML/CSSについての基本知識や、コーディングに役立つ知識についてご紹介していきますのでそちらもぜひチェックしてみてください！
コメント