リカレント講座/Webデザイン/第１回

福岡商工会議所x九州産業大学 リカレント講座

Webデザイン基礎講座 第１回

受講者の方へ｜補足とお詫び

10日の講座中にご紹介したFileZilla Client のインストールの際、WinZip あるいは AVAST! Free AntiVirus など、FileZilla 本体とは別のオプションソフトウエアのインストールに同意された方がおられるかと思います。

フリーソフトウエアのインストール時には、そうしたスポンサー企業の関連ソフトのインストールを推奨されることがあります。悪意のあるソフトではありませんが、有料版のインストールを推奨するなど、使っていて邪魔になることがありますので、不要であれば、アンインストールすることをお勧めします。

日常的に Windows を使っていないので、このような現象が起こることを予期できておりませんでした。ソフトウエアのインストールについて、私のご説明不足をお許し下さい。

アンインストールの方法は、お使いの Windows の環境によって方法が異なる場合がありますので、 [ WinZip アンインストール ] などで検索して、その方法をご確認くださいますようお願い申し上げます。

以上、追加の説明とお詫びでした。

はじめに

ごあいさつ

Webを支える技術には、HTML, CSS, JavaScript, PHP といった複数の言語が存在しますが、本講習で体験していただくのは、HTMLとCSSによるWebサイトの構築です。
　Webに関連する技術とその応用分野は多岐に渡りますが、現代社会に広く受け入れられた標準技術とその背景にある思想を知ることは、「情報とは何か」、「情報はいかに収集・整理・共有・管理されるべきか」、また「情報社会とはいかなる性質のものであるか」を考える契機となります。皆様の今後の活動にとって、本講習での体験が何らかの視野の拡大につながれば幸いです。

自己紹介

井 上 貢 一（いのうえこういち）
九州産業大学 芸術学部 ソーシャルデザイン学科 教授
日本デザイン学会 / 芸術工学会 / 日本映像学会 / greenz people

CONTENTS

• 1. 前提の確認
  • 1.1. 情報発信の様々なかたち
  • 1.2. Webサイトの公開方法
  • 1.3. インターネットとWeb
• 2. PC環境の確認
  • 2.1. インターネットに接続できていますか？
  • 2.2. Windows でファイルの「拡張子」が見えていない方へ
  • 2.3. 基本操作の確認
• 3. 開発環境の準備
  • 3.1. 作るソフト（テキストエディタ）
  • 3.2. 見るソフト（ブラウザ）
  • 3.3. 転送するソフト（FTPクライアント）
  • 参考
• 4. 基本サンプルのダウンロードと動作確認
  • 4.1. サンプルのダウンロードと解凍
  • 4.2. サンプルの表示確認
  • 4.3. サンプルのフォルダについて
• 5. 編集体験
  • 5.1. Webサイト制作の基本
  • 5.2. テキストエディタを起動して下さい
  • 5.3. 体験のプロセス
  • 5.4. index.html の編集体験
  • 5.5. style.css の編集体験
  • 5.6. ソースコードの書き方について
• 6. レンタルサーバーを利用したサイトの公開
  • 6.1. アカウント取得について
  • 6.2. アカウント名について
  • 6.3. FTP接続情報の取得について
  • 6.4. サーバーへの接続
  • 6.5. サーバーへのアップロード
  • 参考事例｜X-Freeサーバー
• 7. 参考：GitHub を利用したサイトの公開
  • 7.1. GitHubとは
  • 7.2. アカウントの作成
  • 7.3. リポジトリの作成
  • 7.4. ファイルのアップロード
  • 7.5. 公開設定
  • 7.6. サイトの更新
  • 付記：不要なリポジトリの削除

1. 前提の確認

1.1. 情報発信の様々なかたち

• Blog、WikiなどのWebサービスを利用したWebサイト
  HTML+CSSの知識は不要。アカウント取得で、すぐに情報発信が可能です。
  • Blog ＞　事例：WordPress
  • Wiki ＞　事例：Seesaa Wiki

• ウェブサイトビルダーで編集・作成するWebサイト
  HTML+CSSの知識は不要。お好みのテンプレートを選んで、画面上でサイトのデザインを行うことができます。
  • Wix（ウィックス）　http://ja.wix.com/　
  • Jimdo(ジンドゥー）　http://jp.jimdo.com/

• 一般的なWebサイト（静的サイト）（本講習の内容）
  HTML、CSS 等、直接コードを記述して制作します。
  あらゆる応用技術の基本となります。

• CMSをカスタマイズした Webサイト（動的サイト）
  HTML、CSS、JavaScript、PHP といった言語とサーバー管理の知識が必要になります。以下、いずれもオープンソースなので、無料でダウンロードして、自分のサイトのシステムとして利用することが可能です。
  • Blog：WordPress　← 世界中のサイトの約40%がこれです。
  • Wiki：PukiWiki、MediaWiki
    
    

1.2. Webサイトの公開方法

Webサイトを公開するには、以下のような方法があります。

• レンタルサーバーを利用したサイトの公開 > 第６節
  一般的なWebサイトの公開方法です。有料・無料、様々なものがありますが、独自のドメイン名 xxxxx.com などを利用する場合は有料になります。無料プランの場合、通常はページの中に広告が埋め込まれます。例えば、以下のようなサービスがあります。
  • XFREE
  • Star Server Free
  • 忍者ホームページ
  • FC2ホームページ
  • Google: 無料レンタルサーバー 比較
  • 数ヶ月に１回の更新手続きが必要になるケースもあるのでご注意下さい。

• 自社サーバーを利用したサイトの公開
  すでに契約済みのサーバーがある場合は、レンタルサーバーの場合と同様の作業でWebサイトを公開可能です。

• GitHubPages を利用したサイトの公開 > 第７節｜参考
  世界中のプログラマがソフトウエアの共同開発に利用しているホスティングサービスで、様々なファイルをアップロード共有できる他、HTML+CSS+JavaScript による静的なサイトのアップロード公開も可能です。
  • アカウントの取得で、無料で利用できます。
  • Webページ上に広告等は入りません。
    
    

1.3. インターネットとWeb

• Webはオープンな技術です
  Webページを記述するHTMLやCSSは、誰でも自由に見ることができるオープンなソースコードでできているので、ブラウザ上で 右クリック ＞ ページのソースを表示 とすると、そのページのソースコードを見ることができます。あらゆるWebサイトをページ作りのお手本として参考にすることができます。
  　逆に言えば、あなたが作成したWebサイト上の情報は、基本的にオープンなものになります。公開する以上は、その情報が複製・拡散されることを「良し」とする・・従来のメディアとは知的財産に対する考え方が根本的に違うので、その点についての意識改革が必要になります。

• インターネット上には、オープンなプログラムや画像・音声資源があります
  Webページづくりに必要な技術情報はもちろん、Webページの表示・動作を拡張するライブラリや、画像・音声データなど、無料で自由に使用できる情報資源が多く存在します。
  参考：OpenSource　CreativeCommons

• 様々なサービスの埋め込みが可能です
  • YouTube, vimeo などの動画共有サイトには、埋め込みコードが提供されています。自分のサイトに埋め込み表示して構いません。
  • GoogleMaps でも埋め込みコードが提供されます。埋め込み可です。
  • Twitter, Facebook等のサービスでは、タイムラインを埋め込むコードを取得することができます。同様に自分のサイトに埋め込むことが可能です。

• リンクに許諾は不要です
  他のWebサイトへのリンクは、単に道案内をしているだけなので、著作権侵害にはあたりません。訪問者にとって参考となるサイトへのリンクは、自由に作成して構いません。
  
  
  
  

2. PC環境の確認

2.1. インターネットに接続できていますか？

• 接続先：KIND_Wi-Fi_1X_5GHz
  
  

2.2. Windows でファイルの「拡張子」が見えていない方へ

拡張子というのは、index.html photo.jpg document.docx などの、ファイル名の後ろについている「ファイルの種類を明示する文字列」のことです。

買ったばかりの Windows は、初心者がこの拡張子を間違って書き換えてしまうことがないように、あえてこの部分が「非表示」になっています。プロとして仕事をする際、これが諸悪の根源となるので、システムの設定を変更して「表示」にしておきましょう。以下その手順です。

• エクスプローラーを開きます。
• エクスプローラーの「ファイル」をクリックします。
• メニューから［フォルダーと検索のオプションの変更］をクリックします。
• フォルダーオプションダイアログが開くので、「登録されている拡張子は表示しない」のチェックを外して下さい。
  チェックを外す　＝　表示する　ということになります。

参考：Windows で実行可能な18種類の拡張子
http://tooljp.com/qa/75C3F9E971AE05FB49257D9200499246.html

2.3. 基本操作の確認

• コピー＆ペースト[CTRL]+[C] ＞ [CTRL] + [V]
• 保存：[CTRL] + [S]
• ファイルの複製：[CTRL] + Drag
• スクリーンショット
  • Windowsの場合（参考）：https://www.pc-koubou.jp/magazine/35994
  • Mac の場合：[COMMAND]+[SHIFT]+[4]
    
    
    
    

3. 開発環境の準備

Webデザインには以下の３種類のソフトウエアが必要です。いずれもオープンソースのフリーソフトウエアとして入手できるので、金銭的な負担は一切ありません。PCが一台あれば、誰でもすぐにはじめることができます。

3.1. 作るソフト（テキストエディタ）

ただ単に文字を入力・編集する・・プログラミングに用いる最もシンプルなソフトウエアがテキストエディタです。これで作成した文字が並んだだけのデータファイルを「テキストファイル」といいますが、Webデザインで扱うのは大半がこのテキストファイルなので、特別なソフトは不要です*1。

• TextEditor
• Atom　← インストールをお勧めします（本講習ではこれを使います）。
  使い慣れたテキストエディタがある方はそれでも作業可能です。
  
  

3.2. 見るソフト（ブラウザ）

Chrome、Firefox、Safari、Microsoft Edge（Internet Explorer）、などホームページを閲覧するソフトをブラウザといいます。～.htmlをダブルクリックすると、通常これ(デフォルトブラウザ)が起動します。ページが正しく表示されるか複数のブラウザで確認する必要があります。

• Browser
• Firefox　← Web開発には、これをお勧めします。
  次回までに各自でインストールをお勧めします（必須ではありません）。
  
  

3.3. 転送するソフト（FTPクライアント）

FileZilla、FFFTP、Cyberduck、FireFTP(Firefox拡張)など、出来上がった～.html ファイルや画像データを、自分のパソコンから、リモート(遠隔地にある)・サーバーへ転送するのが、主な役割です。作ったファイルは、サーバーにアップロードすることによって、はじめて世界中から見えるページになります。

• FTP
• FileZilla　← インストールをお勧めします（本講習ではこれを使います）。
  FFFTP等、すでにお使いのものがあれば、それをご利用下さい。
  
  

参考

上記サイトからうまくダウンロードできない場合は以下をご利用ください。
すみません、Windowsのバージョンが様々なようで、逆に混乱を招くようでしたので、リンクを外しました。公式サイトより、お手持ちのPCに最適なものをダウンロードしてご利用下さい。

付記１
ソフトウエアのインストール時には、インストーラーの指示に従って作業を進める途中で、スポンサー企業等が作る「追加のソフトウエアのインストールをお勧め」されることがあります。基本的には不要なので「チェックを外して先に進める」ことを推奨します。

なお、配布されるソフトウエアには、インストーラータイプ の他に ZIPタイプ のものを選べる場合があります。ZIP版の場合は、解凍（展開）するだけで、すぐに使用することができます。インストーラタイプで生じるような「余計なソフトを追加インストール」する心配もないので、お勧めです。

いずれにしても、フリーソフトウエアをインストールする際には、「（当該ソフト名）＋　インストール」などで検索して、インストール方法に関する紹介記事を複数確認することをお勧めします。

付記２
ソフトウエアを削除するには・・

• インストーラータイプの場合
  パソコンのシステムフォルダのあちこちに関連するファイルがばらまかれた状態になっているので、専用の「アンインストーラ」を使った削除が必要になります。Windowsの場合は、コントロールパネルの「プログラムと機能」から当該ソフトを見つけて「アンインストール」するのが一般的で、Macの場合は、パッケージフォルダの中にある「専用のアンインストーラ」を使うのが一般的です。
• ZIPタイプの場合
  PC全体には影響を与えていないので、フォルダごと削除するだけです。
  
  

付記３
ダウンロードとインストール（セットアップ）は別のプロセス なのですが、スマートフォンの場合は、これが同時に行われるので、スマホネイティブの方はこの区別がついていないことが多いようです。
　パソコンにフリーソフトウエアをインストールする場合、一般的にはダウンロードするだけではダメで、その次に、インストーラープログラムを起動してセットアップ（すなわち関連するファイルを必要な場所に配置）する・・という手順になります。尚、上述のZIP版は、ダウンロードして解凍するだけでそのままで実行できます（セットアップは不要です）。

4. 基本サンプルのダウンロードと動作確認

まずは、Webサイトを構成するファイルを丸ごとダウンロードしていただき、それを改編しながら、各ファイルの役割を確認していただきたいと思います。

4.1. サンプルのダウンロードと解凍

HTML+CSS によるWebサンプルです。以下から丸ごとダウンロードして、フォルダを開けてみて下さい。

• 以下にアクセスして、緑の「CODE」をクリック。「Download ZIP」を選択して、あなたの手元にダウンロードして下さい。
  https://github.com/koichi-inoue/SampleSite

• ダウンロードした SampleSite-master.zip をデスクトップに移動して下さい。

• ZIP形式に圧縮されているので、これを解凍します。

  SampleSite-master.zip をダブルクリック、または、右クリック＞解凍

  ＞ SampleSite-master フォルダーができます。

• フォルダを開いて内容を確認して下さい。
  • index.html：HTMLファイル
  • style.css：スタイルシート
    
    

4.2. サンプルの表示確認

• ブラウザで新規ウインドウ、または、別のブラウザを起動して下さい。
• index.html を ブラウザのウインドウにドラッグ&ドロップして下さい。
• サンプルが表示されればOKです。

サンプルは以下と同じ形で表示されるはずです。
https://koichi-inoue.github.io/SampleSite/

4.3. サンプルのフォルダについて

• フォルダ名を以下のように変更して下さい。
  例）SampleSite-master ＞ SampleSite

• フォルダ名、ファイル名は必ず半角英数で
  images　page01.html　page-01.html　page_01.html　logoMark.jpg など、
  Webサイトを構成するフォルダやファイルの名称は、すべて英字ではじまる半角英数で命名します。日本語や特殊記号、またスペースも不可です。
  
  
  
  

5. 編集体験

では、さっそくサンプルを編集してみましょう。

5.1. Webサイト制作の基本

• Webサイトの大半は、HTML と CSS という２種類のファイルで構成されています（写真やイラストは、独立したデータとして別に扱います）。
• index.html、style.css ともに テキストファイル と呼ばれる形式のデータで、文字が並んだだけの、最もシンプルなものです。
• テキストデータは、ワープロ、メモ帳、その他、あらゆるソフトウエアでそれを開いて編集することができます。
• したがって、文字列の編集ができる テキストエディタがあれば、Webサイトは制作できるのです。特別なソフトウエアは不要です。

HTMLとCSSの本格的な説明は第２回になります。

5.2. テキストエディタを起動して下さい

• テキストエディタ（Atom）を起動して下さい。
• ファイル＞開く＞index.html を選択　あるいは、index.html をエディタの画面にドラッグ＆ドロップでファイルが開けることを確認して下さい。
  
  

5.3. 体験のプロセス

編集体験のプロセスは以下のとおりです。事前にご確認下さい。

• index.html あるいは style.css をテキストエディタで開く
• 部分的な書き換えを行う
• ファイル＞保存（英語では FILE ＞ SAVE ）
• index.html をブラウザにドラッグして結果を確認
  すでに index.html が表示されていた場合は、ブラウザの更新
  
  

5.4. index.html の編集体験

まず、はじめに HTMLファイルの編集を体験します。

• index.html をテキストエディタで開いて、以下の部分を書き換えて、ページの情報が変化することを確認して下さい。

  <title>Sample Site</title>  の　Sample Site という文字列
  <h1>Sample Page</h1> の　Sample Page という文字列
  <li><a href="#">home</a></li> の home という文字列を top に
  <article>
    article 01   ← この部分を長文に
  </article> 

• ＜＞ の部分、HTMLタグ の構成が壊れるとページのレイアウトが崩れます。
  崩れてしまった場合は、COMMAND + Z（Windows は CTRL + Z ）で編集を元に戻して下さい。

5.5. style.css の編集体験

次に、CSSファイルの編集体験を行います。

• style.css をテキストエディタで開いて、以下の部分を書き換えて、ページのビジュアルが変化することを確認して下さい。

  color: white; ＞ color: yellow;
  background: #333;  ＞ background: red;

  • color は文字の色です。CSSファイル内に数カ所あります。
  • background は背景色です。CSSファイル内に数カ所あります。
  • 色の英語名については、以下を利用することができます。
    https://www.colordic.org/

• 記法の構成が壊れるとCSSが機能しなくなります。崩れてしまった場合は、COMMAND + Z（Windows は CTRL + Z ）で編集を元に戻して下さい。
  
  

5.6. ソースコードの書き方について

• ソースはそれ自体、見やすく書くのが基本です。
• TAB・半角スペースでインデント（字下げ）を設定しましょう。
  TAB・半角スペースで作った余白は、ブラウザ上の表示には影響しません。
• 全角スペースを使うと簡単に余白を作ることもできますが、デザイン上の余白はスタイルシートを使うのが基本です。

• ATOM の具体的な操作については、以下のページに解説を書いています。
  Atom

6. レンタルサーバーを利用したサイトの公開

世界へ向けてWebサイトを公開するにはサーバーが必要です。無料のレンタルサーバーでは、小さく広告が入るなどの条件がありますが、アカウントの登録だけで利用することができるので、まずは無料のものでお試しください。
　なお、レンタルサーバーにファイルをアップロードする際には、FTPクライアントが必要になります。

6.1. アカウント取得について

レンタルサーバーのアカウント取得には、メールアドレスが必須です。まず、メールで本人確認した後、正式なアカウント登録となるケースが多いようです。適宜説明にしたがって、手続きを進行させて下さい。一般に以下の情報が必要になります。メモをとって残すようにして下さい。

• アカウントID
• パスワード
• 登録メールアドレス
  
  

6.2. アカウント名について

フリーのレンタルサーバーでは、アカウント名は、あなたのサイトのアドレスに表記される文字列になります。すでに使われているものとの重複はできませんので、ユニークな名称を事前に考えておきましょう。

• アカウント取得例
  http://opensquarejp.html.xdomain.jp/

注）Webサイトは、つくって公開しただけでは、検索にはかかりません。ホームページの公開アドレス（URL）を、SNSで紹介する、関係先のWebサイト上でリンクしてもらう・・といった対策を施すことで、やがて検索でヒットするようになります。これには最短でも数日かかります。
参考：SEO

6.3. FTP接続情報の取得について

レンタルサーバーを使ったWebの公開で、最終的に必要となるのは、FTP接続情報です。これは、当該サービスのサイトでログインすると「管理情報」などの画面で確認することができます。接続には、以下３つの情報が必要です。

• ホスト：FTP接続先（FTPサーバーアドレス）
• ユーザー：FTP接続ID
• パスワード：FTP接続パスワード
  
  

6.4. サーバーへの接続

• 1. FTPクライアント（FileZilla） を起動します

• 2. 左上のサイトマネージャアイコンをクリック

• 3. 「新しいサイト」をクリックして、サーバー名（自由）を記載

• 4. 右側のフォームにサーバーとの接続に必要な情報を入力
  • ホスト：FTP接続先（FTPサーバーアドレス）
  • ユーザ：FTP接続ID
  • パスワード：FTP接続パスワード
  • 「暗号化」の部分は、以下を選択してください。

    平文のFTPのみを使用する（安全でない）

• 5. 一旦「保存」（２回目以降は 3,4, の手順は不要になります。）

• 6. 以後「接続」をクリックすると、サーバーに接続されて、ファイルをアップする先のディレクトリが開きます。ちなみに、index.htmlをはじめとした、Webサイトのデータを置く場所（ディレクトリ）のことをドキュメントルートと言います。

手順２	手順３・４	手順６

6.5. サーバーへのアップロード

FTPクライアントツールは、一般に左にローカルマシン（自分のPC）のディレクトリ、右にリモートサーバー（レンタルサーバー）のディレクトリーが見えます。ローカルにあるサイトの中身をそっくりそのまま（相対的な位置関係を変えずに）リモートにアップする・・というかたちで、Webサイトは公開されます。

• 一般的には、左のウインドウ（自分のPC）から右のウインドウ（サーバーのドキュメントルート）へ「アップロード（ファイルを選択して右クリック＞アップロード）」しますが、FileZilla の場合、手元のファイルを直接右ウインドウへ Drag&Drop でもアップロード可能です。

• 重要：アップロードの仕方とアクセス方法は以下ような関係があります。
  • ドキュメントルート直下に index.html(トップページ) をアップした場合

    http://xxxxxxxx.com/　　にアクセスすると見えます。

  • ドキュメントルート直下に test.html をアップした場合

    http://xxxxxxxx.com/test.html　　とアクセスすると見えます。

    補足
    index.html はデフォルトトップページとしてサーバーが認識するので、アドレスに入力する必要はありませんが、それ以外の名前のHTMLにアクセスする場合は、アドレス部分にファイル名まで入力する必要があります。
  • ドキュメントルート直下に SampleSite フォルダ（中に index.html がある前提）をアップした場合

    http://xxxxxxxx.com/SampleSite/

つまり、サーバー（ディレクトリ）がひとつあれば、フォルダの数の分だけ複数のWebサイトを持つことができる…ということになります。

参考事例｜X-Freeサーバー

以下のページに、X-Freeサーバーでのアカウント取得から、Webサイト公開までの手順を列挙しています。参考イメージとしてご覧ください。

• RentalServer/Account
  
  

7. 参考：GitHub を利用したサイトの公開

7.1. GitHubとは

• GitHubとは、Git というバージョン管理システムを利用して、プログラムのソースコードを保管・共有・公開することができる Webサービスです。
• GitHub上のリポジトリ（データ置き場）に index.html をはじめとする Webサイトのコードを置くことで、これを通常のWebサイトとして公開することが可能です。
• フリーのプランでも、レンタルサーバーとは異なり、広告が表示されることがないので、Webサイト公開のひとつの手段として利用できます。
  
  

以下、GitHubPagesのサービスを使ってWebサイトを公開する手順です。

7.2. アカウントの作成

GitHub の無料アカウントを作成します。

• アカウント作成にはGmail等のメールアドレスが必要です。アカウント作成の過程で本人確認のメールが届くので、事前にそれをブラウザで開いて確認できるようご準備ください。
• 事前にユーザー名を決めておいて下さい。これは最終的にあなたのリポジトリのURLに関わるので、将来に渡って使い続けられるようなものをしっかり考えて下さい（世界に一つだけの名前であることが必要です）
  
  

• 1. 以下にアクセスしてください。
  https://github.com/

• 2. Sign Up します。

• 3. ユーザー名、メールアドレス、パスワードを入力して、緑色の Sign up for GitHub というボタンをクリックしてください。
  ユーザー名は公開するWebページのURLの一部になります。

• 4. 無料（Free）のプランを選択して下さい。

• 5. 登録メールアドレスに確認メールが届くので、必ず「認証」して下さい。

• 6. アンケート入力画面が表示された場合は適宜対応して下さい。

• 7. 以上でアカウントが作成されました。

以後、GitHubを使う場合は、Sign in をクリックして、ID,PW を入力してログインして下さい。

7.3. リポジトリの作成

リポジトリとは、Webサイトやファイルセットなどを GitHub 上で管理するためのプロジェクトフォルダ・・とご理解下さい。リポジトリはいくつでも作ることができるので、その数だけサイトを作ることができます。

• 1. 画面右上のプラスアイコン「+」をクリックし、New repository を選択。

• 2. Repository nameという入力欄にリポジトリ名を入力します。リポジトリ名は任意ですが、ここで設定した名称によって、WebサイトのURLが変わります。一般に以下のようなURLになります。

  https://（ユーザー名）.github.io/（リポジトリ名）

  
  

• 3. Create repository をクリック
  以上でリポジトリ（この時点では中身は空）ができました。

7.4. ファイルのアップロード

• Create repository をクリックした直後、右のような画面が表示されます。

• 表示された画面で Uploading an existing file をクリックすると、Drag&Drop できるスペースが表示されるので、手元の Webプロジェクトフォルダの中身を丸ごとアップします。

• Commit changes をクリックすることで、操作が完了します。

• 以下のように、リポジトリの中が、あなたの手元のフォルダ構成と同じように見えていれば正解です。
  
  
  

7.5. 公開設定

サイトのファイルは、アップしただけでは公開されません。以下の設定操作によって公開されます。

• 1. リポジトリ画面の右端のタブ Settings をクリックします。
  
  

• 2. ページの下の方に GitHub Pages という項目があります。見つけて下さい。
  
  

• 3. Source の項目が None となっているので、これを main（master） に変更して save（保存）して下さい。
  ＞ 公開URL が表示されます。

• 4. 自身の公開URLにアクセスしてみて下さい。

  https://（ユーザー名）.github.io/SampleSite

  設定変更から公開まで数分かかることがあります。

7.6. サイトの更新

HTML・CSSファイルの更新には、以下の２つの方法があります。

• ローカル環境（あなたのPC）で編集したファイルをアップして上書き
  • リポジトリのページ、ファイル一覧の上の File Upload をクリック。
  • 手元のファイルをドラッグ＆ドロップ
  • アップロード完了後、Commit changes をクリック

• GitHub のソースエディタを使って編集
  • リポジトリ上に見える該当ファイルをクリック
  • Edit（鉛筆アイコン） をクリックすると編集可能状態になります。
  • 編集終了後、Commit changes をクリック

付記：不要なリポジトリの削除

作業の過程で、間違った名称のリポジトリを作ってしまった場合は、以下の手順で削除可能です。

• 1. 削除したいリポジトリを開いて下さい。
  
  
  
• 2. 右端のタブに Settings というのがあるので、それをクリック
  
  

• 3. そのページの一番下に DangerZone というのがあって、そこに Delete This Repository というボタンがあります。それをクリック

• 4. 削除したいリポジトリの名称の確認を求めてくるので、リポジトリ名を確認入力して「OK」して下さい。

第１回の講習は以上です。第２回は、HTMLとCSSの文法について学びます。