月: 2023年9月

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

【まとめサイト】

【動画】

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

  • 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サイトを重くする（表示スピードの低下）の大きな原因の一つは画像サイズです。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要素（データ項目）

参考サイト

ワンポイントアドバイス

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

フォームタグについて

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

CSSとの紐付けについて

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

参考サイト

特殊文字について

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

参考サイト

本日の課題

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

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

-本日のアジェンダ-

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

2限目
実技 ポートフォリオ作成実習①
WordPressサイト中間チェック

3限目
実技 ポートフォリオ作成実習①
WordPressサイト中間チェック

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

5限目
実技 ポートフォリオ作成実習①
WordPressサイトを拡充しましょう

本日のテーマ

WordPressサイトの中間チェックです

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

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

ポートフォリオサイト

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

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

訓練ブログ

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

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

参考サイト

注意事項

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

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

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

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

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

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

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

参考サイト

本日の課題

ポートフォリオサイトの完成度を上げてください。