2025/3/24 「HTML/CSS基礎①【オンライン】」の記録です。
講師：小谷 祥吾先生
メモ
- XD
Photoshop、Illustratorの簡易的な機能が備わったようなもの。
サイトマップやワイヤーを引く時に使うことが多い。 - デザインカンプ（デザインラフと同義）
Webサイトやアプリの完成イメージを作成したデザインデータのこと。コーディング前にクライアントやチームメンバーとデザインの方向性を確認するために使う。 - TeraPad（ﾃﾗﾊﾟｯﾄﾞ）
Windows用の無料テキストエディタ - ウェブのレンタリング（レンダリング）
ウェブページの「レンタリング」は、HTML、CSS、JavaScriptなどのコードをブラウザが解釈し、ユーザーが視覚的に見ることができるページとして表示するプロセスです。このプロセスにはいくつかのステップが含まれます。
①HTMLの解析 - ブラウザはHTMLファイルを読み込み、ページ構造を理解します。
②CSSの適用 - ページのデザインやスタイル（色、フォント、レイアウトなど）がCSSによって適用されます。
③JavaScriptの実行 - JavaScriptはページのインタラクションを処理し、動的な変更を行います。
④表示の描画 - 最終的に、ブラウザはこれらの情報を基に、画面に画像として描画します。
Webサイトを作るときに必要なもの
1. HTML（エイチ・ティー・エム・エル）
👉 ページの骨組み（文章や画像の配置を決める）
📌 例）「ここはタイトル」「ここはボタン」「ここは画像」などを決める
2. CSS（シー・エス・エス）
👉 **デザイン（色・大きさ・配置）**を決める
📌 例）「背景を青くする」「文字を大きくする」「ボタンを丸くする」
3. JavaScript（ジャバスクリプト）
👉 動きをつける！（ボタンを押したら動く、スライドが動く）
📌 例）「画像がスライドする」「ボタンを押したらポップアップが出る」
Webサイトを作るために必要なツール
- TeraPad（ﾃﾗﾊﾟｯﾄﾞ） → コードを書くソフト（Windows向けのメモ帳みたいなやつ）
- Google Chrome（クローム） → 作ったページを確認するブラウザ
つまり…
- TeraPadでHTMLやCSSを書く
- ChromeでWebサイトがちゃんと表示されるか確認する！
ファイルのルール
1. 文字コード（言葉のルール）
👉 Webサイトの文字は「UTF-8N」で保存する！
📌 理由 → 日本語の文字が「？？？」になったりしないため
2. ファイルのパス（場所の指定）
👉 画像やリンクの場所を指定する方法（絶対パス or 相対パス）
📌 簡単に言うと…
絶対パス → 「東京タワーの住所」みたいに、サイトのどこからでも使える書き方
相対パス → 「ここの3階」とか今いる場所からの書き方
HTMLの基本の形
Webページのテンプレート
<!DOCTYPE html> <html lang=”ja”> <head> （文書の情報を記述） </head> <body> （文書の本体を記述） </body> </html>
これが何をしているのか？
<!DOCTYPE html> → 「これはHTMLのページです！」と宣言
<html lang="ja"> → 「これは日本語のページです！」と宣言
<head> → ページの情報（タイトルなど）
<body> → ページの中身（見える部分）
DOCTYPE宣言って？
👉 <!DOCTYPE html> のこと！
📌 書かないと、ブラウザが変な表示をするかも！
（だから最初に書いておけば安心！）
ワンポイントアドバイス
楽天のショッピングサイトのような一部のWebページでは、<!DOCTYPE html> が書かれていない場合がある。
サイトマップとワイヤーフレームの違い
サイトマップ：Webサイト全体の構造を整理し、どのページがどのように繋がるかを示したもの
ワイヤーフレーム：各ページのレイアウトやデザイン要素の配置を決めたもの
| 項目 | サイトマップ | ワイヤーフレーム |
|---|---|---|
| 目的 | サイトの構造設計 | 各ページのレイアウト設計 |
| 形 | ツリー図、リスト | 画面のスケッチ |
| 作成時期 | 企画・構成段階 | UI設計段階 |
| 使用用途 | ページの関係を整理 | デザインや開発の指示書 |
サイト制作の流れ
サイト制作の流れ
1. 依頼
クライアントからWebサイト制作の依頼を受ける。
2. 提案（企画をまとめる）
クライアントの要望を整理し、サイトの方向性を決める。
主な資料
・企画書（目的・ターゲット・コンセプトの明確化）
・サイトマップ（ページ構成の設計）
・見積もり（制作費用・スケジュールの提示）
ここがいちばん時間がかかる、重要な過程
3. 受諾（制作スタート）
提案が承認され、正式に制作がスタートする。
HTMLとCSS
HTMLとは
Webページの骨組みを作る言語。
「ここは見出し」「ここは段落」「ここは画像」など、ページの構造を決める。
CSSとは
HTMLで作ったページにデザインをつける言語。
文字の色や大きさ、レイアウト、背景色などを指定する。
HTMLとCSSの違い
| HTML | CSS | |
| 役割 | Webページの構造を作る | デザインや見た目を整える |
| 使い方 | 見出し、段落、画像などを配置 | 色、フォント、レイアウトを指定 |
| 例 | <h1>見出し</h1> | h1 { color: red; |
検証とページのソースの違い
| 項目 | 検証（デベロッパーツール） | ページのソース表示 |
|---|---|---|
| 見られる内容 | 現在のページの状態（CSS適用後・JS実行後） | 元のHTMLコードのみ |
| 動的な変更の確認 | 可能（JSによる変更後も見える） | 不可（JS実行前のHTMLのみ） |
| CSSの確認・変更 | 可能（リアルタイム編集OK） | 不可 |
| 開発向け機能 | あり（エラー確認、デバッガー） | なし（単にHTMLを見るだけ） |
| 開き方 | 右クリック → 「検証」 / F12 | 右クリック → 「ページのソースを表示」 / Ctrl + U |
コーディングについて
コーディングとは
プログラミング言語を使って、Webサイトやアプリが動作するように機能を実装する作業のこと。
マークアップとは
HTMLなどのマークアップ言語を使って、Webページの構造を記述する作業のこと。
「この部分は見出し」「この部分はリンク」など、コンテンツの意味づけを行う。
コーディングとマークアップの違い
| コーディング | マークアップ | |
| 目的 | 機能を実装 | ページの構造を記述 |
| 使用言語 | JavaScript, PHP, Python など | HTML, XML など |
| 役割 | 動的な処理（アニメーション・データ処理など） | 静的な構造の定義（見出し・段落・リンクなど） |
| 例 | ボタンをクリックすると動作 | ボタンの配置やラベルを指定 |
マークダウンとは
Markdown（マークダウン）は、シンプルな書式で文章を装飾できる軽量マークアップ言語。
普通のテキストに記号を加えるだけで、見出し・リスト・リンクなどを簡単に作成できる。
検証とページのソースの違い
| 項目 | 検証（デベロッパーツール） | ページのソース表示 |
|---|---|---|
| 見られる内容 | 現在のページの状態（CSS適用後・JS実行後） | 元のHTMLコードのみ |
| 動的な変更の確認 | 可能（JSによる変更後も見える） | 不可（JS実行前のHTMLのみ） |
| CSSの確認・変更 | 可能（リアルタイム編集OK） | 不可 |
| 開発向け機能 | あり（エラー確認、デバッガー） | なし（単にHTMLを見るだけ） |
| 開き方 | 右クリック → 「検証」 / F12 | 右クリック → 「ページのソースを表示」 / Ctrl + U |
検証（デベロッパーツール）とページのソースの違い
| 項目 | 検証（デベロッパーツール） | ページのソース表示 |
|---|---|---|
| 見られる内容 | 現在のページの状態（CSS適用後・JS実行後） | 元のHTMLコードのみ |
| 動的な変更の確認 | 可能（JSによる変更後も見える） | 不可（JS実行前のHTMLのみ） |
| CSSの確認・変更 | 可能（リアルタイム編集OK） | 不可 |
| 開発向け機能 | あり（エラー確認、デバッガー） | なし（単にHTMLを見るだけ） |
| 開き方 | 右クリック → 「検証」 / F12 | 右クリック → 「ページのソースを表示」 / Ctrl + U |
感想
- コーディングについて知りたかったので、とても興味深く勉強になった。
- しかし、難しすぎる・・・。チャットGPTを多用しました。
