【非エンジニア向け】 手を動かして学ぶデジタル講座（その1）「ホームページ作成入門」


実際に非エンジニアの一般社員の方々を対象に実施したオンライン講座です。
ウェブデザイナーやエンジニア育成を目的としているのではなく、一般社員がデジタルへの苦手意識をなくし関心を持ってもらう第一歩になることを目的としています

いまこの世の中にあるウェブ系のサービスはHTMLでできてます。
１回でも簡単なHTMLで簡単なホームページを作れば、世界が広がり、デジタルへの敷居が低くなることでしょう。



時間は60分です。

では、はじめましょう。



<br><br>

## １．まず最初に

### 1-1. 想定する対象者
まったくホームページを作ったことがない初心者の方に教えるつもりで進めます。

### 1-2. 今日の最終ゴール
理屈は分からなくていいので、とりあえずホームページを作る！

### 1-3. 受講方法
講師のZOOM画面を見ながら、講師のいうとおり作業をしていく方式です。

理想は、「作業用パソコン１台 ＋ 視聴用パソコン１台」　または　「作業用パソコン１台 ＋ 視聴用タブレット１台」という環境で受講することを推奨します。
画面共有やチャット対応する場合があるかもしれませんので、視聴用、作業用ともにZOOMに接続してください。

|![Image from Gyazo](https://i.gyazo.com/45dcf91e27da9b2e4b9f28bd4d0079e5.png)|
|:-:|

<br>
パソコン１台の方は、以下の画像のように画面半分を使って受講してください。

[![Image from Gyazo](https://i.gyazo.com/1d255c6f5d6d9c6f068aa6ef500cb5f3.png)](https://gyazo.com/1d255c6f5d6d9c6f068aa6ef500cb5f3)

### 1-4. お断り
- 質問は適宜チャットでお願いします。
返答できない場合は、後でメールでお答えします。
なお、今回はプログラミングの講座ではないので、プログラミング関係の質問はご遠慮ください。

- 本講座は録画します。

- ZOOMのカメラを閉じてたら講師が寂しいので、カメラはつけたままにしてくれたら嬉しいです。

- 開始直後は受講者全員のペースを合わせますが、進行具合を見ながら、途中でどんどん進めていく場合がありますので、ご了承ください。
- 途中で付いていけなくなったらを、テキスト（このサイト）を見ながら、頑張って追いついてください。

- ミュートの設定をお願いします


### 1-5. 環境・使用ソフト

- OS:  Windows10以上
- Google Chrome （グーグルクローム）
- ZOOM
- メモ帳 


### 1-6. 事前準備の確認

<font color="RED">※実際の講座では以下の画像ファイルを事前準備事項としてました</font>

#### 画像ファイル
以下２つの画像ファイルはすぐに取り出せるところにありますか？

- カバー　　
ファイル名は、「cover.jpg, cover.jpeg, cover.png, cover.gif」 のいずれか

- アイコン
ファイル名は、「face.jpg, face.jpeg, face.png, face.gif」 のいずれか

<img src="https://i.gyazo.com/91b905ab84e11eb584b2a3ac6b61eb58.png" width="70%">




<br>

##２. HTMLでホームページを作成

### 2-1. はじめに
私たちがみるインターネットのホームページサービスは、フレームワークの違いはあるにせよ、根幹はHTMLとCSSでできています。
HTMLは、ホームページの土台の役割で、見出しや文字、画像の表示を担当します。
CSSは、ホームページのお化粧部分（デザインなど）を担当します。

今回は、HTMLとCSSを使って簡単な自己紹介ホームぺージを作ります。


<br>
### 2-2. 準備

デスクトップに「HP」という名前のフォルダを作成してください。

[![Image from Gyazo](https://i.gyazo.com/7cca2ef84cb890dcb52ebce0692a4df7.png)](https://gyazo.com/7cca2ef84cb890dcb52ebce0692a4df7)

メモ帳を開きます。
通常はプログラミング専用のエディターを使うのですが、今回は誰でも体験できるようにWindowsに標準についているメモ帳を使います。


####メモ帳の開き方

[![Image from Gyazo](https://i.gyazo.com/ecad2e43935e6b43b931b659321984b7.png)](https://gyazo.com/ecad2e43935e6b43b931b659321984b7)

Windows11の方は、こちらのリンク先をご参照ください。
https://tanweb.net/2021/10/12/43196/

<br>

### 2-3.Hello World

#### 2-3-1.入力
Hello world と打ってみてください。

|![Image from Gyazo](https://i.gyazo.com/da8dfecc4025930bc0226da99df3805f.png)|
|:-:|


プログラミング言語を最初に使うときに、
まず最初にすることが、「Hello World」 を表示させることがほとんどです。
しきたりとか慣例のようなものです。

<br>

#### 2-3-2.ファイルの保存
「名前をつけて保存」
すべてのファイルにして
ファイル名を index.html　としてください。

[![Image from Gyazo](https://i.gyazo.com/3cd18f6e2d73517ad84b88d5fdd76910.png)](https://gyazo.com/3cd18f6e2d73517ad84b88d5fdd76910)

<br>
#### 2-3-3.ブラウザで確認

「HPフォルダ」を開き、
「index.html」 をダブルクリックしてください。

ブラウザが起動し「Hello World」という文字が表示されます。

|![Image from Gyazo](https://i.gyazo.com/6d019adf539d04a3d666a58d1947263c.png)|
|:-:|


これを、インターネットにアップロードすれば、インターネット上で「Hello World」と表示されます。

※これは、ローカル（みなさんのパソコン限り）だけで、インターネットに公開されたわけではないです。


<br>



### 2-4.index.html の編集

では、自己紹介ホームページを作っていきましょう。

今日のゴール（完成イメージ）はこれです。

<img src="https://i.gyazo.com/1b6d01496db57ae60dc9e591fd35d347.png" width="60%">



<br>
さきほど作った index.html を編集します。
ダブルクリックするとブラウザが開くので、
右クリック　＞　プログラムから開く　＞　メモ帳

[![Image from Gyazo](https://i.gyazo.com/9bcdc39c9f418be448848e1b7aea4445.png)](https://gyazo.com/9bcdc39c9f418be448848e1b7aea4445)

<br>
Hello World は消して、
以下のように入力してください。



|![Image from Gyazo](https://i.gyazo.com/69255d0c61dc6d6b294b97039b6fc786.png)
|:-:|



上書き保存して、ブラウザを開いてください。

ブラウザの更新ボタンを押してください。

|![Image from Gyazo](https://i.gyazo.com/9ef7d5926ce4e820cd8826cd6f6391ab.png)|
|:-:|

こう表示されます。

|![Image from Gyazo](https://i.gyazo.com/2a2c38f7825af848ebd3e4bc2a70965d.png)|
|:-:|


あれっ、改行されていないですね。

以下の画像の「Tatsuya のホームページ」のあとに
&lt;br&gt;　といれてみてください。
br とはBreak の略で、改行という意味です。
これがHTMLタグとよばれるものです。

|![Image from Gyazo](https://i.gyazo.com/a39c876cd6a17740534f7ffcbf76530c.png)
|:-:|



上書き保存して、更新してください。

改行されましたね。

|![Image from Gyazo](https://i.gyazo.com/baea03b1bf144701edc454dd13c75059.png)
|:-:|

<br>

### 2-5. 自分ひとりでやってみるタイム

![3600fb35b96dcd212cc0d4b6f3240e74.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/46cca3fa-64b0-e1e0-3c84-dc34927108a1.png)


以下を入力してみてください。
（時間10分）

|![Image from Gyazo](https://i.gyazo.com/d7059b0c8eb92fb6d5688ea5c6ac7442.png)|
|:-:|


上書き保存して、ウェブを更新

|![Image from Gyazo](https://i.gyazo.com/dd8ff0b657060fe1dc0ccb30b8de6f21.png)|
|:-:|


ホームページらしくなってきました。

（講師メモ：　index.htmlのHTMLタグの意味をざザーっと説明）

<br>
（講師メモ：開始30分経過）



<br>

### 2-6. 画像挿入

先ほどのHPフォルダにimgというフォルダを作ってください。
 
[![Image from Gyazo](https://i.gyazo.com/f4deac1a249b518e8956c56b181a5430.png)](https://gyazo.com/f4deac1a249b518e8956c56b181a5430)

[![Image from Gyazo](https://i.gyazo.com/27c4b168979f7c820f58d3d430bbe020.png)](https://gyazo.com/27c4b168979f7c820f58d3d430bbe020)

img フォルダに　みなさんが準備してきたカバーとアイコンの画像ファイルを移してください。

|![Image from Gyazo](https://i.gyazo.com/978416a4aa2e0a5063f45c501cee31c9.png)|
|:-:|

先ほどの index.html に
以下の赤線を引いたところを入力してください。
ファイル名はご自分のファイル名に直してください。

|![Image from Gyazo](https://i.gyazo.com/e722eb002a093bd9fa8ee197dc0766ad.png)|
|:-:|

入力したら、
index.html を更新

|![Image from Gyazo](https://i.gyazo.com/edb805ceb7e66bb439a95e91eee0bd8b.png)|
|:-:|



ホームページらしくなってきました。
<br><br>

## ３. CSSでデザインする

あとはデザインで見栄えをよくする作業です。
それはCSSの役割です。

<br>
### 3-1. 自分ひとりでやってみるタイム

![3600fb35b96dcd212cc0d4b6f3240e74.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/46cca3fa-64b0-e1e0-3c84-dc34927108a1.png)

index.html に以下の赤線のHTMLタグを追加してください。
（5分）

|![Image from Gyazo](https://i.gyazo.com/f63081508b28b1fad8e5d922f8059dac.png)|
|:-:|


<br>
### 3-2. cssファイルの作成

HPフォルダに「CSSフォルダ」を作成
[![Image from Gyazo](https://i.gyazo.com/f712f15ae9cd2423fa89c5bff6f5c976.png)](https://gyazo.com/f712f15ae9cd2423fa89c5bff6f5c976)


メモ帳を開き、
以下のコードを全部コピーして、メモ帳へペーストしてください。

```style.css
  .wrapper {
    padding-top: 20px;
  }

  .content {
    width: 100%;
    max-width: 800px;
    margin: auto;
    padding: 16px;
    background-color: #fff;
    text-align: center;
  }

  .profile-image {
    margin: 16px 0 0;
    text-align: center;
  }

  .profile-image img {
    width: 200px;
    height: auto;
    border-radius: 50%;
  }


```

（講師メモ）ザーッとCSSの説明

<br>
「名前を付けて保存」

![スクリーンショット 2021-12-28 165504.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/17ccd700-6910-ba50-cb17-3fe50fd5bbdf.png)

「style.css」 というファイル名で　CSSフォルダに保存します。
[![Image from Gyazo](https://i.gyazo.com/36446b81d87ecc78a09389ae1b657124.png)](https://gyazo.com/36446b81d87ecc78a09389ae1b657124)

index.html を開くと

|![Image from Gyazo](https://i.gyazo.com/39c3e43d868fecc9dec9a04971d2e414.png)|
|:-:|


ホームページができました。

<br><br>


## ４. ホームページをアップロード

ホームページができましたが、まだこれは皆さんのパソコンの中だけの情報であって、インターネットで公開されているわけではありません。

実際にインターネット上で世界中のひとたちに見てもらうには、レンタルサーバーに契約し、そこにデータをアップロードする必要があります。

今日はしませんが、インターネットに公開したい方は、レンタルサーバーに契約してください。

ちなみに、私は「ロリポップ」というサービスを利用しています。
ロリポップ上で、HTMLやCSSファイルをドラッグ＆ドロップでアップロード可能です。

ロリポップ
https://lolipop.jp/
[![Image from Gyazo](https://i.gyazo.com/503eb90586b4426c1cc2d3454fd27fc0.png)](https://gyazo.com/503eb90586b4426c1cc2d3454fd27fc0)

ただ、これだとサーバ上を直にいじってしまって、なんかこわいので、
通常はFTPソフトを使ってロリポップにあげてます。
[Cyberduck](https://cyberduck.io/) 、[FFFTP](https://forest.watch.impress.co.jp/library/software/ffftp/) が有名です。

<br><br>

## ５．今後（本格的にするのなら）
本格的にやりたくなったら、

### オンライン講座

どっとインストール
https://dotinstall.com/
[![Image from Gyazo](https://i.gyazo.com/70e9fd769670c16d9eee9f3b7fa5cdf3.png)](https://gyazo.com/70e9fd769670c16d9eee9f3b7fa5cdf3)

Progate
https://prog-8.com/
[![Image from Gyazo](https://i.gyazo.com/7535c1bcf44b5c763d65ccfc6a009aa1.png)](https://gyazo.com/7535c1bcf44b5c763d65ccfc6a009aa1)

Udemy
https://www.udemy.com/ja/
[![Image from Gyazo](https://i.gyazo.com/e139e90a25963f4592a0d83a1d6276ee.png)](https://gyazo.com/e139e90a25963f4592a0d83a1d6276ee)


### エディター

Visual Studio Code
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
[![Image from Gyazo](https://i.gyazo.com/cb3822412f010d553bfb8b5ad2e37a93.png)](https://gyazo.com/cb3822412f010d553bfb8b5ad2e37a93)

ATOM
https://atom.io/
[![Image from Gyazo](https://i.gyazo.com/acb60eaf3fcd671424571d5122d5377d.png)](https://gyazo.com/acb60eaf3fcd671424571d5122d5377d)




### 困ったときは

ググる

<br>

## ６. ノーコードで簡単にホームページが作れるサービス

WordPress
https://wordpress.com/ja/
[![Image from Gyazo](https://i.gyazo.com/2186b2c2e075b40b21132c3e1ea781f0.png)](https://gyazo.com/2186b2c2e075b40b21132c3e1ea781f0)

Jimdo
https://www.jimdo.com/jp/
[![Image from Gyazo](https://i.gyazo.com/b7f62f6496aa5392b739468b4e55fa6d.png)](https://gyazo.com/b7f62f6496aa5392b739468b4e55fa6d)

私が Jimdo で作ったホームページ
https://makers-from-hiroshima.jimdosite.com/


<br><br>

### ７．最後に

これで終わりです。
みなさんがITやデジタルにさらなる興味を持たれるキッカケになれば幸いです。

以上です。

ありがとうございました。

<br>