初心者向け簡単WEBサイト制作のオンライン学習

初心者向けパソコン使い方や簡単なWEBサイト制作のオンライン学習

パソコン使ってお仕事される方へ、普段使っているエクスプローラやメール、Microsoft Excel、Powerpoint の使い方を基礎から勉強したい。

Microsoft Excel マクロやVBAを使って業務効率化したい。サンプルが欲しい。

Google スプレッドシートやスライドなども使いたい。

またWEBサイトでHTMLやCSSといった基本的な事と、WEBレイアウトの作り方、サーバー上にホームページを公開したいが、どのようにやるのか。必要なソフトは何か。

WordPressを使ってブログ公開したい。

などなど

基本的な事ですが、初心者向けにオンラインで双方で質疑しながら学習できる講習会を開催します。

最初は身近な人を対象に行い、内容をブラッシュアップしながら、徐々に募集範囲を広げていきます。

募集を公開しますので、もし宜しければご参加ください。

パソコン全般とWEBサイト作りの基礎講座

IT企業で経験した知識を皆さんのお役に立てればと考えております。

事前準備と事前知識

1. 事前準備・・・エディタとは。Visual Stdio Code（エディタ）ダウンロード。

Download Visual Studio Code

2. VS Code 初期設定・・・インストールと初期設定。日本語化など

インストールと初期設定

3. 事前知識・・・HTML、CSS、JavaScriptの違いと役割。基本この3つでWEBサイト作る

【初心者向け】HTML、CSS、JavaScriptの違いと役割について

•  HTML(エイチ ティー エム エル)は”顔のパーツ”
•  CSS(シー エス エス)は”お化粧”
•  JavaScriptは(ジャバ スクリプト)”動き”

HTML基礎

1. HTML基礎・・・主要なHTMLタグについて、簡易サンプル作り（hello world）

HTML基礎と主要なタグ

MDN（マニュアル）

CSS基礎

1. CSS基礎・・・CSSとは、HTMLとの役割と違い。HTMLは構造、CSSはスタイル。

CSSの基礎・基本を徹底解説｜初心者が覚えておきたい3つのポイント

MDN（マニュアル）CSS の基本

2. CSS作り方・・・書き方、作り方。セレクタ、プロパティ、値。

• HTMLタグ内に直接書く
• HTMLと別ファイルで作り、HTMLとリンクつけ

JavaScript基礎

1. JavaScript基礎・・・今回はブラウザ上で動くDOMをベースに説明。WEBサイトで登録しますか？などのポップアップなど動きのあるものをコーディングで作る。CSSと同様にHTML上に直接かく、別ファイルとしてHTMLとリンクして使う方法がある。

JavaScript の基礎（サンプル集）

MDN（マニュアル）JavaScript の基本

WEBサーバー基礎

1. WEBサーバー・・・作ったサンプルをWEBサーバーに公開し外部から閲覧を確認。googleドライブ使用。

HTMLファイルをWEBサーバーにアップロードして公開

HTMLをサーバーへアップロード公開２

2. プロトコル・・・HTTPS（WEBページ表示用）、FTP（ファイル転送用）など

各プロトコル

3. WEBサーバー・・・さくらレンタルサーバーでアップロード公開お試し

サンプルページ

4. WEBサーバー・・・google ドライブで静的WEBページ公開もできる

google ドライブでHTMLを公開

PC上でHTMLとCSSで作るサンプル

1. HTMLサンプル①・・・プロフィールサイト / 1カラムを作る

入門編：プロフィールサイト／LP

2. HTMLサンプル②・・・フォトサイト / 1カラムを作る

入門編：フォトサイト／LP