サイトの作り方#2 ~CSS基礎編~
この記事は2023年7月以前に書かれたものです
前回のおさらい
前回はHTMLの基本的なルール、要素を取り上げました。今回は前回すこーし触れた "CSS" について取り上げます。
CSSとは？
前回はHTMLに様々な "装飾" をするものだと言いました。今回はもう少し深く理解していこうと思います。
具体的に言うと、"HTMLの要素に対して、大きさや色などを変えられる" ツールになります。例えばindex.htmlに以下の記述があったとしましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
<h1>タイトル文字</h1>
<p>本文本文本文本文本文本文本文</p>
</body>
</html>
<html>要素の中に<head>,<body>要素があり、その<body>の中には<h1>,<p>要素が入っている構成になります。
これをそのまま出力すると、もちろんこうなります。
やはり味気ないですよね。今回はこのHTMLをベースにCSSで装飾してみます。
実際にCSSを書く前にまずはファイルの準備をしましょう。
※すでに index.html と style.css がある人は 手順3 まで飛ばしてください。
手順1. HTML、CSSファイルを作る
何と言ってもまずコードを記述するファイルがないと始まりませんね。今回はわかりやすくするためすべて並列でファイルを置いていきましょう。
1 . お好みの場所(おすすめはデスクトップ)に "サイト" というフォルダを作成
2 . "サイト" というフォルダができたら、右クリックをしてから "Codeで開く" を選択
3 . VScodeが開いたらフォルダ内にindex.htmlとstyle.cssのファイルを作成
下の画像のようになったら完了です。
手順2. index.htmlを完成させる
練習用のhtmlをつくります。以下のコードをindex.htmlに書きます。コピペでも構いません。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
<h1>タイトル文字</h1>
<p>本文本文本文本文本文本文本文</p>
</body>
</html>
コードができたら、サイトのフォルダからindex.htmlをブラウザで開いておきましょう。
手順3. style.cssをHTMLに読み込ませる。
今の状態だとindex.htmlには、どこにCSSのファイルがあるのか存在するかも知らされていないので、このまま style.css に書き込んでも何も反映されないことになります。
index.htmlにstyle.cssを読み込ませる設定は以下です。このコードをindex.htmlの<head>要素の中に書き入れます。
<link rel="stylesheet" href="style.css">
html全体は以下のようになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>タイトル文字</h1>
<p>本文本文本文本文本文本文本文</p>
</body>
</html>
中央揃えにしてみる
htmlにcssを読み込ませることができたら準備は完璧です。実際にCSSを書いてページに装飾してみましょう。
装飾してみるといっても難しいことはあれなので、とりあえず画面の中央に文字を寄せてみようと思います。
以下のコードをstyle.cssに書きます。
body
{
text-align: center;
}
htmlの中の"body"という要素に"text-align"（どこ揃えにするか）という設定の値を"center"（中央）にする、と言うことです。設定の値はすべて{ }で必ず囲います。
では反映されているか確認してみましょう。
ctrl + F5 を押すことでブラウザを更新できます。
しっかり中央揃えになっていますね！もう少し装飾を加えてみたいと思います。
文字サイズと色を変えてみる
文字サイズを変える場合もやり方は同様です。変更したいhtmlの要素をしていして、{ }の中に設定を書きます。
今回はタイトル文字(h1)の文字サイズを60px、色を青色にして、普通の文字(p)を18pxにするようにします。
h1
{
font-size: 30px;
color: blue;
}
p
{
font-size: 12px;
}
更新するとこうなります。
しっかり変更されています。
今回はCSSについて取り上げました。実際に使う設定の値はtext-alignやfont-size以外にもたくさんありますが
必要になったときに〇〇の仕方 CSSなどと調べればすぐに出てくるので、一度やってみるといいでしょう。
次回からは本格的にサイトを作るのに役立つ知識（？）などを取り上げます。