20240325HTML.CSS

-本日のアジェンダ-

CSS のたくさんの細かい解説を教えていただきました
聞いたことをまとめておくことが大切

HTML

CSSにある点数が検索順位にも効いてくるのでその辺のことをまとめておくといいと思った。

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

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

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

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

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

本日のテーマ

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

【まとめサイト】

【動画】

リセットCSSついて

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

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

セレクタの得点について

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

Chrome検証ツールについて

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

FTPについて

FTP（File Transfer Protocol）とは、サーバとクライアントの間でファイル転送を行う際に必要となる通信プロトコル(通信する際の手順や規約)の一つです。

WEBサイトを公開するためには、作成したデータ（HTMLファイルやCSSファイル、画像など）をWEBサーバーに転送する必要があります。FTPソフトを使ってFTPサーバに接続することでファイルを転送することができます。

FFFTP でサーバーに FTP 接続を行うためには、以下の情報が必要です。

【サーバー名】
接続するサーバーのドメイン名です。「サーバー名／ホスト名／FTP ホスト名」などと呼ばれています。

【ユーザー名】
接続するサーバーに登録されているユーザー名です。「ユーザー名／アカウント名」などと呼ばれています。

【パスワード】
接続するサーバーに登録されているユーザーのパスワードです。

訓練で使用するサーバーでは、「サーバー名」「ユーザー名」はアジェンダのサイドバーにある「 Serverリスト」に記載されています。

パスワードは個人のものを設定します。以下のルールでパスワードを設定してください。
・使えるのは半角英(小文字)、数字
・一文字めはアルファベット
・８〜１０文字
パスワードは忘れないようにきちんと管理しましょう。

本日の課題

本日学んだ内容を復習して整理しておきましょう。
ポートフォリオサイトの投稿ページ作成が出来る方は投稿ページにまとめておくと良いです。投稿日:カテゴリー未分類学科 CSS基礎①にコメント

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

参考サイト