投稿者: master

学科 HTML基礎②【オンライン】

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

【まとめサイト】

【動画】

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ではブロックレベル要素とインライン要素という考え方はなくなっていますので、あくまでも性質を持っていると考えておきましょう。

参考サイト

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

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

参考サイト

ワンポイントアドバイス

見出し（h1～h6）要素でh1タグ以外は、特に使用回数に制限はありません。h2やh3などは大きな見出しとなることが多いためたくさん使われると思います。「h1タグは1ページで一回の使用で抑え、数字の順序をしっかり守ること」これを守っていれば使用になんら問題はありません。ただ、html5の場合は、sectionタグやarticleタグと組み合わせることで1ページに複数のh1タグを記述することができます。

参考サイト

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

  • 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化出来る」

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

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

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

参考サイト

【資料】

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

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

【動画】

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

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

ワンポイントアドバイス

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

タグの構造

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

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

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> と記述することで標準モードとなります。

参考サイト

ワンポイントアドバイス

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

本日の課題

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

実技　ECサイトデザイン実習③

-本日のアジェンダ-

1限目
実技　ECサイトデザイン実習③
成績考査

2限目
実技　ECサイトデザイン実習③
成績考査

3限目
実技　ECサイトデザイン実習③
成績考査

4限目
実技　ECサイトデザイン実習③
成績考査

5限目
実技　ECサイトデザイン実習③
成績考査・提出確認

本日のテーマ

成績考査です

本日の課題

①バナー作成 -バリエーション展開-

バナーのサイズ違いを展開して作成して下さい。
【サイズ展開】
(幅width × 高さheight)
・750px × 290px
・250px × 250px
・320px × 100px
・320px × 50px
・120px × 600px (縦長)
今までに作成したバナーから、別サイズを展開してもOKです。
作成したバナーを4限目終了までにご自身のWordpressに新規固定ページを作成してUPしてください。
5限目に提出チェックを行います。

②WP(ポートフォリオ)サイトチェック

バナー投稿が終わったら、残りの時間でポートフォリオサイトを整理しましょう。

WordPressへの成績考査の上げ方

ご自身のWordPressに成績考査用のバナーを投稿していただきます。
手順は以下の通りです。

①固定ページに新規投稿で作成します。

②タイトル(タイトルを追加の部分)に「第3回成績考査」、次のブロックに見出し(H2)で氏名(漢字フルネーム)を入力して下さい。

③以降のブロックにバナー画像をブロックエディタ「画像」にてアップロードし、キャプション部分にそのバナーサイズを記載して下さい。
キャプションが出ない場合は、その下に通常の文章の投稿でも構いません。
これをサイズ違いバナー、５種分繰り返して下さい。

④投稿設定のパーマリンクのURLスラッグに下記を設定して下さい。
「grade-check_20231031」

⑤公開状態をパスワード保護にします。パスワードは「test」と設定して下さい。

⑥公開にして終了です。固定ページ一覧に作成したページが出来ているか確認して下さい。

実技 ECサイトデザイン実習②

– 本日のアジェンダ –

1限目
実技 ECサイトデザイン実習②
クライアント確認について

2限目
実技 ECサイトデザイン実習②
バナー作成

3限目
実技 ECサイトデザイン実習②
バナー作成

4限目
実技 ECサイトデザイン実習②
バナー作成

5限目
実技 ECサイトデザイン実習②
バナー 講評

本日のテーマ

馴染んでください

クライアントへの確認方法

デザインした制作物をクライアント（発注者）に確認を入れる場合は、そのまま見せる事が最も解りやすい方法です。バナーを作成したらページにそのまま当て込んで（テストアップ等）確認をとります。

ワンポイントアドバイス

バナーを作成したら、スクリーンショットしたページに当て込んでみましょう。違和感が無かったら成功です。ページに馴染むようにデザインの基本ルール「レイアウト」「文字」「配色」に気を付けて作成してみてください。

本日の課題

バナー作成練習 -あて込み-

ご自身で選んだジャンルのバナーを作成し、ページ画像に当て込んで下さい。
4時限目終了までにご自身のポートフォリオサイトにアップしましょう。
5限目に講評を行います。

※バナーサイズ設定は自由です。
※目標2つ以上で制作しましょう。