この講座では、WordPressなどのCMSではなく、あえてHTMLを直接書いてWebページを作る練習を行います。
HTMLを学ぶ意義は次の通りです：
まずはシンプルなテキストをブラウザで表示させてみます。 エディターは標準として Sakuraエディタ を使いますが、受講者の希望でVSCodeやメモ帳を利用しても構いません。
1 <!DOCTYPE html> 2 <html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>テキスト表示実験</title> 6 </head> 7 <body> 8 こんにちは、これはブラウザで表示されるテキストです。 9 </body> 10</html>
タグ解説:
<!DOCTYPE html> … HTML5を宣言
<html> … ページ全体を囲む
<head> … ページの情報をまとめる
<meta charset="UTF-8"> … 文字コードをUTF-8に設定
<title> … ページのタイトルを指定
<body> … 画面に表示される内容を記述する
画像を追加して、自己紹介ページを作ってみましょう。
画像ファイル portrait.jpg を同じフォルダに置いてください。
1 <!DOCTYPE html> 2 <html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>自己紹介</title> 6 </head> 7 <body> 8 <h1>私の自己紹介</h1> 9 <p>こんにちは。私は〇〇です。</p> 10 <img src="portrait.jpg" alt="私の写真" width="200"> 11 </body> 12</html>
タグ解説:
<h1> … 大見出しを表示
<p> … 段落を表す
<img> … 画像を表示（altは代替テキスト、widthでサイズ指定）
次に、CSSを使ってデザインを加えます。背景色や文字色を変更してみましょう。
1 <!DOCTYPE html>
2 <html lang="ja">
3 <head>
4 <meta charset="UTF-8">
5 <title>スタイル付き自己紹介</title>
6 <style>
7 body { background-color: #f0f8ff; font-family: sans-serif; }
8 h1 { color: navy; }
9 p { color: darkgreen; }
10 </style>
11 </head>
12 <body>
13 <h1>私の自己紹介</h1>
14 <p>こんにちは。私は〇〇です。趣味は△△です。</p>
15 <img src="portrait.jpg" alt="私の写真" width="200">
16 </body>
17</html>
タグ解説:
<style> … CSSを記述する
background-color … 背景色を指定
font-family … フォントの種類を指定
color … 文字色を指定
最後に、この講座の告知チラシを作ってみましょう。
画像ファイル Aoi.jpg を利用して、AI美人・葵さんを登場させます。
この講座を受講した成果を美しく飾りましょう。
1 <!DOCTYPE html> 2 <html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>講座チラシ</title> 6 </head> 7 <body> 8 <h1>Webページを作ってみよう！</h1> 9 <p>全3回の講座で、HTMLとCSSを体験できます。</p> 10 <img src="Aoi.jpg" alt="葵さん" width="300"> 11 <p><a href="apply.html">お申し込みはこちら</a></p> 12 </body> 13</html>
タグ解説:
<a href="..."> … リンクを作成する
alt … 画像が表示できないときに代わりに表示する文字
| 項目 | 内容 |
|---|---|
| 長所 |
・軽量で高速、古いPCでも快適 ・日本語に強く、文字化けしにくい ・UTF-8やShift-JISの切替が簡単 ・インストールが簡単（ZIP版あり） ・UIがシンプルで初心者向き |
| 短所 |
・Windows専用（Mac/Linux不可） ・拡張機能は少なめ ・最新の開発支援は非対応 |
| 推奨方針 |
講座の標準環境はSakuraエディタ。 希望者はNotepad++やVSCode、メモ帳でも可。 |
sakura.exe を実行。