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

-本日のアジェンダ-

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のプロパティと値を考える

【資料】

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

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

【動画】

本日の課題

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

学科 CSS基礎①

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

【まとめサイト】

【動画】

リセットCSSついて

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

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

セレクタの得点について

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

Chrome検証ツールについて

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

本日の課題

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

学科 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://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

参考サイト

学科 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のコードを記述する時に特別な書き方をする必要のある文字があります。

参考サイト

本日の課題

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

本日のテーマ②

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

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

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

【資料】

カリキュラム資料 ダウンロード用サイト
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

参考サイト