こんにちは！今日は、ウェブサイト作りの基本となるHTMLとCSSについて、わかりやすくご説明します。
パソコンは毎日使っているけれど、ウェブサイト作りは初めて...という方にぴったりの内容です。
そもそもHTMLとCSSって何？
まずは身近な例で説明しましょう。
HTMLは、お家を建てる時の設計図のようなものです。
「ここに部屋を作る」「ここにドアをつける」というように、ウェブページの基本的な構造を決めます。
CSSは、その家の内装や外装を決めるようなものです。
「壁の色は何色にする」「カーテンはどんなデザイン」というように、見た目を整えます。
HTMLの基本
HTMLは、実は私たちが普段使う文章に、ちょっとした印をつけていくだけなんです。
例えば、見出しをつけたい時は：
```html
<h1>わたしの手作りケーキ日記</h1>
```
段落を書きたい時は：
```html
<p>今日は初めてシフォンケーキを焼きました。</p>
```
このように、始まりと終わりに印（タグと呼びます）をつけるだけです！
CSSの基本
CSSは、HTMLでつけた印に対して、「こんな風に見せてね」というお願いを書いていきます。
例えば、見出しを赤色にしたい時は：
```css
h1 {
color: red;
}
```
文字を大きくしたい時は：
```css
p {
font-size: 18px;
}
```
実際にやってみましょう！
まずは簡単な自己紹介ページを作ってみましょう。
以下のコードをメモ帳ソフトにコピーして、ファイル名「mypage.html」、ファイルの種類「すべてのファイル」で保存してください。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>わたしの自己紹介</title>
<style>
h1 {
color: #ff6699;
text-align: center;
}
p {
color: #333333;
font-size: 16px;
line-height: 1.8;
}
</style>
</head>
<body>
<h1>わたしの自己紹介</h1>
<p>はじめまして！趣味は料理とガーデニングです。</p>
<p>これからウェブサイト作りを勉強していきます。</p>
</body>
</html>
```
このファイルをダブルクリックすると、ブラウザで開くことができます！
まとめ
- HTMLは文章に「印」をつけて、構造を作ります
- CSSはその「印」に対して、デザインの指示を出します
- 難しく考えずに、少しずつ試してみましょう
ウェブサイト作りは、最初は少し戸惑うかもしれません。
でも、お料理のレシピと同じように、手順を1つずつ覚えていけば、必ず上手くいきます。
一緒に楽しく学んでいきましょう！
・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・
【PR】
