目次

この記事の目次です。

1. ホームページとは
2. ホームページの表示の仕組み
3. ホームページ作成に使われる主な言語
4. WinSCPを使用したWebサーバへの接続方法
5. ファイル、ディレクトリ、パス、URL

更新履歴

1. ホームページとは

ホームページは、個人や企業がインターネットで公開するWebページです。 Webに公開されたサーバーにWebページをアップロードすることでホームページが作成できます。 WebページはHTMLファイルを配置する者から、データベースとプログラムを組み合わせて、WordPressのような更新画面付きのページにすることもできます。

2. ホームページの表示の仕組み

ホームページの表示には、利用者側のブラウザ、提供者側のサーバが必要です。 サーバは主にドメイン情報を管理するDNSサーバとWebページのデータをブラウザに送るWebサーバが必要です。

通常、DNSサーバもWebサーバも自サーバで運用することは少なく、DNSサーバはお名前.comやバリュードメインなどのドメイン管理サービスを利用し、 WebサーバはXサーバやさくらVPS、AWSなどのサーバスペースをレンタルして公開するのが一般的です。

ホームページの表示の仕組み

3. ホームページ作成に使われる主な言語

ホームページ作成に使われる言語は大きく分けて、ブラウザで実行されるクライアントサイド、サーバーで実行されるサーバーサイド、データベースを操作するデータベースサイド、の言語に分けられます。

クライアントサイド

クライアントサイドの言語はコードがブラウザに送られてきた後にブラウザで実行される言語です。 使われる言語には、HTML、CSS、JavaScript、VBScriptなどがあります。 クライアントサイドが無いとページが表示されませんので、ホームページ作成を行う上でクライアントサイドの言語は必須スキルとなります。 中でもHTMLはページのベースを記述しますので、HTMLは必ず使われる言語になります。

HTML

HTMLは、主にWebページの作成に利用されるマークアップ言語です。 ホームページの画像、リスト、表、リンクなどを表示することができます。 ブラウザに表示するにはHTMLのコードが必要ですので、ホームページのコーディングを行う場合、HTMLの知識が必須となります。

CSS

CSSは、HTMLで記述したページに対して、レイアウトなどのデザインを調整します。 HTMLは主に構造を定義するマークアップ言語で、その構造を定義するマークアップ言語と表示形式を分離するための仕様がCSSです。

JavaScript

JavaScriptとは、ブラウザサポートされているプログラミング言語です。 プログラミング言語としては、スクリプト言語、インタプリタ型言語、オブジェクト指向型言語に分類されるプログラミング言語です。 オブジェクト指向の型指定の弱いスクリプト言語といわれます。 ECMAScriptとして言語仕様の標準化が進められています。

サーバーサイド

サーバーサイドの言語はサーバーで実行される言語です。 使われる言語は、PHP、Perl、Ruby、Java、C#、Python、・・・など多種多様になります。 サーバーサイドの言語を使用することで、フォームやURLのパラメータなどに応じて、ページの表示を変更するといった動的なページを作ったり、アクセスログを記録する、などが行えます。 固定のページを表示するだけであれば、サーバーサイドの言語を使用しなくてもホームページは作れます。

PHP

共用のレンタルサーバーを使用する場合は対応している言語の都合でPHPがメインになります。 ホームページに使えるサーバーサイドのプログラミング言語としては一番簡単に始められ、初心者向けの書籍や解説ページが豊富ですので、初心者に適した言語と言えます。

データベースサイド

データベースはサーバーサイドの一部ですが、特殊なので上述のサーバサイドの言語と分けてみました。 データベースサイドの言語はデータベースを操作する際に使われる言語です。 データベースを使用しなければ使う必要がない言語になります。 使われる言語は、SQLや各種データベース製品で対応している言語があります。 共用のレンタルサーバーを使用する場合は対応しているデータベースの都合でSQLがメインになります。 WordPressで使用されるMySQLもSQLで操作します。

SQL

MySQLなどが扱うデータベースはRDB(リレーショナルデータベース)です。 RDBのデータベースの定義やテーブルの作成、データの追加などの操作を行うためのデータベース言語がSQLです。 SQLはStructured Query Languageの略で構造化問合せ言語と訳されます。

4. WinSCPを使用したWebサーバへの接続方法

ページを表示するには、HTMLなどのページを構成するファイルをWeb公開するサーバの決められた場所に配置(アップロード)する必要があります。 アップロードには、FTPなどの通信方法を使用します。FFFTPやWinSCPなどのファイル転送ソフトを使用して、FTP転送します。

以下では、各種通信方法に対応し、世界的にスタンダードなWinSCPを使用したWebサーバへの接続方法について説明しています。

WinSCPのインストール

WinSCPのインストール媒体は「https://winscp.net/eng/download.php」からダウンロードできます。

WinSCPのインストール媒体のダウンロードページのイメージ

ダウンロードしたインストール媒体(例 WinSCP-5.17.7-Setup.exe)を実行します。

許諾(A)をクリック

許諾(A)をクリックします。

次へをクリック

次へをクリックします。

次へをクリック

次へをクリックします。

インストールをクリック

インストールをクリックします。

完了をクリック

完了をクリックして、完了です。

Web公開するサーバの接続情報の設定

WinSCPを起動し、Web公開サーバの接続情報を設定して、ログインします。

たとえば、ロリポップ!の場合は以下になります。

転送プロトコル(F):FTP
暗号化(E):明示的なTLS/SSL暗号化
ホスト名:ftp.lolipop.jp
ポート番号:21
ユーザー名(U):FTP・WebDAVアカウントを入力(例:lolipop.jp-hogemoge)
パスワード(P):FTP・WebDAVパスワードを入力(例:1234abc)

ロリポップ!のFTP設定例

WinSCPで.htaccessを表示する設定

.htaccessは.から始まる隠しファイルになりますので、隠しファイルを表示する設定が必要です。

「コントロールパネル>表示方法:小さいアイコン」より、「エクスプローラーのオプション」を表示して、「表示」タブの「隠しファイル、隠しフォルダー、および隠しドライブを表示する」にチェックを入れます。

それと、WinSCPの上部バーにあるオプション設定をお願いします。 オプション > 環境設定 > パネル > 隠しファイルを表示する にチェックを入れます。

5. ファイル、ディレクトリ、パス、URL

ホームページ作成の初心者を乗り越えるために必要な基礎知識としてファイルとディレクトリ、パス、URLがあげられます。

ファイル

ファイルは文書や画像などのまとまり1つ1つのデータになります。

たとえば、1枚の写真をとってデータを保存した場合に作られるデータがファイルです。 ホームページではHTMLのコードを記述したファイルがベースとなります。

ディレクトリ

ディレクトリはWindowsやMac、スマホなどではフォルダと呼ばれる複数のファイルを整理して保存できる入れ物です。

たとえば、imgという名前のディレクトリを作ってイメージファイルをいれます。

ディレクトリの中にディレクトリも作れ階層を作って整理することもできます。 日本語の「分かる」ということばが示すように、分けることで分かるので、ディレクトリで階層を作ってファイルを整理した方が分かりやすく、 一般的にホームページのファイルもディレクトリを作って、整理するのが基本になります。

パス

ディレクトリで整理したファイルの場所を表す場合、ファイル名だけではどこにあるかわかりません。 ディレクトリやファイルの場所はパスという表記で表します。

階層の一番上をルートといい「/」で表します。例えば、ルートの直下にあるblogの中にindex.htmlというファイルがある場合は/blog/index.htmlというパスで表記します。

URL

URLはホームページを構成するWebページの場所を表す表記です。

Webページの場所を表すURLもパスと同じで、
https://htaccess-support.com
まではホームページのあるサーバを表して、その後にファイルのパスを使用して、
https://htaccess-support.com/homepage/index.html
のようにページの場所を表します。

更新履歴

更新履歴になります。

位置:トップホームページ作成の基礎知識