HPWG 基礎コース

はじめに　HTML　レイアウト　ホームページ素材　テンプレート　プロゲート[Progate]

はじめに

概要

ホームページ

ホームページ (ウェブサイト、以下HP) を記述するための言語であるHTML と、表示レイアウトなどの修飾を指定するのためのCSS (スタイルシート) 及び 動きをつけるプログラミング言語 JavaScript (ジャバスクリプト) を学びます。現在のウェブデザインは、文書の構造 (HTML) と体裁 (CSS) を分離させるという設計思想で制作されています。

Web制作アプリとしてホームページビルダーやJimdo等がありますが、W.G.ではHTMLとCSSを覚える事を前提に、テキストエディターによる制作を目指します。結局、アプリを用いてもHTMLやCSSの知識なしでは、思った通りのホームページは作れません。

団体のHP作成支援をするには、結構色々な要求があって、場合によりある程度対応できる必要があります。一応ホームページが作れるようになっても、JavaScript (スライダーやギャラリー等。以下js) やCGI (フォームメール等) など、色々やってみたいことが出てくると思います。でも、見栄えなどより、重要なのはコンテンツ (中身) でありシンプルさです。
動作環境　OS：Windows7/8/10、ブラウザ：InternetExplorer11

ホームページの作り方

ホームページを作成する場合には、大きく分けて以下の4通りの作り方があります。

  • 1) ホームページ作成ソフトを使って作る
    自由度 中、難易度 低、費用 中　ソフト例 ホームページビルダー　サイト例 前我孫子登山倶楽部
    必須要件 ソフトの購入、HPスペース (FC2などのフリー版でも可)
  • 2) CMSツール(Contents-Management-System)(MovableType(ムーバブル･タイプ、エムティー)、WordPress等) を使って作る
    自由度 中、難易度 中、費用 高　CMS例 WordPress 日本語　サイト例 我孫子登山倶楽部
    必須要件 ドメインの取得、レンタルサーバーの契約(フリーHPスペースは不可)
  • 3) ウェブ上のホームページ作成サービスを使って作る
    自由度 低、難易度 低、費用 中　サービス例 Jimdo(ジンドゥー)　サイト例 ふれあい塾あびこ
    必須要件 サービス登録 (Jimdoなどのフリー版でも可)
  • 4) テキストエディタを使って作る
    自由度 高、難易度 高 (テンプレート使用時は中)、費用 低　サイト例 あびこ市民活動ネットワーク
    必須要件 HPスペース (FC2などのフリー版でも可)
    制作手順 HTML・CSSなどウェブページを構成するファイルをテキストエディタで記述 ⇒ 構成ファイルをサーバーへアップロード

事前準備

フォルダー作成

HPワーキンググループで用いる専用ファルダーを作っておきます。
各自のドキュメントフォルダーへ以下のように hpwg2019 フォルダー以下を作成

<ドキュメント>
hpwg
└─hpwg2019        年度用のフォルダー
    ├─練習   　　 練習用のフォルダー
    └─試作  　　　試作用のフォルダー

必要なツール

  • とほほのＷＷＷ入門
    HTML、JavaScript、CGI、スタイルシート((CSS) など、ホームページ作成に関する総合情報サイトです。
    お気に入りに登録 ([パソ隊hpwg]と言うフォルダーに追加)
  • FFFTP(窓の杜からダウンロード)
    代表的なFTPクライアントソフトウェア。FTPクライアントとは、FTPを使用してファイルの送受信を行うクライアントソフトウェアのことでありFTPサーバに接続してファイルをアップロード・ダウンロードすることができます。
    FFFTPのインストール
  • TeraPad(窓の杜からダウンロード)
    シンプルなテキストエディタ。HTML/Perl/CSS/JavaScriptなどの各種編集モードを持っています。
    TeraPadのインストール　初期設定 [表示]-[タブの字数]-[2]

ツールの設定

  • IEの設定
    IEでのソース表示テキストエディターを[TeraPad]に設定します。
    tool.zip を \hpwg\hpwg2019 フォルダーへダウンロードし展開します。
    [tool]-[reg]の ieediter.reg を実行。64bit版indowsで、TeraPadが32bit版の場合 ieediter (x86) .reg を実行。
    TeraPadでソースを開くには、IEの画面を右クリック-[ソースの表示]をクリックします。
    IEで以下のサイトを開いて、ソースをTrePadで表示してみよう
    • ① IEで クマの山荘 を開きます。
    • ② ソースをTeraPadで表示します。
    • ③ 名前を付けて保存。保存先と名前は、\hpwg\hpwg2019\練習\kuma_test.html
    • ④ IE 及び TeraPad を閉じます。
  • [送る]の設定
    Ihtmlやcssファイル等をTeraPadで開くため、[送る]に[TeraPad]のショートカットを登録します。
    [送る]フォルダーは、ユーザー\AppData\Roaming\Microsoft\Windows\SendT
    注) [AppData]は隠しフォルダ
    TeraPadでテキストファイルを開くには、エクスプローラ–でファイル (htmlやcss) を右クリックし、[送る]-[TeraPad]をクリックします。
    先に保存した、kuma_test.html をIEで開き ソースの表示をしてみよう

ホームページスペース

ホームページを作成するには、ホームページスペース(サーバー) 及び ドメイン(url) を用意する必要があります。 HPWGでは、FC2ホームページ や Yahoo!ジオシティーズ などの無料ホームページスペースを利用して作成していきます。 もちろん本格的にHPを公開するのであれば、有料プランへ移行していただきたいと思います。独自ドメインやcgiなどは有料プランでないと利用できません。

  • FC2ホームページ
    仕様　サーバーディスク容量 1GB、1度にアップできるファイルサイズ 1MB、FTP接続 OK、商用利用 OK、広告表示 なし(但し3か月間更新が無い場合広告が表示されます。)
    FC2ID未登録の場合は 登録してホームページスペースを確保してください。
  • エックスドメイン
    仕様　サーバーディスク容量 1GB、1度にアップできるファイルサイズ 3MB、FTP接続 OK、商用利用 OK、広告表示 なし(但し3か月間更新が無い場合広告が表示されます。)、WordPress OK

ホストの設定
プロバイダは各自で登録したFC2ホームページ を用います。
https://name.web.fc2.com/　(nameは各自登録したユーザー名)

ホストの設定内容
ホストの設定名name_fc2
ホスト名name.web.fc2.com
ユーザー名name
パスワード–
ローカルの初期フォルダー\hpwg\hpwg2019
ホストの初期フォルダー

HTML

HTMLの基本

HTML とは？
HTML は Hyper-Text Markup Language (ハイパーテキスト マークアップ ランゲージ) の略です。ウェブページを記述するための記述言語。現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。

  • ファイル名について
    ホームページで作成する HTML文書や画像ファイルのファイル名の付け方
    • ■ 基本的に 半角英数字 のみを用いる スペース文字を含んだファイル名は使用しない
    • ■ 使用可能な記号はドット (.) 、ハイフン (-) 、アンダーバー (_)
    • ■ 大文字・小文字をちゃんと使い分ける (小文字だけに統一すると良い)

    index.htmlは特別なファイル名です。urlにhttps://pasotai.sakura.ne.jp/ とファイル名抜きで指定するとそのフォルダーのindex.htmlが実行されます。これはWebサーバーの機能によって実現されます。

  • 拡張子
    HTML文書の拡張子は .html です。Windowsでは以前のシステムで拡張子に3文字しか使用できなかったことから未だに .htm とする場合があります。
    また、Windowsの設定で拡張子が非表示になっていたら、必ず拡張子を表示するに変更しておきます。
  • 構造

    HTMLは、<head> や <body> などと <>(山括弧)で囲った タグ で構成されます。head や body などを タグ名 と呼びます。
    HTMLのタグには href=”xxx.html” や target=”_blank” などの 属性((attribute) を指定することができます。target の部分を 属性名、_blank の部分を 属性値 と呼びます。

    HTML5の必要最小限の構造を示します。html5_minimum.html

    IEでhtml5_minimum.htmlを開いて、ソースをTrePadで表示し保存してみよう

    • ① IEで html5_minimum.html を開きます。
    • ② ソースの表示 をして、名前を付けて保存。保存先と名前は、\hpwg\hpwg2019\練習\html5_minimum.html
    • ③ ソースに注釈を付ける。各タグの意味を調べてコメントを付けよう。編集が済んだら上書き保存

HTML文書

  • よく使われるタグ
    ホームページ本文でよく使われるタグを示します。
    p
    Paragraph 段落
    ul,dl
    リスト li,dt,dd等と組み合わせ
    h1~h6
    heading 見出し
    img
    Image 画像
    a
    Ancho アンカー(指定先へジャンプ)
    table
    テーブル(表) tr,td等と組み合わせ
    div
    汎用的なブロック要素 DIVision(区分)の略
    他のブロック要素 section 章を記述, article 完結の記事
    span
    インライン要素の汎用的なタグ
    HTML5で追加された要素 – header, footer, main, nav, article, aside, section
  • HTML文書の手本

    よく使われるタグを用いたHTML文書の手本を示します。html_example.html

    IEでhtml_example.htmlを開いて、ソースをTrePadで表示し保存してみよう

    • ① IEで html_example.html を開きます。
    • ② ソースの表示 をして、名前を付けて保存。保存先と名前は、\hpwg\hpwg2019\練習\html_example.html
    • ③ ソースに注釈を付ける。各タグの意味を調べてコメントを付けよう。編集が済んだら名前を付けて保存
    • ④ html_exampleサイトとソースを閉じて、保存したhtml_example.htmlを開きます。
      画像がリンク切れになっているので、ダウンロードするか或いは、手持ちのjpgファイルを配置します。

レイアウト

スタイルシート

スタイルシート (CSS) とは？
CSS は Cascading Style Sheets の略です。スタイルシートは、HTMLで記述された Webページの見栄え・スタイルを効率的に定義するための技術です。HTMLで文書のコンテンツ (内容・文書) を定義し、CSSでレイアウト (デザイン・見栄え) を定義することにより、内容と見栄えを分離することが可能となります。

  • スタイルシートの拡張子
    スタイルシートのファイル名拡張子は.cssです。ファイル名は任意でかまいませんが通常style.cssが使われます。
  • 基本的な書き方
    スタイルシートはの基本書式 (詳細は[とほほのＷＷＷ入門]-[CSSリファレンス]-[CSS入門]参照)

    セレクタ { プロパティ : 値; }

    セレクタとは、どの要素に対してスタイルを適用させるか指定する部分です。スタイルシートを適用させたいタグを書きます。
    プロパティとは、セレクタで指定した要素に適用するスタイルの種類を示す部分です。色を表す「color」やフォントサイズを表す「font-size」などを書きます。これに続けて、「:」記号と値を書いてスタイルを設定します。
    スタイルは「;」記号で区切っていくつでも書くことができます。
  • 適用する主なセレクタ
    • ■ タグ要素に適用する
      タグ { プロパティ : 値 }
      記述例 h1要素のフォントサイズを20ピクセルに設定し、色を赤にする。
      h1 { font-size: 20px; color: red }
    • ■ 特定のクラスを指定した要素にスタイルを適用する
      .クラス { プロパティ : 値 }
      セレクタ.クラス { プロパティ : 値 }
      記述例 .class1 { color: red }
      上記の例では、class属性に「class1」が指定されている要素の色を赤に設定します。
      h1.class2 { color: red }
      上記の例では、h1要素を持つclass属性に「class2」が指定されている要素の色を赤に設定します。
    • ■ 特定のIDを指定した要素にスタイルを適用する
      (クラスは複数の要素に対して指定できるが、idはその１つの要素に対してのみできる)
      #id { プロパティ : 値 }
      セレクタ#id { プロパティ : 値 }
      記述例 #id1 { color: red }
      上記の例では、id属性に「id1」が指定されている要素の色を赤に設定します。
      h1#id2 { color: red }
      上記の例では、h1要素を持つid属性に「id2」が指定されている要素の色を赤に設定します。
  • 注釈
    注釈」の記述は /* ～ */ となります。 (～が注釈部分)
    スタイルシートのソースにコメント(注釈)を記述します。コメントはブラウザには解釈されません。
  • スタイルシートをHTMLで指定する方法
    スタイルシート実装には次の3つの方法があります。
    • ① リンク型スタイルシート：別ファイルにスタイルシートを記述しHTMLのヘッダーから<link>で読み込む
      <link rel=”stylesheet” href=”css/style.css” type=”text/css”>
    • ② 埋め込み型スタイルシート：style属性を用いてタグに実装する
      <p style=”color:blue; font-size:large;”>あいうえお</p>
    • ③ 文書単位で埋め込む：<style>要素でまとめてその文書に適用する
      <style type=”text/css”>
      <!–
      p {color:blue; line-height:1.5;}
      –>
      </style>

ホームページのレイアウト

ホームページのデザインに不可欠のレイアウトの見本を示します。見本に示すような要素で構成されます。
これらはほんの一例でデザインにより様々なレイアウトが考えられます。

レイアウト見本1

レイアウト見本2

レイアウト見本3
  • レイアウトの手本

    基本的なレイアウトの手本を示します。ここでは、スタイルシートを [文書単位で埋め込む] で実装しています。 layout_example.html

    layout_example.htmlを開いて、ソースをTrePadで表示し、保存してみよう

    • ① IEで layout_example.html を開きます。
    • ② ソースの表示 をして、名前を付けて保存。保存先と名前は、\hpwg\hpwg2019\練習\layout_example.html
    • ③ スタイルシートに注釈を付ける。各プロパティの意味を調べてコメントを付けよう。編集が済んだら上書き保存

    layout_example.htmlをコピーして、自分用のレイアウトを作ってみよう

    • ① layout_example.html をコピーして layout_name.html という名前にします (nameは自分の名前)
    • ② IEで layout_name.html を開き、TeraPadでソースを表示 します
    • ③ HTMLソースを編集して、自分用のレイアウトを作ります。例えばメニューを最上部に、サイドバーを右側に等。編集が済んだら上書き保存

    続いてlayout_name.htmlをHPの体裁に仕上げてみよう

    • ① IEで layout_name.html を開き、TeraPadでソースを表示 します
    • ② HTMLソースを編集して、ヘッダー,ナビゲーション,ホームイメージ,サイドバー,本文,フッター を編集します。編集が済んだら上書き保存

      編集サンプル↓　layout_example_test.html

ホームページ素材

ホームページ素材とは？
ホームページ制作で用いる写真やイラスト,アイコン等の画像をいいます。画像の取得方法や編集方法を示します。 写真は自分で撮ったものはもちろん使えますが、フリーの写真,アイコンなどを提供している多くのサイトがあります。 これらの無料で商用利用もできるテンプレート素材をダウンロードして利用することが出来ます。

画像取得

フリーの素材サイト

ぱくたそ
高品質・高解像度の写真素材 登録不要

Stockio.com
フリーの写真,ベクトル,アイコン,フォント,ビデオ

FLATICON
30万個のベクターアイコン

画像編集

画像編集ソフトは、Photoshop,GIMP(フリー)や、Windowsに初めから組み込まれている ペイント,フォト 等があります。 自身が使い慣れたソフトを使えばいいのですが、ここでは [フォト]アプリ を用いた画像編集を示します。

[フォト]アプリの機能

トリミング,フィルター,調整(ライト,色,明瞭度),スポット修正,回転,サイズ変更など

ダウンロードした写真を編集してみよう。(サイズを1200×675pxに編集)

  • ① [エクスプローラー]で編集する写真ファイルをダブルクリック。対象ファイルを開いて[フォト]アプリが起動します。
  • ② [編集と作成]-[編集]をクリックします。
  • ③ [トリミングと回転]-[縦横比]で[16:9]にします。
  • ④ [フィルター]-[写真の補正]で自動補正をします。[コピーを保存]
  • ⑤ [もっとみる]-[サイズ変更]をクリックします。
  • ⑥ [カスタムの寸法を定義します]をクリックします。
  • ⑦ 幅[1200]を入力し[サイズを変更したコピーを保存]をクリックします。

テンプレート

ホームページのテンプレートとは、あらかじめデザインされたウェブサイトの雛形のことです。
ホームページWG のサイトにいくつかのテンプレートが置いてあります。内容を確認してテンプレートとはどのような物か確認してみよう。

テンプレート｢layout_pro｣

テンプレート[layout_pro]

複数ページで構成される標準的なテンプレート[layout_pro] の紹介です。必要な数のページ(htmlファイル)を作成しナビゲーションでページを切り替える構成になります。
proはprogress(進歩,発達)の意味で付けましたが、professionalの略でもかまいません。

｢layout_pro｣の特長
  • レスポンシブ完全対応
  • 構成区分の独立　メニュー,ヘッダー,フッター,サイドバー等は別ファイル(.js)で管理
  • 最新のメニュー　下スクロールでメニューは消え,上に少しスクロールで表示
  • パーツ完全装備　スライドショー,ギャラリー,カルーセル,タブ,アニメーション,アイコンフォント等…

テンプレート[layout_pro] をダウンロードしよう

まず、[hpwg2019]フォルダーに[テンプレート]フォルダーを作っておきます。
layout_pro.zip を[テンプレート]フォルダーにダウンロードし展開します。

  • テンプレート[layout_pro]のファイル構成
    • [layout_pro]
│        animation.html (アニメーション)
│        contact.html   (お問い合わせ)
│        default.html   (雛形)
│        elements.html  (エレメント)
│        gallery.html   (ギャラリー)
│        iconfont.html  (アイコンフォント)
│        index.html
│        privacy.html   (プライバシーポリシー)
├─[assets]
│   ├─[animate]
│   ├─[carousel]
│   ├─
│   ├─[nav]
│   └─[slideshow]
├─[css]               
│   ├─[img]
│   └─app.css
├─[img]               
│   ├─[side]
│   └─green.gif,icon.png,pl01.jpg,square01.png 他
└─[js]
　   └─footer0.js,header0.js,home0.js,include0.js,nav0.js,sidebar0.js

テンプレート[layout_pro] を使って各自のHPを作成しよう

  • ① [layout_pro]フォルダー をコピーして任意の名前(○○○○) に変更にします。
  • ② IEで index.html を開きます。TeraPadでソースを表示 編集します
  • ③ メニュー,サイドバーなどの各構成要素は[js]フォルダーのjsファイルを編集ます。
HPの構想がある方は自分のストーリーで作成してください。
特にまだ構想が決まっていない方は、クマの山荘 のコピーを作成してください。
クマの山荘 の画像は、以前のICT講座の資料 kumasanso.zip をダウンロードし展開してください。

テンプレート解説

テンプレート構成は既に示してあるので把握しておいてください。

  • スタイルシート
    主スタイルシートはcdnで提供しています。https://pasotai.org/cdn/2.3.0/hpwg.css
    スタイルの変更や追加は、[css]フォルダーの app.css で行います。
  • 新規ページの作成
    雛形の default.html をコピーして任意の名前に変更して作成します。
  • メニュー,サイドバーなどの各構成要素
    [js]フォルダーのjsファイルを編集します。JavaScriptのdocumentオブジェクト-writeメソッドを使ってHTML文字列を書き出しています。 複数行の場合、各行の改行した箇所に¥(バックスラッシュ)の記述必須。
    header0.js　 ヘッダー
    home0.js　　[ホーム]ページのスライドショー
    nav0.js　　  メニュー(ナビゲーション)
    sidebar0.js　サイドバー
    footer0.js　  フッター
  • メニューのactive
    あるページを開いたとき、そのページに対応するメニュー項目がactive表示されます。
    htmlファイルの記述は、<body> の直下に、
    <script type=”text/javascript”>var m1 = m1_1 = “active”;</script>
    数字は適宜連番を指定のこと。nav0.jsは対応箇所に m1,m1_1 などを記述のこと。
  • 部品
    メニュー[部品]にテンプレートで利用できる部品(Parts)を置いています。
    エレメント　　　 主スタイルシートhpwg.css の class紹介
    ギャラリー　　　 画像ギャラリー,カルーセルの紹介
    アニメーション　 アニメーションの紹介
    アイコンフォント Font Awesome(フォントアッサム)の紹介
    初期ページ　　　 新規ページの雛形

アップロード

自分のホームページ作成が済んだら、ホスト側(サーバー)にファイルをアップロードする事でホームページが公開されます。

サーバーにアップロードしてみよう

プロバイダは各自で登録したFC2ホームページ を用います。
各自のホストである https://name.web.fc2.com/ (nameは各自登録したユーザー名)にアップロードします。

  • サーバーへのアップロード手順
    • ① FFFTPでホストの設定名[name_fc2]に接続します。
      以下②～④はフォルダーにファイルを置く場合。ルートに置く場合は⑤へ
    • ② ローカル側のフォルダー ○○○○ を開きます。
    • ③ ホスト側に各自フォルダー ○○○○ を作成します。(初めに1回のみ)
    • ④ ホスト側のフォルダー ○○○○ を開きます。
    • ⑤ ホスト側のファイルとフォルダーを全て選択します。
    • ⑥　 [アップロード] をクリックします。

アップロードが済んだら各自のURL(https://name.web.fc2.com/)(https://name.web.fc2.com/○○○○)へアクセスする事でHPを開く事が出来ます。

プロゲート [Progate]

プロゲートとは？
Progateはオンラインプログラミング学習サービスです。 ホームページ制作の学習が初心者レベルから提供されています。ここでは、無料の以下3コースを学習します。
[HTML & CSS 初級編]
[JavaScript I es6_study_1]
[jQuery 初級編 jquery_study_1]

アカウントとログイン

プロゲートのサイトを開きます。　https://prog-8.com/
最初に右上の[無料会員登録]をクリックしアカウント作成を行います。
アカウント作成が出来たら、右上の[ログイン]をクリックしログインします。

プロゲート演習

Progateを開いて、[HTML & CSS][JavaScript][jQuery]の3コースを実習しよう。

レスポンシブデザインのサンプル

Progate課題 [HTML & CSS]

[HTML & CSS 学習コース 初級編]-[23.お問い合わせフォームのレイアウト(2)]を用いて、レスポンシブデザインに作りかえよう。
注) レスポンシブデザインとは?
デバイスの画面サイズに依存しないwebサイトを構築する手法。PC,タブレット,モバイルに対応

[23.お問い合わせフォームのレイアウト(2)] ソースのダウンロード　progate23.zip

右にレスポンシブデザインのサンプルを示します。

Progate課題 [jQuery演習]

右のサンプルサイト メニュー-[jQuery演習]に、jQueryを用いたSlideShowを示します。
[演習2]で作成したサイトにメニュー-[jQuery演習]を追加し、SlideShowを実装してみよう。

連絡先

HPWG基礎コース、楽しんで頂けましたか？
このコースについて、なにかコメントがありましたら下記アドレスへお願いいたします。
(担当　川口)

info@pasotai.org