カテゴリー: 学科 HTML基礎

-本日のアジェンダ-

1限目
学科 HTML基礎④
CSSの基本事項について

2限目
学科 HTML基礎④
練習問題の説明

3限目
学科 HTML基礎④
マークアップの練習

4限目
学科 HTML基礎④
練習問題の解説

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

本日のテーマ

レイアウトデザイン練習問題①（マークアップの練習）

CSSの基本構造について

• HTML ファイルとは別に記述する場合
• HTML ファイル内に記述する場合
• HTML タグにインラインで記述する場合

セレクタの記載方法

• 全称セレクタ
• 型セレクタ
•  id セレクタ（#）
• class セレクタ（.）
• 子孫結合子セレクタ
• 子結合子セレクタ（>）
• 隣接兄弟結合子セレクタ（+）
• 一般兄弟結合子セレクタ（~）

幅・高さの単位

• px（ピクセル値）
• %（要素の割合（百分率））
• em（要素の割合）
• rem（ルート要素の割合）
• vw（画面の表示幅の割合）
• vh（画面の高さの割合）
• calc 関数（値の計算）

色の指定方法

• カラーネーム
• #rgb（ハッシュ（#）で始まる 16 進数 3 桁）
• #rrggbb（ハッシュ（#）で始まる 16 進数 6 桁）
• #rrggbbaa（ハッシュ（#）で始まる 16 進数 8 桁）
• rgb(r,g,b)（rgb 関数）
• rgba(r,g,b,a)（rgba 関数）
• hsl(h,s,l)（hsl関数）
• hsla(h,s,l,a)（hsla関数）
• 線形グラデーション（linear-gradient 関数）
• 放射グラデーション（radial-gradient 関数）

練習問題：マークアップの練習

【資料】

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

下記のファイルをダウンロードしましょう。
「レイアウトデザイン 練習問題①.zip」　

【動画】

• マークアップの練習
  https://youtu.be/LB0vybRdUgA（14分21秒）

本日の課題

本日学んだ内容を復習して整理しておきましょう。
ポートフォリオサイトの投稿ページ作成が出来る方は投稿ページにまとめておくと良いです。

本日のテーマ② ※前回の続き

ここからは補足資料になります。
情報収集など手を動かしながらの視聴でも構いません。
もしくはお時間のある時にご自身で視聴ください。

応募書類の作成に正解はありません。

もし正解があるとしたら「面接に呼んでいただく」です。そして、面接になったら聞いてみてください。「何で呼んでいただけましたか？」と各書類の狙いが上手くいっているか確認してみましょう。

【資料】

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

下記のファイルをダウンロードしましょう。
「求人応募について.pdf」　

【動画】

求人応募について (15:02)
「人材紹介」や「人材派遣」について
https://youtu.be/b0x_ejhjULk

人材紹介会社と人材派遣会社の違い (8:21)
https://youtu.be/lsG_Wb5WS0w

メリット・デメリットを考えていく上で
サービス内容の比較 (7:14)
https://youtu.be/LyhHIwEdv7Y

雇用契約による違い (7:09)
https://youtu.be/wsK5Ewtvjuw

それぞれのメリット (21:28)
https://youtu.be/rX10Ci2btF4

アルバイトとパート、正社員とアルバイトの違いとは？ (4:03)
https://youtu.be/C8p08gxnNfM

応募書類について・転職の昨今 (9:31)
https://youtu.be/uNdbHEY4ULs

転職準備はどうですか？ (7:09)
https://youtu.be/qZgrUsMQadI

スキルの整理・ 今後チャレンジしたい領域の整理 (6:01)
https://youtu.be/yAiYcpKCW4I

得意領域と挑戦したい領域の整理 ・情報収集のコツ (4:43)
https://youtu.be/dtuSwBJgs38

応募の際の注意点-履歴書- (4:18)
https://youtu.be/EovFXLwEDLY

応募の際の注意点-職務経歴書- (4:24)
https://youtu.be/-8MNWbo_4tQ

ポートフォリオ制作のコツと注意点・まとめ (15:08)
https://youtu.be/BLlOI5VpB7o

参考サイト

• 人材 紹介 と 人材 派遣 の 違い – 詳細はこちらから
• 総務省統計局 労働力調査(詳細集計)
• 転職活動のスケジュール全10ステップを準備編・実践編で紹介

-本日のアジェンダ-

1限目
学科 HTML基礎③
テキスト分類タグとコンテンツ埋め込みタグについて

2限目
学科 HTML基礎③
画像の取り扱いについて

3限目
学科 HTML基礎③
テーブルタグとフォームタグについて

4限目
学科 HTML基礎③
HTML・CSSの紐付けと特殊文字について

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

本日のテーマ

HTMLとCSS記述の基本事項を理解しましょう

【まとめサイト】

• HTMLとCSSの基礎をまとめたサイト
  https://samplesdl.me/training_html-css/

【動画】

• HTMLとCSSを記述するための基本事項
  https://youtu.be/nMAIaffLF4s（11分49秒）

テキスト分類タグについて

• a 要素（ハイパーリンク）
• em 要素（強調）
• strong 要素（強い重要性）
• small 要素（免責・警告・著作権など）
• i 要素（声や心の中で思ったこと）
• b 要素（キーワードや商品名など）
• span 要素（ひとつの範囲）
• br 要素（改行）

コンテンツ埋め込みタグについて

• img 要素（画像）
• iframe 要素（インラインフレーム）

画像の取り扱いについて

<img>タグは、画像を表示する際に使用し、必須属性のsrc属性で画像ファイルのURLを指定します。一般的なブラウザで表示できる画像フォーマットとしては、PNG・GIF・JPEGがよく利用されています。 他にも、ウェブ用のベクター画像フォーマットであるSVGや、単一ページのPDF・アニメPNG・アニメGIFなどをsrc属性の値として指定できます。
alt属性には、画像が利用できない環境向けのテキストを指定します。 HTML5ではalt属性は必須ではありませんが、指定しておけばアクセシビリティーが高まるでしょう。

参考サイト

• Webで扱える画像について知ろう！基本の4つの画像形式と …
• パフォーマンス観点でのWeb用の画像最適化について（2019 …
• 【2022年版】画像最適化ツールおすすめ10選を徹底比較！

ワンポイントアドバイス

Webサイトを重くする（表示スピードの低下）の大きな原因の一つは画像サイズです。WebサイトにUPする画像はPhotoshopやIllustratorでしっかりと画像の最適化をしてUPしましょう。

テーブルタグについて

<table>
　　<caption>キャプション</caption>
　　<tr><th>見出し</th><th>見出し</th></tr>
　　<tr><td>データ</td><td>データ</td></tr>
　　<tr><td>データ</td><td>データ</td></tr>
</table>

• table要素（テーブルの範囲）
• caption要素（表のキャプション）
• tr要素（1行の範囲）
• th要素（タグ見出し）
• td要素（データ項目）

参考サイト

• HTML tableタグを初心者向けに解説&便利な知識5選 | Udemy …
• ホームページのレイアウトはテーブルではなくCSSを使う理由 …
• 【HTML table】表を作成する基本からレイアウトの方法までを解説

ワンポイントアドバイス

楽天やヤフーショッピングの商品ページでテーブルレイアウトが必要になる場合があります。EC関連のお仕事をする場合は、想定しておきましょう。

フォームタグについて

• form 要素（フォーム）
• label 要素（ラベル）
• input 要素（インプット）
• textarea 要素（テキストエリア）
• select/option 要素（セレクト／オプション）
• button 要素（ボタン）
• fieldset/legend 要素（フィールドセット／レジェンド）

CSSとの紐付けについて

HTMLのタグとCSSの紐付けを行うためにid属性とclass属性が使用されます。

参考サイト

• 【HTML/CSS】３分でわかるid/class属性の違い
• idとclassをわかりやすく説明！
• 【必修知識】id と class の違いと使い分け方の基本

特殊文字について

HTMLのコードを記述する時に特別な書き方をする必要のある文字があります。

参考サイト

• HTMLの特殊文字とは？変換方法と特殊文字一覧も紹介
• HTMLで特殊文字を扱う方法
• HTMLの記号・特殊文字の文字コード表

本日の課題

本日学んだ内容を復習して整理しておきましょう。
ポートフォリオサイトの投稿ページ作成が出来る方は投稿ページにまとめておくと良いです。

本日のテーマ②

ここからは補足資料になります。
情報収集など手を動かしながらの視聴でも構いません。
もしくはお時間のある時にご自身で視聴ください。

応募書類の作成に正解はありません。

もし正解があるとしたら「面接に呼んでいただく」です。そして、面接になったら聞いてみてください。「何で呼んでいただけましたか？」と各書類の狙いが上手くいっているか確認してみましょう。

【資料】

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

下記のファイルをダウンロードしましょう。
「求人応募について.pdf」　

【動画】

求人応募について (15:02)
「人材紹介」や「人材派遣」について
https://youtu.be/b0x_ejhjULk

人材紹介会社と人材派遣会社の違い (8:21)
https://youtu.be/lsG_Wb5WS0w

メリット・デメリットを考えていく上で
サービス内容の比較 (7:14)
https://youtu.be/LyhHIwEdv7Y

雇用契約による違い (7:09)
https://youtu.be/wsK5Ewtvjuw

それぞれのメリット (21:28)
https://youtu.be/rX10Ci2btF4

アルバイトとパート、正社員とアルバイトの違いとは？ (4:03)
https://youtu.be/C8p08gxnNfM

応募書類について・転職の昨今 (9:31)
https://youtu.be/uNdbHEY4ULs

転職準備はどうですか？ (7:09)
https://youtu.be/qZgrUsMQadI

スキルの整理・ 今後チャレンジしたい領域の整理 (6:01)
https://youtu.be/yAiYcpKCW4I

得意領域と挑戦したい領域の整理 ・情報収集のコツ (4:43)
https://youtu.be/dtuSwBJgs38

応募の際の注意点-履歴書- (4:18)
https://youtu.be/EovFXLwEDLY

応募の際の注意点-職務経歴書- (4:24)
https://youtu.be/-8MNWbo_4tQ

ポートフォリオ制作のコツと注意点・まとめ (15:08)
https://youtu.be/BLlOI5VpB7o

参考サイト

• 人材 紹介 と 人材 派遣 の 違い – 詳細はこちらから
• 総務省統計局 労働力調査(詳細集計)
• 転職活動のスケジュール全10ステップを準備編・実践編で紹介

-本日のアジェンダ-

1限目
学科 HTML基礎②
HTMLの基本構造について

2限目
学科 HTML基礎②
HTMLの文書情報について

3限目
学科 HTML基礎②
セクション分類タグについて

4限目
学科 HTML基礎②
コンテンツ分類タグについて

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

本日のテーマ

HTMLの基本構造を理解しましょう

【まとめサイト】

• HTMLとCSSの基礎をまとめたサイト
  https://samplesdl.me/training_html-css/

【動画】

• HTMLとCSSのリファレンスサイトとタグチェッカー
  https://youtu.be/cqKRlqgMwW0（11分20秒）

HTMLの基本構造について

<!DOCTYPE html>
<html lang=”ja”>
<head>
　　（文書の情報を記述）
</head>
<body>
　　（文書の本体を記述）
</body>
</html>

• !DOCTYPE 宣言（ドキュメントタイプ宣言）
• html 要素（HTML の文書）
• head 要素（文書情報）
• body 要素（文書本文）

文書情報について

• title 要素（ページタイトル）
• meta 要素（文字コード指定/charset）
• meta 要素（ページの説明文/description）
• meta 要素（ページのキーワード/keywords）
• meta 要素（ページの作者情報/author）
• meta 要素（ビューポート/viewport）
• link要素（外部 CSS ファイルの紐付け）
• link要素（ファビコンファイルの紐付け）

文書本文について

• セクション分類タグ
• コンテンツ分類タグ
• テキスト分類タグ
• コンテンツ埋め込みタグ
• テーブルタグ
• フォームタグ

参考サイト

• HTML5における要素の分類（コンテンツ・モデル）
• HTMLのカテゴリーとコンテンツモデルを理解する
• HTML5 コンテンツモデル ガイド

ブロックレベル要素とインライン要素について

要素の多くは、ブロックレベル要素とインライン要素に分類されます。
ただし、HTML5ではブロックレベル要素とインライン要素という考え方はなくなっていますので、あくまでも性質を持っていると考えておきましょう。

参考サイト

• ブロックレベル要素とインライン要素－HTMLの基本
• 【基礎知識】ブロックレベル要素・インライン要素の性質と …
• 【HTML】3分でわかる！インライン要素とブロック要素の …

セクション分類タグについて

• h1～h6 要素（見出し）
• article 要素（アーティクル）
• section 要素（セクション）
• header 要素（ヘッダー）
• footer 要素（フッター）
• nav 要素（ナビ）
• aside 要素（アサイド）

参考サイト

• 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…）の正しい使い方

コンテンツ分類タグについて

• p 要素（段落（パラグラフ））
• hr 要素（区切り）
• ul/li 要素（順序のないリスト）
• ol/li 要素（順序のあるリスト）
• dl/dt/dd 要素（定義・説明リスト）
• div 要素（ひとつのかたまりの範囲）
• main 要素（メインコンテンツ）

ワンポイントアドバイス

マークアップに悩んだらとにかく「p」にしましょう。

本日の課題

本日学んだ内容を復習して整理しておきましょう。
ポートフォリオサイトの投稿ページ作成が出来る方は投稿ページにまとめておくと良いです。

本日のテーマ②

ここからは補足資料になります。
情報収集など手を動かしながらの視聴でも構いません。
もしくはお時間のある時にご自身で視聴ください。

pdfを活用してみましょう！

みなさんこれから企業さん用の応募書類（データ）を作成していきますので、pdfを上手く活用し、また使い方の理解も高めて、しっかりと就活に向けた準備を進めていきましょう。

【資料】

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

下記のファイルをダウンロードしましょう。
「技術pdfについて.pdf」　

【動画】

pdfとは？ (9:43)
https://youtu.be/T3WMz7yfH-E

PDFとHTML (6:45)
https://youtu.be/mMNNOhdvxsY

ポートフォリオサイトでのpdfのご利用方法について1-2 (7:46)
https://youtu.be/YJMLYhnJePc

ポートフォリオサイトでのpdfのご利用方法について3 (15:59)
https://youtu.be/RlIq4poare8

押さえておきたいpdfの技術3選 (8:44)
https://youtu.be/qcf5H_oN3hM

参考サイト「PDFをパスワードで保護する」

• PDFパスワードを設定する方法【2023年版】 – PassFab
• PDFを保護。パスワードでPDFを暗号化するツール
• PDFをパスワード保護 – オンラインでPDFを暗号化

参考サイト「様々なソフトからpdf化出来る」

• 書類をPDF化する方法は？データ化（電子化）するメリットや …
• 書類をPDF化する5つの方法！おすすめ保存方法も紹介
• 紙の書類をPDFに変換する方法や注意点を解説

-本日のアジェンダ-

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

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

3限目
学科 HTML基礎①
Webサイト制作時の知識について

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

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

本日のテーマ

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

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

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

参考サイト

• Webサイト制作の6つの流れと整理すべき重要ポイント
• Webサイト制作の流れと成功のポイントを3ステップで解説！
• 10分で分かるホームページ制作の流れ・期間

【資料】

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

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

【動画】

• Webサイト作成の流れ
  https://youtu.be/6XKZUM-PsT8（12分50秒）
• HTMLとCSSとは
  https://youtu.be/9Ua74jQoOCk（9分37秒）
• HTMLとCSS・の役割
  https://youtu.be/mGUGcuTooR8（9分17秒）
• コーディングの手順
  https://youtu.be/p5EK6NKPFe4（11分46秒）

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の基本構造について

タグの構造

<要素名 属性=”属性値”>

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

HTMLの基本構造

<!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 ページとして表示されます。

doctype宣言とは？

HTML5におけるDOCTYPE宣言はあまり意味を持たないとされていますが、 作成した文書がHTML5によるものであることを、ブラウザなどに明示的に伝えるために記述しておいたほうが良いでしょう。

DOCTYPE宣言が無いと、一般的なブラウザではレンダリングモードが互換モード（Quirks mode）となります。 互換モードのブラウザではCSSの解釈が標準と異なるため、制作者の意図しないレイアウトになってしまう場合があります。 ブラウザに標準モード（Standards mode）で解釈させる場合には、DOCTYPE宣言を記述する必要があります。 主要なブラウザでは文書の先頭に <!DOCTYPE html> と記述することで標準モードとなります。

参考サイト

• 【HTML初心者入門者向け】doctype宣言とは？
• HTML5とHTML4.01 正しいDOCTYPE宣言で仕様に準拠しよう
• !DOCTYPEの宣言 – HTML5/HTML4/XHTMLで正しい指定方法 …

ワンポイントアドバイス

楽天のショッピングサイトなどのテンプレートでは、 DOCTYPE宣言が無く互換モードになり、CSSが思うように使えなくなる場合があります。その場合やむを得ず、違う方法を使わなければならない場合がありますので、お仕事で担当した時は、 DOCTYPE宣言は必ず確認しておきましょう。

本日の課題

本日学んだ内容を復習して整理しておきましょう。
ポートフォリオサイトの投稿ページ作成が出来る方は投稿ページにまとめておくと良いです。