Skip to content

chrom9103/PiPi_HTNL-CSS-intro

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

55 Commits
articles
articles
 
 
assets
assets
 
 
datas
datas
 
 
lectures/2025/chrom
lectures/2025/chrom
 
 
README.md
README.md
 
 

Repository files navigation

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>
  1. <!DOCTYPE html>: HTML5であることを宣言します。
  2. <html>: HTML文書のルート要素です。
  3. <head>: メタ情報（文字コードやタイトルなど）を記述します。
  4. <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の役割は色を変えることだけではありません。要素の位置、余白、幅を整えることで、情報が読みやすい画面を作れます。ここでは、todo アプリの土台になるレイアウトの考え方を学びます。

2.4.1. ボックスモデル

HTMLの要素は、見た目の上ではすべて四角い箱として扱われます。この箱は主に次の4つで構成されます。

  • content: 文字や画像そのもの
  • padding: 内容と枠の間の余白
  • border: 枠線
  • margin: 他の要素との外側の余白

たとえば、todo アプリのカード部分は次のように考えられます。

<div id="todo-list">
  <h2>Todo List</h2>
</div>
#todo-list {
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin: 20px auto;
}

このように書くと、白いカードの中に余白ができ、画面の中央に置きやすくなります。

2.4.2. 幅と中央寄せ

画面全体に対して要素を中央に置きたいときは、幅と余白を一緒に考えます。margin: 0 auto; を使うと、横方向の中央寄せができます。

#todo-list {
  width: 80%;
  max-width: 600px;
  margin: 20px auto;
}

width で大きさの目安を決め、max-width で広がりすぎを防ぎます。これだけでも、スマホでも見やすく、パソコンでも間延びしにくいレイアウトになります。

2.4.3. まずは全体の骨組みを作る

todo アプリでは、上から順にヘッダー、画像、入力欄、一覧の順で情報を並べます。HTMLで構造を作り、CSSで見た目を整える流れを意識してください。

この時点でできることは次の3つです。

  1. 画面の中心にカードを置ける。
  2. 余白を使って要素同士の距離を調整できる。
  3. どの部分が入力欄で、どの部分が一覧かを分けて考えられる。

2.5. フレックスボックスで入力欄を並べる

todo アプリでは、テキスト入力欄と追加ボタンを横に並べると使いやすくなります。そのために便利なのが Flexbox です。

2.5.1. 横並びにする

次のように親要素に display: flex; を指定すると、子要素が横方向に並びます。

<div class="input-area">
  <input id="newTask" type="text" placeholder="Enter a new task">
  <button id="addButton">Add Task</button>
</div>
.input-area {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

gap は要素同士の間隔です。margin を個別に調整しなくても、きれいな隙間を作れます。

2.5.2. 入力欄を広げる

入力欄は、ボタンよりも広く取ると入力しやすくなります。

#newTask {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

flex: 1; を指定すると、余ったスペースを入力欄が優先して使います。これで、画面幅が変わっても自然な見た目になります。

2.5.3. ボタンの見た目を整える

追加ボタンは、単に押せるだけでなく、押したくなる見た目にすると操作がわかりやすくなります。

#addButton {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

#addButton:hover {
  background-color: #0056b3;
}

hover を使うと、マウスが重なったときだけ少し色を変えられます。これにより、クリックできる要素だと伝わりやすくなります。

2.6. 一覧を見やすくする

次は、追加したタスクを一覧として表示する部分を整えます。todo アプリでは、タスク名と削除ボタンを行ごとに並べるので、表の考え方が役立ちます。

2.6.1. 表の基本

表は、行と列で情報を整理するための要素です。タスク一覧では、左側にタスク名、右側に削除ボタンを置くとわかりやすくなります。

<table id="result">
  <tr>
    <td class="taskElement">買い物に行く</td>
    <td><button class="delete-btn">Delete</button></td>
  </tr>
</table>

2.6.2. 行ごとの区切りを付ける

一覧が増えても見やすいように、行の下に線を引きます。

table {
  width: 100%;
  border-collapse: collapse;
}

tr {
  border-bottom: 1px solid #ddd;
}

td {
  padding: 10px;
}

border-collapse は、表の枠線をすっきり見せるために使います。

2.6.3. 同じ見た目をそろえる

同じ役割を持つ要素には、同じ class を付けると管理しやすくなります。複数のタスク名は全部同じ見た目でよいので、class を使うのが自然です。

この時点でできることは次の3つです。

  1. タスク一覧を表として表示できる。
  2. 行ごとに見やすい区切りを付けられる。
  3. 追加ボタンと削除ボタンの役割を分けて考えられる。

2.7. メディアクエリで崩れにくくする

画面サイズが小さくなると、横並びの要素が窮屈になることがあります。そんなときはメディアクエリを使って、画面幅に応じてレイアウトを切り替えます。

2.7.1. スマホ幅を想定する

たとえば、画面が狭いときは入力欄とボタンを縦に並べると押しやすくなります。

@media (max-width: 600px) {
  .input-area {
    flex-direction: column;
  }

  #addButton {
    width: 100%;
  }
}

2.7.2. 画像やカードの幅を調整する

画像やカードの幅を固定しすぎると、スマホでははみ出してしまいます。width: 100%; や max-width を使って、画面に合わせて縮むようにしておきましょう。

この時点でできることは次の2つです。

  1. 画面の大きさに応じて入力欄の並びを切り替えられる。
  2. 小さい画面でもアプリが使いやすいまま保てる。

3. JavaScriptでtodoを動かす

ここからは、見た目だけのページを「動くアプリ」に変えていきます。JavaScript を使うと、ボタンを押したときに処理を実行したり、入力された文字を保存したりできます。

3.1. ボタンで関数を呼び出す

まずは、ボタンを押したら JavaScript の関数が実行されるようにします。

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

onclick は、クリックされたときに実行する処理を指定する属性です。ここでは AddPressed() という関数を呼びます。

3.1.1. 関数を書く

JavaScript の処理は <script> タグの中に書きます。

<script>
  function AddPressed() {
    alert('ボタンが押されました');
  }
</script>

最初は、押されたことがわかるだけの簡単な処理で十分です。ボタンと関数がつながっていることを確認しましょう。

3.2. 入力欄の値を取得する

次は、入力欄に打ち込んだ文字を取り出します。

<input id="newTask" type="text" placeholder="Enter a new task">
const newTask = document.getElementById('newTask');
const value = newTask.value;

document.getElementById は、指定した id を持つ要素を取得するための命令です。value を使うと、入力欄の中身を読めます。

3.3. 配列にタスクをためる

入力された文字は、1 件ずつ配列に保存すると扱いやすくなります。配列は、複数のデータを順番にまとめて持てる入れ物です。

let tasks = [];

function AddPressed() {
  const newTask = document.getElementById('newTask');
  tasks.push(newTask.value);
}

push を使うと、配列の最後に新しい要素を追加できます。todo アプリでは、ここに入力したタスクを1件ずつ保存していきます。

3.3.1. 空欄を追加しない

何も入力されていないときは、配列に入れないようにしておくと親切です。

if (newTask.value === '') {
  return;
}

3.4. 画面を描き直す

配列にデータを入れただけでは、画面には変化が出ません。そこで、配列の内容を HTML に変換して表示し直します。この処理を描画、または再描画と呼びます。

function draw() {
  let result = '';

  for (let i = 0; i < tasks.length; i++) {
    result += "<tr>\n" + 
              `<td id="taskElement">${tasks[i]}</td>\n` + 
              `<td><button onclick="deleteTask(${i})">Delete</button></td>\n` + 
              "</tr>";
  }

  document.getElementById('result').innerHTML = result;
}

3.4.1. innerHTML を使う

innerHTML は、要素の中身をまとめて書き換えるための仕組みです。配列の中身に応じて表の行を作り直すと、画面に最新の状態を表示できます。

3.4.2. 追加したら描画する

タスクを配列に追加したあとで draw() を呼ぶと、すぐに一覧へ反映されます。

function AddPressed() {
  const newTask = document.getElementById('newTask');
  if (newTask.value === '') {
    return;
  }

  tasks.push(newTask.value);
  newTask.value = '';
  draw();
}

3.5. タスクを削除する

一覧に削除ボタンを付けて、押された行だけ消せるようにします。

function deleteTask(index) {
  tasks.splice(index, 1);
  draw();
}

splice は、配列の指定した位置から要素を取り除くための命令です。削除したあとに draw() を呼び直すことで、画面の表示も更新されます。

3.6. 完成形の考え方

ここまでの流れをまとめると、todo アプリは次の順で動いています。

  1. 入力欄に文字を入れる。
  2. ボタンを押して関数を呼ぶ。
  3. 文字を配列に追加する。
  4. 配列から表を描き直す。
  5. 削除ボタンで配列から要素を消す。

この流れを理解できると、単なる例題ではなく、自分で機能を足していけるアプリになります。

3.7. 完成イメージ

最終的には、lectures/2025/chrom/index.html を開くと、入力欄と追加ボタンがあり、タスクを追加・削除できる簡易 todo アプリが表示されます。

この時点でできることは次の3つです。

  1. 入力した文字を保存できる。
  2. 画面を最新の状態に描き直せる。
  3. いらないタスクを削除できる。

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

1 star

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages