学科 HTML/CSS基礎①【オンライン】

my desing works training log

-2025/10/16のアジェンダ-

1限目
学科 HTML/CSS基礎①
Webサイト制作の手順について

2限目
学科 HTML/CSS基礎①
Webサイト制作時の事前準備について

3限目
学科 HTML/CSS基礎①
HTMLの基本構造について

4限目
学科 HTML/CSS基礎①
文章情報と文書本文について

5限目
学科 HTML/CSS基礎①
本日の講義のまとめ

本日のテーマ

Webサイト制作の手順を理解しましょう

Webサイト（ページ）の制作について

お客様からWebサイト（ページ）の制作を依頼された場合に必要となる作業を工程別に理解しましょう。

資料】

カリキュラム資料 ダウンロード用サイト
https://samplesdl-web.com/doc/

下記のファイルをダウンロードしましょう。
「Webサイト制作の手順の教科書.pdf」　

【まとめサイト】

【動画】

参考サイト

Webサイト（ページ）の構成要素について

  • HTML（HyperText Markup Langage）：Web ページ内の各要素の意味や文書構造を定義します。
  • CSS（Cascading Style Sheets）：レイアウトデザインや各要素の装飾（色・サイズなど）を定義します。
  • JavaScript / jQuery：動きを付けたり計算などの処理を行います。

参考サイト

Webサイト（ページ）の開発フォルダについて

Webサイト（ページ）を作成する時は、開発用のフォルダを作成して、その中にHTMLファイル、CSSファイル、JavaScript / jQueryファイル、画像ファイルなどを格納するようにしてください。開発用フォルダには多くのファイルが格納されることになりますのでファイルの整理整頓が重要です。ファイルが迷子にならないようにサブフォルダの作成も含めてわかりやすく管理してください。また、開発用フォルダには、Webサイト（ページ）の表示に不要なファイル（イラストレータのaiファイル、フォトショップ用のpsdファイルなど）は、格納しないようにしてください。

ワンポイントアドバイス

Webサイトを作成するには、HTML、CSS、JavaScript / jQuery、画像ファイルなど、複数のファイルを管理する必要があります。作成するWebサイト用の開発フォルダを作成すると同時に必要に応じてサブフォルダを作成して各ファイルを管理しましょう。

Webページ作成ツールについて

Webページ開発には、テキストエディタとブラウザが必要です。Windows標準にインストールされているメモ帳とEdgeでもWebページ開発が可能ですが、本訓練では、TeraPadとChromeを使用してWebページ開発を行います。TeraPadとChromeは、Windows標準ではインストールされていませんのでインストールを行ってください。

参考サイト

文字コードについて

日本語を扱うための文字コードには、シフトJIS、EUC、UTF-8などがあります。Webページを作成する時の文字コードは、UTF-8N（UTF-8 BOMなし）を使用してください。

参考サイト

ファイルのパス指定について

ファイルを指定するためには、絶対パスでの指定方法と相対パスでの指定方法があります。それぞれの特徴を理解して使い分けましょう。

参考サイト

★HTMLの基本構造について

タグの構造

<要素名>内容（コンテンツ）</要素名>
<要素名 属性=”属性値”>内容（コンテンツ）</要素名>
<要素名 属性=”属性値”>

（例）
<p class=”hello”>こんにちは</p>

  • 要素名
    タグの種別を指定します。タグ名とも言われます。要素の種類によって終了タグ（</要素名>）の有無が決定します。
  • 属性
    要素名に対して設定する属性名を指定します。属性が複数ある場合は、属性と属性値の組合せを空白で区切って複数指定することができます。
  • 属性値
    属性に対する値を指定します。一般的には、ダブルクォーテーション（”）で囲んで指定しますが シングルクォーテーション（’）で囲むことも可能です。属性値がない時は、イコール（=）以降が省略されます。複数の属性を指定する時は、スペースで区切って指定します。

HTMLの基本構造

コピペでOK。お作法なもの。

<!DOCTYPE html>
<html lang=”ja”> 言語は日本語という意味。
<head>
　　（文書の情報を記述）
</head>
<body>
　　（文書の本体を記述）
</body>
</html>

インデント構造は揃えていくことが大切。

  • !DOCTYPE 宣言（ドキュメントタイプ宣言）
    ドキュメントタイプ宣言は、この文書のバージョンを宣言するメタ情報です。HTML5 であれば<!DOCTYPE html>と記述します。
  • html 要素（HTML の文書）
    html 要素は、この文書が HTML の文書であることを表します。「lang=”ja”」の “ja” は日本語で書かれた文書であることを表します。
  • head 要素（文書情報）
    head 要素は、この文書のメタデータを記述します。例えば、<title>～</title>でその文書のタイトルを記述することができます。
  • body 要素（文書本文）
    body 要素は、この文書の本文を記述します。この body 要素で囲まれた領域が Web ページとして表示されます。

参考サイト

ワンポイントアドバイス

HTMLは、SGML（Standard Generalized Markup Language）という文章（マニュアルや論文など）を記述する言語を元にしてWebでの文章定義を目的に開発されました。このため、文章の見出し、文章本文、リスト（箇条書）、図形などの定義が重要な機能になっています。

HTMLの基本構造については、以下サイトも合わせて参照してください。
・htmlの記述【基本タグ】

特殊文字について

HTMLを記述する時に、画面に表示したい文字を、そのまま記述できない場合があります。例えば「<」を画面に表示しようとして、そのまま記述するとタグの開始との区別ができなくなります。「<」を画面に表示する場合は、「&lt;」と記述することで画面に「<」と表示することが可能になります。このような文字を特殊文字と呼んで特別な記述が必要になります。代表的な特殊文字には、「”」→「&quot;」、「&」→「&amp;」、「<」→「&lt;」、「>」→「&gt;」、「（スペース）」→「&nbsp;」、「©」→「&copy;」、「®」→「&reg;」などがあります。

参考サイト

インデンテーション（字下げ）について

HTMLの記述では、可読性の向上が求められます。インデンテーション（字下げ）を意識して記述してください。

参考サイト

学習メモ

HTML 検索エンジンのため　　　　

CSS デザイン（見た目）

Webサイト（ページ）の開発フォルダについて：複数のファイル管理を徹底して行う。
Webサイトを作成するには、HTML、CSS、JavaScript / jQuery、画像ファイルなど、複数のファイルを管理する必要があります。作成するWebサイト用の開発フォルダを作成すると同時に必要に応じてサブフォルダを作成して各ファイルを管理しましょう。

Webページ開発には、テキストエディタとブラウザが必要：テキストエディタメモ帳。
Windows：Terapad
VSC：Mac
とChromeで行う。

文字コードについて：日本語を扱うための文字コードには、シフトJIS、EUC、UTF-8などがある。Webページを作成する時の文字コードは、UTF-8N（UTF-8 BOMなし）を使用。

HTMLの基本構造について：
＜要素名＞のことをタグと呼ぶ。
<要素名 属性=”属性値”>内容（コンテンツ）</要素名>
属性=”属性値”は任意で入れる
CSSを連動するときに必須。
<要素名 属性=”属性値”>内容（コンテンツ）</要素名>は開始タグ　文章　閉じタグ