初めてのCSS：ウェブページをデザインする最初の一歩
こんにちは。この記事では、ウェブページをもっとカラフルで見やすく、そして楽しいものに変える「CSS」についてお話しします。
1. CSSとは？
簡単に言うと、ウェブページの見た目をデザインするための言葉です。HTMLがウェブページの骨組みなら、CSSはその骨組みに色やスタイルをつけるペンキや装飾のようなものです。CSSは「Cascading Style Sheets」の略で、日本語では「カスケーディング・スタイル・シート」と言います。
2. CSSの書き方
CSSは、HTMLファイルの中に直接書くこともできるし、別のファイルに書いてそれをHTMLファイルに読み込ませることもできます。まずは、HTMLファイルの中に直接CSSを書いてみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>私の初めてのウェブページ</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: Arial, sans-serif;
font-size: 20px;
}
</style>
</head>
<body>
<h1>こんにちは、世界！</h1>
<p>これは私の初めてのウェブページです。</p>
</body>
</html>
ここでは、<style>タグの中にCSSを書いています。具体的には、以下のことをしています：
bodyタグの背景色をライトブルーにしています。h1タグの文字色を白にし、テキストを中央揃えにしています。pタグのフォントをArialにし、フォントサイズを20pxにしています。
3. 別ファイルにCSSを書く
次に、CSSを別ファイルに書く方法を紹介します。CSSファイルを作成し、それをHTMLファイルに読み込ませます。まず、style.cssという名前のCSSファイルを作ります。
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: Arial, sans-serif;
font-size: 20px;
}
次に、HTMLファイルの中でこのCSSファイルを読み込みます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>私の初めてのウェブページ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>こんにちは、世界！</h1>
<p>これは私の初めてのウェブページです。</p>
</body>
</html>
ここでは、<link>タグを使ってCSSファイルを読み込んでいます。href属性にCSSファイルの名前を指定することで、そのファイルのスタイルがHTMLファイルに適用されます。
4. CSSの基本ルール
CSSを書くときの基本ルールをいくつか紹介します。
- セレクター：どのHTML要素にスタイルを適用するかを指定します。例えば、
body、h1、pなどです。 - プロパティ：変更したいスタイルの種類を指定します。例えば、
color（文字の色）、font-size（文字の大きさ）、background-color（背景色）などです。 - 値：プロパティに対して設定する具体的な値を指定します。例えば、
color: white;なら、文字の色を白にするという意味です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSの基本例</title>
<style>
body {
background-color: lightblue; /* 背景色をライトブルーに */
}
h1 {
color: white; /* 文字の色を白に */
text-align: center; /* テキストを中央揃えに */
}
p {
font-family: Arial, sans-serif; /* フォントをArialに */
font-size: 20px; /* フォントサイズを20pxに */
color: darkblue; /* 文字の色をダークブルーに */
}
</style>
</head>
<body>
<h1>CSSの基本を学ぼう！</h1>
<p>CSSはウェブページのデザインを変えるための言語です。</p>
<p>この例では、背景色、文字の色、フォント、フォントサイズを変更しています。</p>
</body>
</html>
練習すればするほど、素敵なデザインができるようになります。
