カテゴリー
WEBデザイン

【WEBデザイン入門2】学習に必要なツールの準備

HTMLを学習するための環境を整えていきましょう。
とは言っても、他のプログラミング言語のように複雑な環境構築は必要ありません。
必要なものはHTMLを書くソフトHTMLを表示するソフトの二つで大丈夫です。
それぞれ解説していきます。

HTMLを書くソフト

HTMLコードはテキストエディターというソフトを使って書いていきます。エディターと略されて呼ばれることもあります。

テキストエディターとは?

テキストエディターとは簡単に言うと、高機能なメモ帳のようなものです。
普通のメモ帳だと以下のように、全ての文字が同じ色で表示されます。

 

プログラミング用のテキストエディターだと以下のようにコードの役割ごとに色分けしてくれ、もしエラーがあれば教えてくれたりもします。

 

メモ帳でも問題ないのですが、テキストエディターを使うことで大幅に作業効率を上げることが可能ですし、スペルミスなどのエラーに苦しめられることが少なくなり、コードの意味を理解するという本来の目的に忠実に学習を進めることが可能です。
テキストエディターはたくさんの種類がありますが、モダンコードでは無料のテキストエディター「Atom」を使っていきます。

 

Atomをインストールしよう

以下のリンクよりAtomの公式サイトを開きます。

Atom(https://atom.io/)

トップページの[Download]をクリックし、Atomをダウンロードしてください。

 

ダウンロードが完了したら、「AtomSetup-x64.exe」をダブルクリックで開いてください。
するとこのような表示になると思います。しばらく待ちましょう。

 

しばらくすると、Atomが自動で立ち上がってくれます。
「untitled」以外のタブは今回不要ですので全て閉じましょう。

 

右下の[Plain Text]をクリックし「HTML」と入力してみてください。

 

「HTML」「HTML(GO)」「HTML(Rails)」など、複数出てくると思いますが、一番上の「HTML」を選択します。
この設定は、どの言語を書くのかによって変更します。CSSを書く場合は「CSS」を、PHPを書く場合は「PHP」を検索して選んでください。

 

以上でHTMLを書くためのソフトであるテキストエディターのダウンロード、インストール、設定が完了しました。

 

HTMLを表示するソフト

HTMLを表示するためのソフトは、WEBブラウザです。

WEBブラウザとは?

皆さんも普段からネットサーフィンや動画閲覧などで良く使われていると思います。
ブラウザには、ウィンドウズに標準で入っているInternet ExplorerやMicrosoft Edge、Macに標準で入っているサファリなど、様々な種類のものがあります。
今回はGoogleが提供している「Google Chrome」を使用します。こちらも無料です。

Google Chromeのインストール

以下のリンク先より、公式サイトを開きます。

Google Chrome(https://www.google.com/intl/ja/chrome)

 

[Chromeをダウンロード]をクリックしてください。

 

利用規約が表示されますので一通り目を通し、[同意してインストール]をクリックしてください。ダウンロードが始まります。

 

インストーラの「ChromeSetup.exe」がダウンロードされるので、これダブルクリックで実行します。ユーザーアカウント制御のダイアログが表示されたら[はい]を選択するか、Windowsの管理者アカウントで認証してください。
インストールが完了したら、Google Chromeのウェルカムページが開かれます。

 

以上でHTMLを表示するソフト、ウェブブラウザのダウンロードとインストールが完了しました。

 

HTMLを学習するための準備

ツールが揃ったところで、学習の準備を進めましょう。
学習を行うフォルダを作り、その中に「html」ファイルをつくります。その後、「html」ファイルをどのソフトで開くか設定していきます。順番に見ていきましょう。

 

学習を行うフォルダの作成

学習で作成するファイルを保存するフォルダを作成しましょう。
PC内のどこに作成しても大丈夫ですが、今回はデスクトップに作成することにします。
デスクトップで右クリックし、[新規作成]>[フォルダー]をクリックします。ファイル名を「practice」と記載して保存してください。

これで学習を行うためのフォルダの作成が完了しました。

 

HTMLファイルの作成

先ほどインストールしたHTMLを書くためのソフトであるテキストエディターの「Atom」をたちあげてください。
右下の「Plain Text」をクリックし、検索窓に「HTML」と入力し、一番上にでてくる「HTML」を選択しておきましょう。
次に、以下のコードを書いていってみてください。

[html]
<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>サンプルサイト</title>
</head>

<body>

<h1>Hello World</h1>

サンプルサイトのトップページです。
</body>

</html>
[/html]

 

書き終わったら先ほど作成した「practice」フォルダに「index.html」という名前で保存してください。

 

「index」というファイルができたと思います。PCの初期設定では「.html」などの拡張子が表示されません。

 

これだと、なんのファイルか一目で判断が付かないので、ファイルフォルダの[表示タブ]>[ファイル名拡張子を表示]にチェックを入れましょう。

 

これで、拡張子が常に表示される状態になりました。
先ほど保存したファイルが「index」から「index.html」になっていると思います。

 

HTMLを開くソフトを指定

次にこの「index.html」をどのソフトで開くか設定していきましょう。
「index.html」をクリックして選択された状態で右クリックし、[プログラムから開く]>[別のプログラムを選択]をクリックします。

 

[Google Chrome]を選択し、[常にこのアプリを使って.htmlファイルを開く]にチェックを入れてて[OK]をクリックしてください。

 

「index.html」ファイルをダブルクリックして開いてみてください。
HTMLを表示するためのソフトであるウェブブラウザの「Google Chrome」が開かれ、このような画面になればOKです。おめでとうございます。初めてのWEBページです。こんな中途半端な感じで初めてのウェブページを表示させてしまってすみません。でもおめでとうございます。

 

これで「.html」の拡張子がついたファイルは常に「Google Chrome」が開かれるように設定できました。

以上でHTMLを学習する準備が整いました。

まとめ

これでHTMLを書くためのソフトであるテキストエディター「Atom」と、HTMLを表示するためのウェブブラウザ「GoogleChrome」の準備が整いました。
テキストエディターやウェブブラウザは他にもたくさんの種類があります。興味が出たら色々と試してみてください。

また、ファイルの拡張子が見えるように設定し、「html」ファイルをGoogleChromeで開く設定も行いました。
次回から、実際にHTMLの書き方を具体的に解説していきます。

カテゴリー
WEBデザイン

【WEBデザイン入門1】WEBサイトの基本的な仕組みを学ぼう

これからWEBデザインを学んでいく前に、インターネットやWEBについて少し学んでおきましょう。

1.インターネットとWEBの仕組み

インターネットとWEBの違いやその仕組みについて簡単に見ておきましょう。なんとなく理解できれば、その後の学習がスムーズです。

1-1.インターネットとは?

インターネットとは、世界中のコンピューター(パソコンやサーバーなど)を繋げる仕組みのことです。
今では当たり前ですが、ひと昔前は「世界中のコンピューターを繋げる」という仕組みは大発明でした。この大発明のおかげで私たちは、パソコンでインターネットに接続してWEBサイトを見たり、動画を見たり、チャットをすることができています。

1-2.WEBとは?

WEBとは、WWW(World Wide Web)の略で、インターネットを利用して、様々な情報(テキスト、音声、映像)をやり取りする仕組みです。
インターネットという仕組みの上に、WEBという仕組みが乗っかっているイメージです。インターネットにはWEBのほかにもメールやIP電話など、様々なサービスが乗っかっています。

1-3.WEBサイト・WEBページとは?

WEBページとは、テキストや画像などの情報をひとまとまりにしたページのことで、いくつかのWEBページを束ねたもののことをWEBサイトと呼びます。
あなたがネットサーフィンしてる時に見ているのがWEBサイトの中のWEBページにあたります。このサイトももちろんWEBサイトで、今見ているこのページがWEBページです。

 

2.WEBページが表示されるまでの仕組み

インターネットとWEBについてなんとなくわかったところで、WEBページがどうやってあなたのパソコンに表示されているのか、その仕組みを見ていきましょう。

2-1.URLとは?

URLはWEBサイトの住所のようなものです。現実世界に置き換えるとわかりやすいかもしれません。WEBサイトがマンションでWEBページがマンションの一室だとしたら、URLはマンションの住所のようなものです。
友達の家に遊びに行くには住所がわからないと辿りつきませんね。WEBの世界も同じで、住所(URL)がわからないと目的のWEBサイト(マンション)に辿りつくことはできません。

2-2.パソコンとサーバーのやり取りでWEBページが表示される

WEB上には無数のWEBサイトやWEBページがあり、その個数分URLが存在します。ではWEBサイトはどこにあるのでしょうか。実はWEBサイトはWEBサーバーと呼ばれるコンピューターに格納されています。
あるWEBサイトがあったとします。あなたのパソコンにそのWEBサイトのURLを入力すると、そのURLが紐づけられているサーバーに「情報をください!」と要求をだします。これをリクエストと呼びます。サーバーはリクエストに応答して、WEBページなどのなんらかの情報を返します。これをレスポンスと呼びます。そしてリクエストを送る側(つまりあなたのパソコンやスマートフォン)をWEBクライアントと呼び、レスポンスを返す側をWEBサーバーと呼びます。

WEBページが表示されるまでの仕組みは実は簡単で、「パソコンから要求(リクエスト)を送り、サーバーが応答(レスポンス)する。」これだけなのです。

2-3.WEBサイト・WEBページはブラウザで表示する

ブラウザとは?

ブラウザとは、InternetExplorerやGoogleChrome、firefoxやSafariなどのことです。ほとんどのパソコンに標準でインストールされていますね。
このブラウザにURLを打ち込んでサーバーへリクエストを送り、レスポンスで返したWEBページを閲覧します。基本的にWEBページはこのブラウザを通して閲覧します。

なんでわざわざブラウザで表示させる?

サーバーから返される情報はコンピューター言語(コードで書かれたプログラム)です。私たちが見ても、アルファベットと数字の羅列です。解読することも可能ですが、WEBサイトにアクセスするたびにそんなことをしていたらきりがありません。ブラウザはこのコンピューター言語を人間が閲覧できる形に変換して表示してくれます。あなたが無料で何気なく使っているブラウザは、実はとても画期的で凄いものなのです。

3.WEBサイトを作成し、公開するまでのおおまかな流れ

インターネット、WEB、WEBサイト、WEBページ、ブラウザと、WEBデザインを学ぶための基礎知識に少しだけ触れてきました。では実際にWEBサイトを作成してインターネット上に公開するまでの大まかな流れを見ていきましょう。

3-1.ページの内容を書きだし、HTMLでマークアップする

WEBページに掲載したい文章や画像をHTMLという言語で書いていきます。HTMLとはハイパーテキストマークアップランゲージの略で、「これがこのページのタイトルです」「これがこの記事の見出しです」のように、文章の意味合いをコンピューターに伝えるための言語です。HTMLでWEBページの骨格をつくっていきます。

テキストエディタで書きます。おすすめのテキストエディタは後ほどご紹介します。

3-2.CSSでページに色やデザインをつけていく

HTMLを書いていくのと同時に、CSSで装飾をつけていきます。CSSとはカスケーディングスタイルシートの略です。HTMLで書いた文章の文字色を変えたり、背景色を変えたり、文章の配置を調整したり、他にもいろいろなことがこのCSSで可能です。どんなにオシャレなWEBページも、HTMLとCSSは必ずといっていいほど使用されています。

CSSもHTMLと同様にテキストエディタで書きます。

3-3.サーバーを用意する

HTMLとCSSで作成したWEBページが出来上がったら、そのWEBぺージをサーバーにアップロードして皆が見れる状態にする必要があります。サーバーは自前で用意することもできますが、サーバー業者さんからレンタルサーバーを借りたほうが、安全で管理も簡単ですしなにより安くすみます。

月額500円~たくさんの種類があります。モダンコードではおすすめのレンタルサーバー業者さんについても解説します。

3-4.ドメインを取得する

ドメインとは、現実世界でいう住所のことです。ドメイン管理業者を通して好きなものを取得できます。すでに他の方に取得されているドメインは取得できません。ドメインを取得する時と、更新する時に料金がかかりますが、安いものは年間で数百円~。高いものでも数千円程度です。

日本語のドメインも取得することができます。このあたりも後ほど詳しく解説します。

3-5.サーバーとドメインを紐づける

用意したサーバーとドメインを紐づける作業が必要です。この紐づける作業を行うことで、取得したドメインにアクセスすると紐づけたサーバーの情報が閲覧できる状態になります。

3-6.サーバーにWEBサイトの情報をアップロードする

HTMLとCSSで作成したWEBページの情報をサーバーへアップロードします。アップロードするにはファイル転送ツールを使用します。ファイルを転送するツールを業界では「FTPソフト」と呼んでいます。

これで、ブラウザに取得したURLを入力すれば、あなたが紐づけたサーバーにアクセスし、サーバーにアップロードしたWEBページを閲覧できる状態になります。