PiPi_HTML/CSS-intro

HTML/CSS講習会では、実際にWebページを作成することを通してWeb開発の基礎となるHTMLとCSSについて学びます。さらに、JavaScriptを使用して動的なWebページの作成方法や基本的なプログラミングの概念についても触れます。

0.はじめに

0.1. 事前設定

0.2. 環境整備

0.3. Webサイトの仕組み

HTMLとは？

HTML（HyperText Markup Language）は、ウェブページの構造や内容を記述するためのマークアップ言語です。ブラウザ（コンピュータ）は、HTMLファイルに書かれた命令を読み取って、文字、画像、リンク、表、フォームなどを画面に表示します。拡張子は .html で、テキストエディタや専用のエディタ（VS Codeなど）で作成・編集することができます。

CSSとは？

元々のhtmlでは⾒た⽬を指定するための情報もhtmlに書いていました。シンプルなページならいいですが，見た目を充実させようとした途端にメンテナンスが大変になります。そのため見た目に関する情報を完全に分割しました。CSSを編集を編集するだけで見た目を操作できます。

1. 雛形の作成

HTMLの基本的な使い方を確認しながら、Todoリストを表示するアプリのひな形を作成します。

本日終了時のイメージ

本日の目標は次のような基本的な文字、画像の表示を行うことです。

1.1. Hello World!

最初に「Hello, World!」という文字を表示する簡単なWebページを作成します。以下のコードをエディタに入力し、ブラウザで表示してみましょう！

<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <h1>Hello, World!</h1>
</body>

</html>

<!DOCTYPE html>: HTML5であることを宣言します。
<html>: HTML文書のルート要素です。
<head>: メタ情報（文字コードやタイトルなど）を記述します。
<body>: 実際にブラウザに表示される内容を記述します。

このコードをVS Codeの右下部にあるGo LiveをクリックするとWebページが作成され「Hello, World!」という文字が表示されます。

1.2. 見出しと段落（`<h>,<p>`）

画面に「Todo List - Demo」という見出しと「HTML/CSSの基礎用法の演習用」というサブタイトルを書きましょう！次のような表示を書いていきます。

Tip

コメントを書きたいときには、<!–- hogehoge --> のように記述します。 CTRLキーと /キーを同時押しすることで選択した範囲をまとめてコメントアウトできます。便利なのでぜひ使ってみてください。

1.2.1. 見出し（`<h1>~<h6>`）

見出しは<h1>から<h6>までの6段階のレベルがあり、<h1>が最も重要で大きな見出し、<h6>が最も小さな見出しです。

<h1>これは見出し1です</h1>
<h2>これは見出し2です</h2>
<h3>これは見出し3です</h3>

Note

これ以降、扱うHTMLタグは<body>タグ内に記述してください。 <body>タグはHTML文書の中で実際にブラウザに表示される内容を記述するための領域です。見出しや段落、その後に紹介する画像やリンクなどのブラウザに表示する要素はすべて<body>タグ内に配置してください。 見出しのサンプルコードを配置すると次のようになります。

<!DOCTYPE html>
<html>

<head>
</head>

<body>
   <h1>これは見出し1です</h1>
   <h2>これは見出し2です</h2>
   <h3>これは見出し3です</h3>
</body>

</html>

1.2.2. 段落（`<p>`）

段落は<p>タグを使用してテキストをグループ化します。段落は通常、1つのまとまった文章を表します。

<p>これは段落1です。</p>
<p>これは段落2です。</p>

1.2.3. 改行と水平線（`<br>,<hr>`）

少々筆が乗ってしまい長い文章を書いてしまった... <p>タグを途中で改行したいことがありますよね。そういうときは <br>タグを使いましょう！また<hr>を使うことで区切り線をつけることができます。セクションごとに分けるようにしましょう。

<p>
  これは段落1です。とても筆が乗ってしまい、意味のないことを長々と書き連ねてしまいました。<br/>しかしまあ長い文章ですね。それにしても明日の天気はどうなのでしょう。晴れると気分が悪くなりますよね。雨だと頭が痛くなりますよね。全く困ったものです。<br/>そうそう、この文章を読む暇があるならさっさと手を動かしてください。これだから...
</p>
<p>
  これは段落2です。とても筆が乗ってしまい、意味のないことを長々と書き連ねてしまいました。<br />
  しかしまあ長い文章ですね。それにしても明日の天気はどうなのでしょう。晴れると気分が悪くなりますよね。雨だと頭が痛くなりますよね。全く困ったものです。<br />
  そうそう、この文章を読む暇があるならさっさと手を動かしてください。これだから...。<br />
  しかも2回目ですよね?
</p>

きちんと改行されましたね。今回はわかりやすくするために、段落1ではわざと改行していませんが実際にはテキストエディタでも見づらいので<br>タグと同時に改行もしておきましょう。水平線も引けていますか？文章が読みやすくなりましたね。

Note

<br> <hr> のような囲む必要の無いタグ＝⼀つだけで要素が完結するタグは <“タグ種類” /> で完結させる事ができます。他にもこのあと登場する <hr>（水平線） <input>（フォーム入力） <link>（外部スタイルシートなど）などは閉じる必要がありません。それぞれのタグに合わせて正しく書くようにしましょう！

ここまでの実装例

現在、ブラウザ上に次の写真のような画面が表示されていますか？

1.3. リンク（`<a>`）

画面にHTML/CSS講習会の資料(https://github.com/chrom9103/PiPi_HTNL-CSS-intro)へ遷移するリンクを貼りましょう！リンクは<a>タグを使用して作成します。リンク先のURLをhref属性に指定します。

<a href="https://www.example.com">こちらをクリック</a>

上記のコードをブラウザで表示すると、「こちらをクリック」というテキストがリンクとして表示され、クリックすると指定したURL（ https://www.example.com ）に移動します。

実際の例

以下はリンクを使用した例です：

<p>詳細は<a href="https://x.com/piedpiper_agu">X(旧Twitter)</a>をご確認ください。</p>

このコードをブラウザで表示すると、「X(旧Twitter)」というリンクが表示され、クリックすると指定したURLに移動します。

Tip

リンク先を新しいタブで開きたい場合は、target="_blank"属性を追加します：

<a href="https://www.example.com" target="_blank">新しいタブで開く</a>

1.4. 箇条書き（`<ul>,<li>`）

内容や項目が増えてくるとwebページが雑然としてしまいますよね？そんなときに便利なのが箇条書きです。このタグを使えば内容を箇条書きにすることができます。

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
<ul>

<ul>,<li>を使うときには注意すべきことがあります。それはタグの中で区切りを示すタグである<div>や<section>を書かないようにすることです。それならそもそも箇条書きにしないでください。<li>は簡潔に書きましょう。

1.4. 画像（`<img>`）

画像をWebページに表示するには、<img>タグを使用します。画像のソース（ファイルパスまたはURL）をsrc属性に指定し、代替テキストをalt属性に記述します。

<img src="https://www.example.com/image.jpg" alt="サンプル画像">

上記のコードをブラウザで表示すると、指定した画像が表示されます。alt属性は画像が表示されない場合に代わりに表示されるテキストで、アクセシビリティの向上にも役立ちます。

Note

相対パスについて（誰か書いて）

実際の例

実際にwebページに画像を表示していきましょう！！このリポジトリ内に画像ファイルがおいてあります。(assets\TodoImg.png) この画像を以下のように表示されるようにしてください。

Tip

画像のサイズを調整したい場合は、widthやheight属性を使用します：

<img src="assets\TodoImg.png" alt="サンプル画像" width="200" height="100">

または、CSSを使用してスタイルを指定することもできます：

<img src="assets\TodoImg.png" alt="サンプル画像" style="width: 200px; height: 100px;">

画像のリンク化

詳細を表示

画像をクリックすると別のページに移動するようにするには、<a>タグで画像を囲みます：

<a href="https://www.example.com/">
    <img src="assets\TodoImg.png" alt="サンプル画像">
</a>

このコードをブラウザで表示すると、画像がリンクとして機能します。

実装例

現在、ブラウザ上に次の写真のような画面が表示されていますか？

1.5. 表（`<table>`）

HTMLの<table>要素は、データを行と列で構成された表形式で表示するために使用されます。表は、以下のような構造で記述されます：

<table>: 表全体を囲む要素。
<tr>: 表の行を定義する要素。
<th>: 表のヘッダーセルを定義する要素（通常は太字で中央揃え）。
<td>: 表のデータセルを定義する要素。

例

以下は、簡単な表の例です：

<table>
    <tr>
        <th>名前</th>
        <th>年齢</th>
        <th>職業</th>
    </tr>
    <tr>
        <td>山田太郎</td>
        <td>30</td>
        <td>エンジニア</td>
    </tr>
    <tr>
        <td>鈴木花子</td>
        <td>25</td>
        <td>デザイナー</td>
    </tr>
</table>

1.6. ブロック構造

1.6.1. ボックスモデル

1.6.2. HTMLのネスト構造

2. 文字の装飾

2.1. CSSで装飾してみよう

2.1.1. CSSファイルの作成

CSSを使って文字や背景などを装飾するためにCSSファイルを作成します。 HTMLファイルと同じディレクトリ内に style.css を作成します。

現在のディレクトリ構造
  |
  |-images
  |   |-abe.png
  |
  |-index.html
  |-style.css

このようになっていれば問題ありません。

2.1.2. HTMLにCSSを紐づける

HTMLファイルの <head> の中を以下のように書き加えます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>最初のWebページ</title>
<!-- この下の行ダヨ -->
<link rel="stylesheet" href="./style.css">
</head>
...
</html>

2.1.3. CSSを使ってみよう

CSSの書き方は以下のように記述します。

セレクタ {
  プロパティ: 値;
}

セレクタとはスタイルを適応したい対象を選ぶ部分です。プロパティは適応するスタイルを指定します。値は色・幅などを決める部分です。

CSSファイルに以下のように記述してください。

body {
  font-size:  28px;
}

このように指定したクラスのスタイルを変更することができます。ちなみ優先順位は後(最後の行に近い方)に書かれたものからです。

Tip

リンクに仕掛けを施そう！

'''css a { opacity: 1; } a:hover { opacity: 0.5; } '''

:hoverという擬似クラスの一種で、マウスカーソルが重なったときにだけ適応されます。状況に合わせて変化する面白いデザインでWebサイトを豪華にしましょう！

2.2. classとid

対象を指定する方法はさまざまです。しかし今のままでは特定のタグ全てにCSSが一律で適応されてしまいます。これでは単調でダサい Webページができてしまいます。そのためにclassやidを指定しましょう。

2.2.1. class属性

class属性で指定するにはhtmlで<xxx class = “yyy zzz”>のように指定しておく必要があります。class名は自分で決められます。classは、複数の要素で同じものを指定できます。一つの要素で複数のclassを指定できます。クラスは.を使って指定してください。セレクタの頭に.をつけて指定します。

<div class = "xxx">
  これはdivタグだよ
</div>

.xxx{
  color:red
}

2.2.2. id属性

これもほぼ同じようにで指定することができます。id名は自分で決められます。しかしidはユニークでなければなりません。特定のものだけ変えたいときに使用します。クラスは#を使って指定してください。セレクタの頭に#をつけて指定します。

<div id = "yyy">
  これはdivタグだよ
</div>

#yyy{
  color:red
}

Note

<a>タグではidを使おう！ idを使う理由としてはリンク先が複数あると正しく動作しないことがあるためです。ちなみに複数あると一番近いところに飛びます。ページトップは#topで指定することができます。トップに戻るリンクはこれで作成できます。

2.3. 色と背景

文字の色やタグの背景を変えるときもCSSを使用します。これでより目を引くWebページを作成することができます。

<body>
<h1 class="green-txt blue-back">
...
</body>

.green-txt {
color:#5f9440;
}
.blue-back{
  background-color:#276bff;
}

2.4. レイアウト

CSSの魅力はただの装飾だけではありません。レイアウトの調整も行うことができます。

2.4.1. ボックスレイアウト

2.5. フレックスボックス

2.6. グリッドレイアウト

2.7. メディアクエリ

3. JavaScript

3.1. イベントハンドリング

3.1.1 フォーム（`<input>`）

フォームの入力要素を使用して、ユーザーからデータを取得する方法を学びます。以下の例では、テキスト入力フィールドを作成します。

<input id="username" type="text" placeholder="ユーザー名を入力してください">

<input>: ユーザーがデータを入力するためのフィールドです。
- id: 入力フィールドを識別するための属性です。
- type: 入力フィールドにどのような型を受け付けるのか指定します。
- placeholder: 入力フィールド内に表示される初期テキストを指定します。

Tip

他の入力タイプも試してみましょう：

<input type="date" placeholder="日付を選択">
<input type="file" placeholder="ファイルを選択">
<input type="radio" placeholder="ラジオボタン">

3.1.2. ボタン（`<button>`）

ボタンは、ユーザーがクリックして特定のアクションを実行するための要素です。

<button>クリックしてください</button>

このコードをブラウザで表示すると、「クリックしてください」というボタンが表示されます。

ボタンの属性

ボタンにはさまざまな属性を設定できます。HTML/CSS講習会では以下の属性を使用します。

onclick: ボタンがクリックされたときに実行されるJavaScriptコードを指定します。

<button onclick="alert('ボタンがクリックされました！')">アラートを表示</button>

このコードをブラウザで表示すると、名前を入力するフィールドと「送信」ボタンが表示されます。

実装例

現在、ブラウザ上に次の写真のような画面が表示されていますか？

3.1.3. ボタンと関数

<button>タブのonclick属性を使用することにより、ボタンがクリックされたら表が表示されるようにしましょう！

3.1.4. イベントハンドリング

イベントハンドリングとは、ユーザーが行う操作（クリック、キー入力、マウス移動など）やシステムからの通知（タイマーの終了、データの読み込み完了など）に応じて、特定の処理を実行する仕組みを指します。この章ではボタンがクリックされたときに表を表示します。ボタンがクリックされたときにAddPressed()という関数を呼び出しましょう！

<button id="addButton" onclick="AddPressed()">Add Task</button>

これで関数が呼び出されるはずですが、その処理を定義していないので書いていきましょう。関数(function)のようなJavascriptのコードは<script>タグに記述していきます。

<script>
    function AddPressed(){
        text = `<tr>\n` + 
               `<td class="taskElement">タスク0</td>\n` + 
               `<td><button onclick="deleteTask()">Delete</button></td>\n` + 
               `</tr>\n`　+ 
               `<tr>\n` + 
               `<td class="taskElement">タスク1</td>\n` + 
               `<td><button onclick="deleteTask()">Delete</button></td>\n` + 
               `</tr>\n`
               `<tr>\n` + 
               `<td class="taskElement">タスク2</td>\n` + 
               `<td><button onclick="deleteTask()">Delete</button></td>\n` + 
               `</tr>`;
        document.getElementById('result').innerHTML = text;
    }
</script>

関数の動作

text変数の生成
- テーブルの行(<tr>)を複数生成するHTML文字列を作成しています。
- 各行には以下の要素が含まれます
  - <td class="taskElement">: タスク名を表示するセル。例: "タスク0", "タスク1", "タスク2"。
  - <button onclick="deleteTask()">Delete</button>: 各タスクを削除するためのボタン。クリックするとdeleteTask()関数が呼び出されるようになっています（ただし、この関数はまだ定義されていません）。
document.getElementById('result').innerHTML = text;
- HTML内のclass="result"を持つ要素を取得し、その中身を変数textで上書きします。

document.getElementById('result')を使用していますが、HTML内にclass="result"を持つ要素が存在しないので表が画面に表示されません。以下の要素をHTMLに追加しましょう。

<table class="result">
    <!-- Tasks will be added here -->
</table>

Name		Name	Last commit message	Last commit date
Latest commit History 41 Commits
assets		assets
datas		datas
lectures/2025/chrom		lectures/2025/chrom
README.md		README.md

chrom9103/PiPi_HTNL-CSS-intro

Folders and files

Latest commit

History

Repository files navigation

PiPi_HTML/CSS-intro

0.はじめに

0.1. 事前設定

0.2. 環境整備

0.3. Webサイトの仕組み

HTMLとは？

CSSとは？

1. 雛形の作成

1.1. Hello World!

1.2. 見出しと段落（<h>,<p>）

1.2.1. 見出し（<h1>~<h6>）

1.2.2. 段落（<p>）

1.2.3. 改行と水平線（<br>,<hr>）

ここまでの実装例

1.3. リンク（<a>）

実際の例

1.4. 箇条書き（<ul>,<li>）

1.4. 画像（<img>）

実際の例

画像のリンク化

実装例

1.5. 表（<table>）

例

1.6. ブロック構造

1.6.1. ボックスモデル

1.6.2. HTMLのネスト構造

2. 文字の装飾

2.1. CSSで装飾してみよう

2.1.1. CSSファイルの作成

2.1.2. HTMLにCSSを紐づける

2.1.3. CSSを使ってみよう

2.2. classとid

2.2.1. class属性

2.2.2. id属性

2.3. 色と背景

2.4. レイアウト

2.4.1. ボックスレイアウト

2.5. フレックスボックス

2.6. グリッドレイアウト

2.7. メディアクエリ

3. JavaScript

3.1. イベントハンドリング

3.1.1 フォーム（<input>）

3.1.2. ボタン（<button>）

ボタンの属性

実装例

3.1.3. ボタンと関数

3.1.4. イベントハンドリング

3.2. DOM操作

3.3. フォーム

4. 演習問題

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Contributors 2

Uh oh!

1.2. 見出しと段落（`<h>,<p>`）

1.2.1. 見出し（`<h1>~<h6>`）

1.2.2. 段落（`<p>`）

1.2.3. 改行と水平線（`<br>,<hr>`）

1.3. リンク（`<a>`）

1.4. 箇条書き（`<ul>,<li>`）

1.4. 画像（`<img>`）

1.5. 表（`<table>`）

3.1.1 フォーム（`<input>`）

3.1.2. ボタン（`<button>`）

Packages