①自己紹介・各自の目標
講師の紹介（ポートフォリオ）
②ホームページの必要性
SNSとホームページの違い
③HTML & CSSでウェブページを作ってみよう
HTMLとは
https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/HTML_basics
準備
- 拡張子の表示
- 【Windows】設定＞システム＞開発者向け＞エクスプローラー＞ファイル拡張子を表示する「ON」
- フォルダを作成（例：lesson）
- メモ帳を立ち上げる
index.htmlと名前を付けてlessonフォルダに保存index.htmlをダブルクリックしてみる
HTMLを記述
Step.1 htmlタグ
<!doctype html>
<html lang="ja">
</html>Step.2 headタグ、bodyタグ
<head>
</head>
<body>
</body>Step.3 metaタグ、ページタイトル（titleタグ）
headタグの中に記述する。
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>テストページ</title>Step.4 見出し（hタグ）
bodyタグの中に記述する。
<h1>メインタイトル</h1>
<h2>最上位の見出し</h2>
<h3>小見出し</h3>
<h4>孫見出し</h4>Step.5 画像（imgタグ）
下の画像をlessonフォルダの中にimagesフォルダを作成し、その中にflower.jpgと名前を付けて保存する。
<img src="images/flower.jpg" alt="花" />Step.6 段落（pタグ）
<p>これは段落です。</p>Step.7 リスト（ulタグ、olタグ）
<ul>
<li>たんぽぽ</li>
<li>チューリップ</li>
<li>すみれ</li>
</ul>Step.8 リンク（aタグ）
<p>ここに<a href="https://www.google.com/">リンク</a>を設定します。</p>まとめ
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>テストページ</title>
</head>
<body>
<h1>メインタイトル</h1>
<h2>最上位の見出し</h2>
<h3>小見出し</h3>
<h4>孫見出し</h4>
<img src="images/flower.jpg" alt="花" />
<p>これは段落です。</p>
<ul>
<li>たんぽぽ</li>
<li>チューリップ</li>
<li>すみれ</li>
</ul>
<p>ここに<a href="https://www.google.com/">リンク</a>を設定します。</p>
</body>
</html>CSSとは
https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/CSS_basics
手順
- メモ帳の新規ファイルを作成
- 下記のコードを記述
p {
color: red;
}lessonフォルダにcssフォルダを作成し、style.cssと名前を付けて保存index.htmlをメモ帳で開き（ダブルクリックでは開けないので注意）、headタグの中に下記を記述。
<link href="css/style.css" rel="stylesheet" />- index.htmlを保存し、ブラウザで確認
④CMS・ノーコードツール・WordPressについて
CMSとは
CMS（コンテンツ・マネジメント・システム）とは、ホームページを管理・更新するためのシステムのこと。
CMSを導入することで、ホームページ制作の専門知識がない人でも、簡単にホームページ運営を行えるようになります。
ノーコードとは
ノーコードとは、ソースコードの記述をせずにアプリケーションやWebサービスの開発が可能なサービスのことです。 通常のWebサービスやアプリケーションの開発はソースコードを書いて開発を行いますが、ノーコードはソースコードの記述が不要なため、短期間での開発が可能になります。
https://www.sei-info.co.jp/
ノーコードツール
⑤開発環境を整えよう（「Local」インストール）
- 最初のWordPressサイトを追加しよう
- ファイル群がどこにあるか確認しておく