デモ用ページ
No.1 プログラミング言語一覧
【1.HTMLとCSS】
HTMLやCSSは、Webサイトを作成することができ、特に静的なサイトをつくることが可能。
【2.PHP】
PHPはWebアプリ開発用言語で、PHPで作られたECサイトやSNSは多くある。特に、Wordpressが有名である。
【3.JavaScript】
JavaScriptは、例えばクリックしたときに画面上に変化をを起こすなどの、ユーザーの動作によってWeb画面に変化を加えることが可能となる。
【4.jQuery】
jQueryはJavaScriptを簡単に記述できるようにしたもの。少ないコードでさまざまな表現を安全に実行できる。
【5.Python】
PythonもWebアプリを開発することが可能。PythonはWebアプリ開発だけでなく、AIのための機械学習にも多く使われている。
【6.Swift】
SwiftはAppleが開発したプログラミング言語。Mac・iPhone・iPad・Apple Watchなど、さまざまなApple製品用のアプリケーションを開発することが可能。
【7.Go】
GoはGoogleが開発したプログラミング言語。YouTubeやメルカリなどのWebアプリに採用され、規模の大きいシステム開発に最適。
No.2 HTML/CSSとは？
1. HTMLはWebサイトの骨組み
2. CSSはWebサイトの装飾
Break 1 (Webマーケティング)
どの画像が最も会員登録を集めたか？
No.3 HTMLの構成
No.4 作りたいサイトのレイアウトを図示する
サイトのレイアウトを紙などに描き出してみる。
Break 2
効果的なコピーライティングとは？ （No.1）
1.数字を挿入
（例）
「会員登録」→「30秒で会員登録」
2.比較する
（例）
「他社より〜」
3.タイミングを記載
（例）
「今だけ〜」「残り〜」
No.5 HTMLのタグ（要素）一覧
1.<h〜></h〜>・・・文章の見出し用タグ。<h1></h1>、<h2></h2>、<h3></h3>など。
（例）
<h1>今日の天気</h1>
2.<p></p>・・・文章の段落用タグ。
（例）
<p>今日の天気は晴れです。明日の天気も晴れです。</p>
3.<br>・・・文章の改行用タグ。
（例）
<p>今日の天気は晴れです。<br>明日の天気も晴れです。</p>
4.<span></span>・・・単語や短い文をグループ化し、横に並べるタグ。
（例）
<span>GOOD</span><span>BAD</span>
5.<a></a>・・・リンク用タグ。
（例）
<a href="URL" target="_blank">YouTube</a>
6.<img>・・・画像用タグ。
（例）
<img src="http://enschola1..." alt="〜のロゴ" title="ロ
ゴ">
7.<div></div>・・・文章や画像をグループ化するタグ。
（例）
<div>
<p>今日の天気は晴れです。明日の天気も晴れです。</p>
<img src="画像" alt="〜のロゴ">
</div>
8.<section></section>・・・「section」には「節」や「章」という意味があり、見出しのある文章の章や節目を表現する際に使用。
（例）
<section>
<h1>今日の天気</h1>
<p>今日の天気は晴れです。明日の天気も晴れです。</p>
</section>
9.<article></article>・・・「article」には「記事」という意味があり、サイト内で独立したコンテンツをグループ化する際に使用。
（例）
<article>
<h2>今日の天気</h2>
<p>今日の天気は晴れです。明日の天気も晴れです。</p>
</article>
10.<aside></aside>・・・「aside」は補足や脚注、用語の説明など、本筋とは別に触れておきたい内容を含んだ部分を表す。
（例）
<aside>
<h2>脚注</h2>
<p>タグ・・・〜〜〜。</p>
</aside>
11.<ul><li></li></ul>・・・ulとliは順番のないリスト用タグ。
（例）
<ul>
<li>りんご</li>
<li>みかん</li>
</ul>
12.<ol><li></li></ol>・・・olとliは順番のあるリスト用タグ。
（例）
<ol>
<li>りんご</li>
<li>みかん</li>
</ol>
13.<nav><ul><li></li></ul></nav>・・・「nav」はサイトのメニュー部分を示す際に使用するタグ。
（例）
<nav>
<ul>
<li>ホーム</li>
<li>お知らせ</li>
<li>お知らせ</li>
</ul>
</nav>
14.<table><tr><th></th><td></td></tr></table>・・・「table」は表を作成する際に使用するタグ。「tr」は行を作るため、「th」は見出し用、「td」はデータ用タグ。
（例）
<table>
<tr>
<th>氏名</th>
<td>山田 太郎</td>
</tr>
<tr>
<th>年齢</th>
<td>25歳</td>
</tr>
</table>
15.<head></head>・・・「head」はHTML文書に関するメタ情報を記述するためのタグ。 head内のコードはページが読み込まれた後も表示されず、ページのタイトル情報やCSSやファビコンへのリンク、ページの著者情報などが記述可能。
（例）
<head>
<meta charset="UTF-8">・・・文字コードを指定し、文字化けを防ぐ。
<title>Programming Lesson<
/title>・・・サイトのタイトル
<meta name="viewport" content="width=device-width,initial-scale=1.0">・・・「width=device-width」を記述することで、表示領域の幅を、PCやスマホなどの端末画面の幅に合わせることができる。また、「initial-scale=1」は初期のズーム倍率を表します。1に設定することで、初めに表示された時の違和感をなくすことが可能。これらの設定にすることで、どの端末でも表示領域が合わせられ、ズームの倍率もページ全てが見える癖のない初期ズーム倍率になる。
<?php wp_head(); ?>・・・WordPressサイドで用意してくれるhtmlをhead内に出力してくれる関数。例えばそこには、WordPressのプラグインで設定したmeta情報や、プラグイン固有のスタイルシート、javascriptファイルなども出力されることになる。
</head>
15.<body></body>・・・body用タグ。
（例）
<body>〜</body>
16.<header></header>・・・header用タグ。
（例）
<header>
<h1>Programming Lesson</h1>
</header>
17.<main></main>・・・main用タグ。
（例）
<main>
<div>
<h1>〜</h1>
<p>〜</p>
</div>
</main>
18.<footer></footer>・・・footer用タグ。
（例）
<footer>
<p>©2026 社名 All Rights Reserved.</p>
</footer>
19.<!--〜-->・・・コメントアウト
No.6 コードを書くときに便利なショートカット・キー
1.コピー・・・コピーしたい部分を選択して、「Ctrl」＋「c」
2.貼り付け（ペースト）・・・貼り付けたい部分に、「Ctrl」＋「v」
3.全選択・・・ページ全体をコピーしたい場合は、「Ctrl」＋「a」
4.削除・・・削除したい部分を選択して、「Ctrl」＋「x」
5.１つ前の状態に戻る・・・「Ctrl」＋「z」
5.１つ先に進む・・・「Ctrl」＋「y」
5.保存・・・「Ctrl」＋「s」
Break 3
効果的なコピーライティングとは？ （No.2）
1.視覚に訴える
（例）
「あふれるほどの大盛り」
2.聴覚に訴える
（例）
「カリッとした食感」
3.身体感覚に訴える
（例）
「ホッとする空間」
No.7 属性（class属性とid属性）
HTMLのid属性とclass属性の役割は、各タグ（要素）に任意の名前をつけ、名前によって要素を区別すること。
◯class属性・・・同じWebページ内で同じclass属性の値を何度でも用いることができる
（例）
<p>今日の天気は晴れです。</p>
<p>明日の天気は雨でです。</p>
↓
<p class="weather">今日の天気は晴れです。</p>
<p class="weather">明日の天気は雨でです。</p>
◯id属性・・・同じWebページ内でid属性の値が重複してはならない
（例）
<p>今日の天気は晴れです。</p>
<p>明日の天気は雨でです。</p>
↓
<p id="sunny">今日の天気は晴れです。</p>
<p id="rainy">明日の天気は雨でです。</p>