投稿者: master

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

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

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

ポートフォリオサイト

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

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

訓練ブログ

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

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

参考サイト

注意事項

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

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

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

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

本日の課題

ポートフォリオサイト、訓練ブログの完成度を上げてください。
修了式前の4月13日（月）に発表会を行います。

学科 CSS基礎⑥

-本日のアジェンダ-

1限目
学科 CSS基礎⑥
画像の配置とトリミングについて

2限目
学科 CSS基礎⑥
バックグラウンド設定プロパティについて

3限目
学科 CSS基礎⑥
擬似クラス、擬似要素について

4限目
学科 CSS基礎⑥
CSSのまとめ

5限目
学科 CSS基礎⑥
CSSのまとめ

本日のテーマ

画像を使いこなしましょう

画像の配置とトリミングについて

  • object-fitプロパティ

参考サイト

バックグラウンド設定プロパティについて

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

参考サイト

疑似クラス・疑似要素 について

擬似クラスとは … 擬似クラスとは指定の要素が特定の状態である場合にスタイルを適用させるセレクタです。 文章構造の範囲外にある情報によってスタイルを変化させることができます。
 擬似要素とは、要素の一部に対してスタイルを適用できる指定方法です。 HTML​の要素を擬似的にCSSで設定するので、コーディングに手を加えることなく装飾を適用することができます。

ワンポイントアドバイス

疑似クラス・疑似要素はここまで学んだ基本的なCSSを更に効果的に使う為の技術です。ここまで学んだ内容を復習しながら使うと良いでしょう。

サンプルファイル（ CSSの記述【疑似クラス・疑似要素】）

疑似クラス系セレクタ

  • link 擬似クラス（未訪問リンクスタイル）
  • visited 擬似クラス（訪問済リンクスタイル）
  • hover 擬似クラス（オンカーソルスタイル）
  • active 擬似クラス（アクティブスタイル）
  • first-child/last-child 擬似クラス（先頭・最終の子要素指定）
  • nth-child 擬似クラス（n 番目の子要素指定）
  • nth-of-type 擬似クラス（同一のセレクタを持つ n 番目の子要素指定）
  • not 擬似クラス（指定値以外の要素指定）

擬似要素系セレクタ

  • first-letter擬似要素（要素の 1 文字目を指定）
  • first-line擬似要素（要素の 1 行目を指定）
  • before/after擬似要素（要素の直前・直後にコンテンツの挿入）

参考サイト

様々なCSSについて

ここまで学んだCSS以外にも様々なCSSがあります。また新しいものも出てきます。ただしブラウザによって使えるタグが異なったり、デバイス依存もあります。OSにも影響もあります。日々変わる業界の動向にアンテナを張っていきましょう。

ワンポイントアドバイス

まずはこれまで学んだCSSをしっかりと覚えてまずは、「知る」次に「使う」そしてお仕事で「使いこなす」を目指しましょう。
コツとしては、「自分なりにまとめる」をしっかりと定期的に行うと良いでしょう。

参考サイト

本日の課題

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