はじめに
- この記事は5分あれば読めます
- 1つ目の記事（HTMLについて）はこちら
どんな人に向けた記事？
- CSSという単語の名前は知っているが、具体的に何かは分からない人
この記事で分かること
- CSSが何なのか、ざっくりと理解できる
ここから本編!!
Webサイトの見た目ってどう変えるの？
Webサイトは、大きく分けて3つの要素で構成されています!!
-
HTML: Webサイトの骨組みを作る（例：文章、画像、見出しなど）
- ↑説明した記事はコレ
-
CSS: Webサイトの見た目を整える（色、大きさ、配置など）
- ↑今回はココ！
- JavaScript: Webサイトに動きをつける（アニメーション、クリックすると動くなど）
CSSってどうやって書くの？
今回はHTMLファイルの中に直接書いてみます!
実際に書いてみた!
前回の記事のHTMLコードに、CSSを追加
- 追加内容
-
<head>タグの中にある<style>から</style>まで。この<style>タグの中に、CSSの指示を書きます
-
<!DOCTYPE html>
<html>
<head>
<title>初めてのWebサイト</title>
<style>
h1 {color: blue;}
p {font-size: 20px;color: green;}
</style>
</head>
<body>
<h1>はじめてのHTML！</h1>
<p>初めて作ったウェブページ！</p>
</body>
</html>
コードについての補足
- font-size
- 文字の大きさを変える
- color
- 文字の色を変える
- 上記のコードであれば…
-
h1 { color: blue; }-
h1タグで書かれた文字の色を青にする
-
-
p { font-size: 20px; }-
pタグで書かれた文字の大きさを20ピクセルにする
-
-
p { color: green; }-
pタグで書かれた文字の色を緑にする
-
-
実際にWebサイトを作ってみよう！
1分でWebサイトを作る!
- 上記の
<!DOCTYPE html>から</html>をコピーする - パソコンに入っている「メモ帳」アプリを開く
- １でコピーしたものを貼り付ける
- 「ファイル」→「名前を付けて保存」で保存
- ファイル名は「index.html」にする
- ファイルの種類を「すべてのファイル」に設定し、文字コードを「UTF-8（下記画像の黄色部分）」にする
- 保存した「index.html」ファイルをダブルクリック
- 下記の画像のように、ブラウザでWebページが表示される
- Webページ完成🎉
最後に
今回の記事では文字の大きさやサイズを変えてみました!
CSSがどのようなものかざっくりと知ってもらえれば幸いです!!