サーバーとは

サーバーだったり、サーバだったり、人によって書き方が違うようですが、拘る必要はないです。
そして、サーバーによって細分化されるらしいですが、それも覚える必要もありません。

サーバーはWEB上の土地だと思っておいて問題ありません。

サーバって何？初心者でもわかる4つのサーバの種類 | Marketing Bank （マーケティングバンク）
レンタルサーバーとは?契約からできることを初心者にもわかりやすく解説します | カゴヤのサーバー研究室

ドメインとは

ドメインは、土地に対する住所のようなものです。
土地（サーバー）を用意したのに、どこにその土地があるかわからないと困るので、住所（ドメイン）を割り当てるということです。

ドメインには『com』『net』『jp』『co.jp』など種類があり、それぞれに種類名がありますが、それらを覚える必要はありません。
一応、用途に応じたドメインがありますので、どうしても必要になったときに調べる程度でいいでしょう。

ドメインとは？その意味と企業ホームページとの関係を簡単に解説！
ドメインとは？をわかりやすく解説します | カゴヤのサーバー研究室

サーバーを利用する際、よほどの知識や技術がない限りは、レンタルする必要があります。
『レンタルサーバー』で検索するとものすごい数のサーバー会社が出てきますが、最初の内は安いサーバーをレンタルするのが望ましいです。

そして、サーバー会社はドメインの販売も行っています。
所有管理のしやすさを考えて、サーバーとドメインを同じ場所で取得すると想定したうえで、2社紹介します。

ロリポップ！レンタルサーバー

ロリポップ！レンタルサーバー
ご利用実績200万サイト以上という人気レンタルサーバー会社。
月額250円という格安価格でPHPが使えるので、企業HPなどでも多数利用されています。
ロリポップドメインが無料でついてくるので、ドメイン費用0でWEBサイトを立ち上げられる点が魅力。
※ただし、ロリポップドメインは他社のサーバーでは使えません

私自身、初めてレンタルしたのがここの会社でしたが、初心者にはわかりやすい管理画面だったり、大きいサービスを作るまではここを利用するのも良いかもしれません。

用意されている料金プランは以下になります。
ご利用料金 – レンタルサーバーならロリポップ！

ムームードメイン

実は、ドメインに関してロリポップでは取得できません。
※ロリポップドメインは借り物のため、サーバーとは切り離せない

その為、連携サービスとして『ムームードメイン』を利用する必要があります。
ムームードメイン | 欲しいドメインがすぐ見つかる。

設定は簡易化されているものの、ロリポップと別サービスなので、一括管理ができないという点で不安が残ります。
特に、支払い先が2社による支払い忘れには注意しましょう。

さくらインターネット

さくらインターネット｜サーバーホスティングサービス

安定感があり、低価格で充実したサービスを受けられるレンタルサーバー会社。
現在のWEBサイトはこちらのサーバーを利用して運営しています。

ドメインの取得もこちらで行う事ができるので、一括管理という点においてはここが良いかと思います。
ただ、管理画面のデザインが古く、使い勝手が良いかというと何とも言えません。

用意されている料金プランは以下になります。
さくらのレンタルサーバ

格安ドメイン会社

レンタルサーバーの価格は大きな違いはありませんが、ドメインに関しては大きな開きがあります。
長期的に考えると安い買い物ではないので、価格を比べて契約するといいと思います。

有名どころの格安ドメイン会社は以下のように複数あります。
ドメイン取るならお名前.com | 国内シェアNo1
スタードメイン
使えるねっと | ドメイン

※これらの会社はドメイン取得時の価格は安いものの、2年目以降の価格は他社とそれほど差がなかったりします

サーバーと別会社でドメインを取得した際には、ドメインをサーバーに割り当てるという操作が必要となりますが、慣れると簡単です。
一度は経験しておいて損はないので、価格を比べて契約する会社を決めてもいいと思います。

PCを触っているとわかりますが、ファイル整理の際、フォルダの階層を増やしてそこにファイルを格納していきます。
これは、WEBサーバーにおいても同じで、以下の画像のようにディレクトリを作り、そこにファイルを格納します。

これを理解していないと、表示したい画像や読み込みたいCSSが使えなかったりします。
重要な内容になりますので、これから解説します。
まずは以下の教材をダウンロードしてください。

教材をダウンロード

第二回講義　教材WEBページ

絶対パスと相対パス

ディレクトリパスには、『絶対パス』と『相対パス』があります。
どちらにも長所と短所があるので、状況に応じて使うのがいいでしょう。

そのパスの書き方ですが、以下の通りです。

<!-- 絶対パス -->
<img src="http://client.qomolangma.jp/data_20181211/assets/images/img_001.jpg">

<!-- 相対パス -->
<img src="assets/images/img_001.jpg">

上記のコードをダウンロードしたHTMLに貼り付けてみてください。
どちらも表示されるはずです。

2種類の違いとして簡単に説明すると、WEBにUPされているURLを指定して呼び出すのが『絶対パス』、呼び出そうとしているHTMLから画像の場所を指定して呼び出すのが『相対パス』です。
現在地を聞かれて
「日本/石川県/小松市/土居原町/１０−１０」と伝えるか
「小松市/土居原町/１０−１０」と伝えるかの違いのようなもので、状況に応じて使い分けるという事です。

<!-- 絶対パス -->
.mv{
    background:url("http://client.qomolangma.jp/data_20181211/assets/images/img_003.jpg") no-repeat scroll center top / cover;
}

<!-- 相対パス -->
.mv{
    background:url("../images/img_003.jpg") no-repeat scroll center top / cover;
}

続いて、こちらのコードをCSSに貼り付けてみましょう。
どちらも同じ表示になります。
しかし、HTMLと書き方が違いますね。
これは、教材のディレクトリ構造によるものです。

上の画像の通り、CSSファイルは『assets/css』の中にあります。
そして、呼び出したい画像ファイルは『assets/images』の中です。

現在地である『assets/css』から上の階層に上がって『assets/images』を指定する。
その階層を上がるという指示が『../』になります。

というように文字で説明しましたが、これで理解できるものではありません。
まずは、教材を使ってパスを切り替え、教材ディレクトリ内にある画像をすべて表示してみましょう。

ローカル環境とパスの指定

教材をPC上で操作、表示しているこの環境をローカル環境と呼びます。
この環境内では、基本的に絶対パスは使いません。
使えなくはないですが、役に立たないので、相対パスを使用します。

最初は戸惑ったり、うまくいかなかったりしますが、必ず使っていくものなので、体で覚えましょう。

ただし、WEBサービスを行っていく以上、WEBに公開し、WEB上で修正と追加を行うので、よりWEB上に近い環境を準備する必要があります。
それがXAMPPであり、バーチャルホストです。
WEB制作では必須の要素なので次回以降の講義で導入指導を行っていきます。

今回の講義をまとめると、以下のようになります。

• サーバーは土地、ドメインは住所のようなもの
• レンタルサーバー会社はよく調べて選ぶ
• 格安ドメインはあるが、2年目から価格が変わる
• ディレクトリ構造はPCのフォルダ構造と同じである
• ディレクトリパスには絶対パスと相対パスがある

特にディレクトリパスについては、今後必要な知識なので、身につけましょう。

先週に引き続き、HTMLやCSSに触れましょう。
学習サイトをピックアップしたので、以下のリンクから自分に合ったものを使って自主学習しましょう。

HTML & CSS | プログラミングの入門なら基礎から学べるProgate[プロゲート]
HTML/CSS入門編のレッスン一覧 | プログラミング学習サービス【paizaラーニング】
HTML入門 (全15回) – プログラミングならドットインストール
CSS入門 (全17回) – プログラミングならドットインストール
実践！ウェブサイトを作ろう (全16回) – プログラミングならドットインストール

先週よりさらにSTEP UP!!

はじめてのJavaScript (全11回) – プログラミングならドットインストール
JavaScript入門編のレッスン一覧 | プログラミング学習サービス【paizaラーニング】
JavaScript | プログラミングの入門なら基礎から学べるProgate[プロゲート]
Bootstrap 4入門 (全22回) – プログラミングならドットインストール

理想はすべてのレッスンをやることです。
今は目で見て手で触れる時間を増やすときなので、時間が許す限りやってみましょう。