2023年4月 – DEAUアカデミー WEBデザイナー養成科

-本日のアジェンダ-

1限目
学科 CSS基礎③
レイアウト系のプロパティについて

2限目
学科 CSS基礎③
練習問題の説明

3限目
学科 CSS基礎③
CSSのプロパティと値を考える

4限目
学科 CSS基礎③
練習問題の解説

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

本日のテーマ

レイアウトデザイン練習問題③（レイアウトを定義するCSS）

本日は、レイアウト系のCSSを中心に説明しますが、一部のプロパティと各プロパティの詳細説明は「CSS基礎④」で説明します。

レイアウト系プロパティ

width プロパティ（内容の幅）
max-width プロパティ（幅の最大値）
min-width プロパティ（幅の最小値）
height プロパティ（内容の高さ）
max-height プロパティ（高さの最大値）
min-heightプロパティ（高さの最小値）
float プロパティ（回り込み）
clear プロパティ（回り込みを解除）
position/top/left/bottom/right プロパティ（要素の配置方法）【CSS基礎④で説明】
z-index プロパティ（重なりの順序方法）【CSS基礎④で説明】
display プロパティ（要素の表示方法）
overflow プロパティ（ボックスからあふれた内容の処理方法）

ボーダー系プロパティ【CSS基礎④で説明】

border-style プロパティ（ボーダースタイル）
border-color プロパティ（ボーダー色）
border-width プロパティ（ボーダー幅）
border プロパティ（ボーダー一括指定）
border-top/-bottom/-left/-right プロパティ（ボーダー上下左右一括指定）

パディング系プロパティ

padding-top/-bottom/-left/-right プロパティ（パディング上下左右）
padding プロパティ（パディング一括指定）

マージン系プロパティ

margin-top/-bottom/-left/-right プロパティ（マージン上下左右）
margin プロパティ（マージン一括措定）

マージンの相殺
マイナスマージン
ボックスの中央配置
ボックスの右端配置

その他のプロパティ【CSS基礎④で説明】

border-radius プロパティ（ボーダーの丸み）
box-shadow プロパティ（ボックスの影）
box-sizing プロパティ（ボックスサイズ計算）
content プロパティ（挿入コンテンツ）
object-fit プロパティ（画像トリミング）
object-position プロパティ（画像の配置位置指定）

練習問題：レイアウトを定義するCSS

【資料】

ドロップボックスの資料をダウンロードしましょう。
資料＞【STEP3】Webページの理解＞レイアウトデザイン練習問題③
Webサイト制作のレイアウトを定義するCSSの練習資料です。

【動画】

レイアウトを定義するCSS
https://youtu.be/MeZU0DWXkbw（8分39秒）

本日の課題

WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。

-本日のアジェンダ-

1限目
学科 CSS基礎②
CSSのプロパティと値について

2限目
学科 CSS基礎②
練習問題の説明

3限目
学科 CSS基礎②
CSSのプロパティと値を考える

4限目
学科 CSS基礎②
練習問題の解説

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

本日のテーマ

レイアウトデザイン練習問題②（CSSのプロパティと値を考える）

バックグランド系プロパティ

background-color プロパティ（背景色）
background-attachment プロパティ（背景画像の位置）
background-image プロパティ（背景画像のファイル）
background-repeat プロパティ（背景画像の繰り返し）
background プロパティ（背景の一括指定）
background-size プロパティ（背景画像のサイズ）
background-position プロパティ（背景画像の表示開始位置）

テキスト系プロパティ

color プロパティ（文字の色）
opacityプロパティ（透明度）
text-align プロパティ（文字の配置）
text-decoration-color プロパティ（文字飾りの色）
text-decoration-style プロパティ（文字飾りの線種）
text-decoration-thickness プロパティ（文字飾りの線の太さ）
text-decoration プロパティ（文字の飾りの一括指定）
text-shadow プロパティ（文字の影）

フォント系プロパティ

font-family プロパティ（フォントの種類）
font-size プロパティ（フォントのサイズ）
font-weight プロパティ（フォントの太さ）
font-style プロパティ（フォントのスタイル）
line-height プロパティ（行の高さ）
font プロパティ（フォント一括指定）
white-space プロパティ（空白・改行の表示方法）
word-wrap プロパティ（単語の途中での改行方法）
word-break プロパティ（テキストや単語の改行方法）
tab-size プロパティ（タブ文字の表示幅指定）

リスト系プロパティ

list-style-type プロパティ（リストマーカーの種類）
list-style-image プロパティ（リストマーカーの画像）
list-style-position プロパティ（リストマーカーの位置）
list-style プロパティ（リストマーカーの一括指定）

練習問題：CSSのプロパティと値を考える

【資料】

ドロップボックスの資料をダウンロードしましょう。
資料＞【STEP3】Webページの理解＞レイアウトデザイン練習問題②
Webサイト制作のCSSのプロパティと値を考えるの練習資料です。

【動画】

CSSのプロパティと値を考える
https://youtu.be/pjYoKtBqrIQ（6分54秒）

本日の課題

-本日のアジェンダ-

1限目
学科 CSS基礎①
マークアップの練習について

2限目
学科 CSS基礎①
マークアップの練習について

3限目
学科 CSS基礎①
リセットCSSとセレクタの得点について

4限目
学科 CSS基礎①
Chrome検証ツールについて

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

本日のテーマ

検証ツールを活用しましょう

【まとめサイト】

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

【動画】

CSSの記述方法とプロパティ・検証ツールの活用
https://youtu.be/j-LrqX5K9SM（6分43秒）

リセットCSSついて

ブラウザは初期状態でタグ単位のデフォルトのスタイルシートを持っています。このデフォルトのスタイルシートの内容はブラウザによって異なるためブラウザ環境を変更すると意図しない表示になることがあります。このような現象を防ぐために使用するのがリセット CSS です。

リセット CSS は、ブラウザが持っているスタイルシートをリセット（クリア）するためのスタイルシートですがリセットする範囲はコーディングスタイルに依存するため、これが正解というリセット CSS は存在しません。各自のコーディングスタイルに合わせて適時変更してください。

セレクタの得点について

セレクタには優先順位があり点数計算をして高得点のものが採用されます。同じ得点の場合は後ろに書いてあるものが採用されます。点数計算の結果によっては前に書いてあるセレクタが採用されてしまうことがありますので意図したスタイルにならない時は点数を確認してください。

Chrome検証ツールについて

ブラウザに表示されるWebページの設定情報を参照したり、想定通りに表示されない場合の調査には、Chrome の検証ツールの使用が有効です。また、スマートフォンやタブレットでの表示型式を確認することもできます。

本日の課題

-本日のアジェンダ-

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 関数）

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

【資料】

ドロップボックスの資料をダウンロードしましょう。
資料＞【STEP3】Webページの理解＞レイアウトデザイン練習問題①
Webサイト制作のマークアップの練習資料です。

【動画】

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

本日の課題

-本日のアジェンダ-

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 要素（画像）
画像の埋め込み表示を指定します。本要素には、終了タグがありません。
img要素では、alt属性を使用して代替テキストを指定してください。「代替テキスト」は、画像が表示できない時に画像の代わりに表示するテキストを指定します。必須項目なので必ず指定してください。
iframe 要素（インラインフレーム）
インラインフレーム内に「フレーム内に表示する URL」で指定した URL の内容を表示します。「補足情報」には表示する内容の補足的な情報を指定します。
「フレームの幅」と「フレームの高さ」には、作成するフレームの大きさを指定します。幅の初期値は 300、高さの初期値は 150 です。

画像の取り扱いについて

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

参考サイト

ワンポイントアドバイス

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

テーブルタグについて

テーブルとは<tr>、<th>、<td>などと組み合わせて表を作成するためのタグです。表の基本的な構造は<table>～</table>の中に<tr>～</tr>で表の横部分を指定し、その中に<th>～</th>や<td>～</td>で表題や縦軸を指定してセルを定義します。この時ヘッダセルのテキストは、一般的なブラウザでは太字になりセンタリングされます。
<table>はしばし、レイアウトのために使用されることがあります。しかし本来の使用方法ではありませんので、レイアウトで同様の効果が欲しい場合はスタイルシートを利用するとよいでしょう。

<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行の範囲）
1行の範囲を指定します。
th要素（タグ見出し）
タグ見出し項目を指定します。
td要素（データ項目）
データ項目を指定します。

参考サイト

ワンポイントアドバイス

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

フォームタグについて

form 要素（フォーム）
入力フォームの作成を指定します。フォーム要素にフォームを構成するフォーム要素（部品）を配置します。
label 要素（ラベル）
入力フォームのフォーム部品とラベルを関連付けます。一般的には、関連付けを行うことでラベルをクリックしてもフォーム部品をクリックしたのと同じ効果を出すことができます。
input 要素（インプット）
テキスト入力欄やボタンなそのフォーム部品を作成します。本要素には、終了タグがありません。
textarea 要素（テキストエリア）
複数行のテキスト入力ボックスを作成します。本要素には、終了タグがありません。
select/option 要素（セレクト／オプション）
select 要素は、option 要素で指定されたリストからの選択ボックスを作成します。
button 要素（ボタン）
ボタンを作成します。
fieldset/legend 要素（フィールドセット／レジェンド）
fieldset 要素は、フォーム要素をグループ化します。legend 要素は、グループ化した要素群のキャプションを指定します。

CSSとの紐付けについて

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

参考サイト

特殊文字について

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

参考サイト

本日の課題

学科 HTML基礎②

-本日のアジェンダ-

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

文書情報について

title 要素（ページタイトル）
Web ページのタイトル名を記載します。多くのブラウザではブラウザのタイトルタブに表示される名称となります。
meta 要素（文字コード指定/charset）
HTML を記述している文字コードを指定します。文字コードが UTF-8 の場合は “UTF-8” と指定します。
meta 要素（ページの説明文/description）
ページの概要を示す説明文を指定します。一般的には検索サイトでページ概要として表示され、PC は 120 文字程度、スマホは 50 文字程度が表示文字数となります。
meta 要素（ページのキーワード/keywords）
ページの検索キーワードをカンマ（,）で区切って指定します。キーワードの有効可否は検索サイトに依存します。
meta 要素（ページの作者情報/author）
Web ページの作成者情報を指定します。
meta 要素（ビューポート/viewport）
Webページの表示領域を指定します。上記の “width=device-width” デバイスの表示幅に合わせた表示領域を使用することを示し “initial-scale=1.0” は 1.0 倍の倍率で表示することを示します。 viewportを指定していないWebページをスマホで表示するとPC用の画面が縮小されて表示されます。 viewportを指定して複数の装置のデザインを実装することをレスポンシブWebデザインといいますが正しく実装するには、HTML に viewport を記述すると同時に CSS にレイアウト調整を行う記述が必要となります。
link要素（外部 CSS ファイルの紐付け）
外部のスタイルシートファイルとの紐付けを指定します。
link要素（ファビコンファイルの紐付け）
ファビコンファイル（Web ページのシンボルアイコンファイル）との紐付けを指定します。一般的なファビコンファイル名は “favicon.ico” になります。

文書本文について

文書本文に記載するタグには、以下の分類があります。

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

参考サイト

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

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

ブロックレベル要素
文書の骨組みとなる要素です（例えば見出しや段落など）。このタイプの要素は、body要素の直接の子要素として配置することができます。
インライン要素
文章中の一部として扱われる要素です（例えばリンクや文字の強調など）。このタイプの要素は、通常はブロックレベル要素内で使用します。

参考サイト

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

h1～h6 要素（見出し）
各レベルに従った見出しを指定します。一般的に h1 はページに 1 つだけ指定します
article 要素（アーティクル）
単独で成り立つコンテンツのブロックを定義します。
section 要素（セクション）
章のブロックを定義します。
header 要素（ヘッダー）
ページ上部のヘッダーブロックを定義します。セクション要素やアーティクル要素内のヘッダー情報としても使用可能です。
footer 要素（フッター）
ページ下部のフッターブロックを定義します。セクション要素やアーティクル要素内のフッター情報としても使用可能です。
nav 要素（ナビ）
グローバルナビゲーションのブロックを定義します。
aside 要素（アサイド）
ページの内容と関連がないブロックや補足情報のブロックを定義します。

参考サイト

ワンポイントアドバイス

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

参考サイト

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

p 要素（段落（パラグラフ））
段落（パラグラフ）を指定します。段落よりもふさわしい要素がある場合には使用するべきではありません。
hr 要素（区切り）
テーマや話題の区切りを指定します。
ul/li 要素（順序のないリスト）
順序性のないリスト要素を指定します。
ol/li 要素（順序のあるリスト）
順序性のあるリスト要素を指定します。
dl/dt/dd 要素（定義・説明リスト）
説明文リストを指定します。
div 要素（ひとつのかたまりの範囲）
ひとつのかたまりの範囲を指定します。
main 要素（メインコンテンツ）
ページのメインコンテンツブロックを定義します。

ワンポイントアドバイス

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

本日の課題

学科 HTML基礎①

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

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

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

参考サイト

【資料】

ドロップボックスの資料をダウンロードしましょう。
資料＞【STEP3】Webページの理解＞ Webサイト制作の手順の教科書.pdf
Webサイト制作の手順をまとめた資料です。

【動画】

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標準ではインストールされていませんのでインストールを行ってください。

参考サイト

文字コードについて

日本語を扱うための文字コードには、シフト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宣言は必ず確認しておきましょう。

本日の課題

実技ポートフォリオ作成実習①

-本日のアジェンダ-

1限目
実技ポートフォリオ作成実習①
WordPressサイトの掲載内容について

2限目
実技ポートフォリオ作成実習①
アンサーページの作成方法について

3限目
実技ポートフォリオ作成実習①
WordPressサイトに作品を掲載しましょう

4限目
実技ポートフォリオ作成実習①
WordPressサイトに作品を掲載しましょう

5限目
実技ポートフォリオ作成実習①
FTPコマンドの使用方法について

本日のテーマ

WordPressサイトの完成度を向上させましょう

WordPressサイトの掲載内容について

WordPressサイトには、以下の内容を掲載しましょう。

ポートフォリオサイト

ポートフォリオサイトとして活用できるように以下の項目を掲載してください。

ご挨拶
プロフィール（自己紹介）
- 名前
- 顔写真
- 生年月日
- 略歴
- 仕事への姿勢や意気込み
- 自己PR
保有スキル
- スキル項目
- スキルレベル
ポートフォリオ
- 作品
- 作成の説明
- 作品ツール
- 作成時間
- その他（苦労したこと、考慮したこと、学んだことなど）
後書き

訓練ブログ

学んだことの復習や忘れてしまったことを思い出す資料として訓練ブログを作成してください。

訓練の1日単位で投稿ページを作成してください。
ページのタイトルは、訓練内容がわかるようにしてください。

参考サイト

注意事項

テーマやプラグインを入れすぎるとサーバーのディスク容量が大きくなってしまうと同時にWordPressの動きが重たくなってしまうので不要になったテーマは削除するようにしましょう。

WordPressサイト作成時の注意事項

WordPressサイトの作成に当たっては、ポートフォリオとしての活用を中心に考えてサイト構成を考えてください。また、ポートフォリオの作成に当たっては、ポートフォリオを見る人の立場に立って考えてみましょう。

採用担当者の立場になって作りましょう（採用担当者が何をみたいか考えてみましょう）
トップページは作品主体にしましょう（ポートフォリオとしてのトップページを意識してみましょう）
操作性や導線を考慮しましょう（クリックの多すぎは見る気がしなくなります）
未経験者の場合は「学校でこんな事を勉強してきました」、「私はこんなことができます」をわかるようにしましょう

アンサーページの作成について

求人票には「○○の出来る方」というような条件がついている場合があります。このような時は、指定された条件の回答となるページを作成して提示することで保有スキルをアピールすることができます。
訓練の中では、成績考査の提出物をアンサーページとして作成してもらうこともあります。

アンサーページを固定ページで作成
アンサーページを開くためのメニュー項目を追加
必要に応じてアンサーページを開くためのパスワードを設定

参考サイト

FTPコマンドの使用方法について

HTML/CSSで作成したWebサイトを公開するためには、作成したWebサイトデータをサーバーにアップロードする必要があります。サーバーへのアップロードを行うには、FTPコマンドを使用します。FTPコマンドを使用したサーバーへのアップロード方法を理解しましょう。訓練ではFTPコマンドとしてffftpという名称のコマンドを使用しますが実際には使用するPC環境に合ったコマンドをインストールして使用してください。

本日の課題

作成中のWordPressサイトのサイト構成の再確認と作品掲載を進めましょう。

実技　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スラッグに下記を設定して下さい。
http://deau000□□(出席番号).wp.xdomain.jp/grade-check_20230405

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

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

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

馴染んでください

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

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

ワンポイントアドバイス

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

本日の課題

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

バナーの作成しスクリーンショットした画像に当て込んで下さい。
作成した作品を4限目終了までにドロップボックスにUPしてください。
5限目に講評を行います。
※ファイル名は、bnr_○○○○_20230404.jpg

2023年4月
月	火	水	木	金	土	日
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30