2025年5月21日

-本日のアジェンダ- 1限目学科 HTML/CSS基礎①Webサイト制作の手順について 2限目学科 HTML/CSS基礎①Webサイト制作時の事前準備について 3限目学科 HTML/CSS基礎①HTMLの基本構造について 4限目学科 HTML/CSS基礎①文章情報と文書本文について 5限目学科 HTML/CSS基礎①本日の講義のまとめ 本日のテーマ Webサイト制作の手順を理解しましょう Webサイト（ページ）の制作について お客様からWebサイト（ページ）の制作を依頼された場合に必要となる作業を工程別に理解しましょう。 参考サイト Webサイト制作の6つの流れと整理すべき重要ポイント Webサイト制作の流れと成功のポイントを3ステップで解説！ 10分で分かるホームページ制作の流れ・期間 【資料】 カリキュラム資料 ダウンロード用サイトhttps://cu-doc.deau-ac.com/ 下記のファイルをダウンロードしましょう。「Webサイト制作の手順の教科書.pdf」 【まとめサイト】 HTMLとCSSの基礎をまとめたサイトhttps://samplesdl.me/training_html-css/ Webサイト（ページ）の構成要素について HTML：Web ページ内の各要素の意味や文書構造を定義します。 CSS：レイアウトデザインや各要素の装飾（色・サイズなど）を定義します。 JavaScript / jQuery：動きを付けたり計算などの処理を行います。 ワンポイントアドバイス Webサイトを作成するには、HTML、CSS、JavaScript / jQuery、画像ファイルなど、複数のファイルを管理する必要があります。作成するWebサイト用の開発フォルダを作成すると同時に必要に応じてサブフォルダを作成して各ファイルを管理しましょう。 Webページ開発ツールについて Webページ開発には、テキストエディタとブラウザが必要です。Windows標準にインストールされているメモ帳とEdgeでもWebページ開発が可能ですが、本訓練では、TeraPadとChromeを使用してWebページ開発を行います。TeraPadとChromeは、Windows標準ではインストールされていませんのでインストールを行ってください。 参考サイト TeraPad 公式ダウンロードサイト Google Chrome – Google の高速で安全なブラウザをダウンロード 【Mac向け】完全無料で使える！便利で快適なおすすめテキストエディタまとめ 文字コードについて 日本語を扱うための文字コードには、シフトJIS、EUC、UTF-8などがあります。Webページを作成する時の文字コードは、UTF-8N（UTF-8 BOMなし）を使用してください。 参考サイト ホームページの文字コードについて ウェブサイトにおける文字コード、90％を占める文字コードとは？ Webサイトの文字コードの調べ方 ファイルのパス指定について ファイルを指定するためには、絶対パスでの指定方法と相対パスでの指定方法があります。それぞれの特徴を理解して使い分けましょう。 参考サイト ホームページの仕組みとURL、絶対パス、相対パスについて パス（URL）の指定方法 絶対パスと相対パスの違いをイラストを使って解説！ HTMLの基本構造について タグの構造 &lt;要素名&gt;内容（コンテンツ）&lt;/要素名&gt;&lt;要素名 属性=”属性値”&gt;内容（コンテンツ）&lt;/要素名&gt;&lt;要素名 属性=”属性値”&gt; 要素名タグの種別を指定します。タグ名とも言われます。要素の種類によって終了タグ（&lt;/要素名>）の有無が決定します。 属性要素名に対して設定する属性名を指定します。属性が複数ある場合は、属性と属性値の組合せを空白で区切って複数指定することができます。 属性値属性に対する値を指定します。一般的には、ダブルクォーテーション（”）で囲んで指定しますが シングルクォーテーション（’）で囲むことも可能です。属性値がない時は、イコール（=）以降が省略されます。複数の属性を指定する時は、スペースで区切って指定します。 HTMLの基本構造 &lt;!DOCTYPE html&gt;&lt;html lang=”ja”&gt;&lt;head&gt; （文書の情報を記述）&lt;/head&gt;&lt;body&gt; （文書の本体を記述）&lt;/body&gt;&lt;/html&gt; !DOCTYPE 宣言（ドキュメントタイプ宣言）ドキュメントタイプ宣言は、この文書のバージョンを宣言するメタ情報です。HTML5 であれば&lt;!DOCTYPE html>と記述します。 html 要素（HTML の文書）html 要素は、この文書が HTML の文書であることを表します。「lang=”ja”」の “ja” は日本語で書かれた文書であることを表します。 head 要素（文書情報）head 要素は、この文書のメタデータを記述します。例えば、&lt;title>～&lt;/title>でその文書のタイトルを記述することができます。 body 要素（文書本文）body 要素は、この文書の本文を記述します。この body 要素で囲まれた領域が Web ページとして表示されます。 doctype宣言とは？ HTML5におけるDOCTYPE宣言はあまり意味を持たないとされていますが、 作成した文書がHTML5によるものであることを、ブラウザなどに明示的に伝えるために記述しておいたほうが良いでしょう。 DOCTYPE宣言が無いと、一般的なブラウザではレンダリングモードが互換モード（Quirks mode）となります。 互換モードのブラウザではCSSの解釈が標準と異なるため、制作者の意図しないレイアウトになってしまう場合があります。 ブラウザに標準モード（Standards mode）で解釈させる場合には、DOCTYPE宣言を記述する必要があります。 主要なブラウザでは文書の先頭に &lt;!DOCTYPE html&gt; と記述することで標準モードとなります。 参考サイト 【HTML初心者入門者向け】doctype宣言とは？ HTML5とHTML4.01 正しいDOCTYPE宣言で仕様に準拠しよう !DOCTYPEの宣言 – HTML5/HTML4/XHTMLで正しい指定方法 … ワンポイントアドバイス 楽天のショッピングサイトなどのテンプレートでは、 DOCTYPE宣言が無く互換モードになり、CSSが思うように使えなくなる場合があります。その場合やむを得ず、違う方法を使わなければならない場合がありますので、お仕事で担当した時は、 DOCTYPE宣言は必ず確認しておきましょう。 head 要素（文書情報） title 要素（ページタイトル） meta 要素（文字コード指定／charset） meta 要素（ページの説明文／description） meta 要素（ビューポート／viewport） link要素（外部 ファイルとの紐付け） body 要素（文書本文） 構造化タグ コンテンツのグループ化タグ テキストの意味 コンテンツの埋め込み テーブル フォーム 参考サイト HTML5における要素の分類（コンテンツ・モデル） HTMLのカテゴリーとコンテンツモデルを理解する HTML5 コンテンツモデル ガイド ブロックレベル要素とインライン要素について 要素の多くは、ブロックレベル要素とインライン要素に分類されます。ただし、HTML5ではブロックレベル要素とインライン要素という考え方はなくなっていますので、あくまでも性質を持っていると考えておきましょう。 参考サイト ブロックレベル要素とインライン要素－HTMLの基本 【基礎知識】ブロックレベル要素・インライン要素の性質と … 【HTML】3分でわかる！インライン要素とブロック要素の … HTML：構造化タグ article 要素（アーティクル） section 要素（セクション） nav 要素（ナビ） aside 要素（アサイド） h1～h6 要素（見出し） header 要素（ヘッダー） footer 要素（フッター） 参考サイト HTMLをセクション分けするタグの使い方！divタグとの違いも解説 sectionタグとは？使い方やarticleタグとの違いを徹底解説 sectionやarticleの使い分け！セクショニング要素とは? ワンポイントアドバイス 見出し（h1～h6）要素でh1タグ以外は、特に使用回数に制限はありません。h2やh3などは大きな見出しとなることが多いためたくさん使われると思います。「h1タグは1ページで一回の使用で抑え、数字の順序をしっかり守ること」これを守っていれば使用になんら問題はありません。ただ、html5の場合は、sectionタグやarticleタグと組み合わせることで1ページに複数のh1タグを記述することができます。 参考サイト h1 h2 h3などの見出しタグの重要性と正しい順序｜Enazeal … h1タグとは？使い方とSEO効果についてまとめ｜SEOラボ hタグとは？見出しタグ（h1/h2/h3…）の正しい使い方 HTML：コンテンツのグループ化タグ p 要素（段落（パラグラフ）） hr 要素（区切り） ol/li 要素（順序のあるリスト） ul/li 要素（順序のないリスト） dl/dt/dd 要素（定義・説明リスト） main 要素（メインコンテンツ） div 要素（ひとつのかたまりの範囲）

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