DIVE INTO CODE

人材紹介会社と連携した本気のカリキュラムと手厚いサポートを提供するプログラミングスクール。
最短わずか6ヶ月でRailsエンジニアとしての独立・転職を支援します。

DIVE00-1

※ WebブラウザはChromeをお使いください。

DIVE00-1のゴール

DIVE00-1は、Webサイトを作成する上で欠かせないHTMLやCSSといった技術や仕組みについて学んでいきます。

これから完成させるWebサイトを確認しよう

DIVE00-1は、下図のようなWebサイトを作成します。

https://diveintocode.gyazo.com/510a1ec2e78cb24a07b3d09d03bbe291

※こちら完成イメージとなっており、実際の出来上がるものと多少異なります。

Webサイトの仕組み

Webサイトは、一般的なホームページのことです。Webサイトは静的ページというもので構成されています。
DIVE INTO CODEも静的なページ群から成ります。

https://diveintocode.gyazo.com/1eaa9a1bf1c076e3eebe8cad981f5ff9

静的ページと動的ページ

静的ページは、管理者がページを更新しない限り同じ内容が表示され続けるページを指します。

動的ページは、管理者がページを更新しなくても異なる内容が表示されるページを指します。

例えば、静的ページは、違う日にも関わらず管理者が最後に更新した日の内容しか表示することができません。

https://diveintocode.gyazo.com/9ce5e4142940cb37c03f97eec126ac1f

しかし、動的ページは日によって異なる日付を表示させることができます。

https://diveintocode.gyazo.com/0f77a42db282511fdc4bb66eb249cffb

Webサイトが表示される仕組み

DIVE00-1では、静的なサイトを作成しますが、私達はどのようにWebサイトを見ているのでしょうか。

https://diveintocode.gyazo.com/4e2c968464b2661007124d2582aca51d

私達がWebサイトを見ることができるのは、ブラウザ がサーバーから送信されてきたHTMLとCSSを読み込んでいるからです。

https://diveintocode.gyazo.com/16b7fbd4d3da8b09df7f4c59b7521a79

Webブラウザとは

Webブラウザは、Webサイトを表示することを目的に作成されました。

https://diveintocode.gyazo.com/dda8d3d182fda66d1261b16557d9333a

具体的に、Webブラウザは、2つの役割を持っています。

・サーバーにリクエストを送信する。

https://diveintocode.gyazo.com/d3c800a0226c8c1ef7fa0bcb3ba56f85

・サーバーから送信されたレスポンスを表示させる。

https://diveintocode.gyazo.com/e8b096957ad1f871fa1a2c83d5062c6f

リクエストとレスポンスとは

サーバーにリクエストを送り、サーバーから送信されたレスポンスを表示させることについて理解しましょう。
Webサイトをみるためには、Webサイトが保管してあるサーバーに、閲覧要求をする必要があります。

https://diveintocode.gyazo.com/bce9c133d8c4a3eff8ba13906988021d

このように、Webブラウザからサーバーに対して、見たいものを要求することをリクエストと言います。

https://diveintocode.gyazo.com/8e581d54f4b00105875700878380da55

リクエストを受けたサーバーが、要求されたをものをWebブラウザに返すことをレスポンスと言います。

URLとは

なぜインターネット上の無限にあるサーバーに、Webブラウザはきちんとリクエストを送ることができるのでしょうか。

https://diveintocode.gyazo.com/647ac348e6169964f4067f0af406d6a5

これは、インターネットにもURLという住所があるためです。
例えば、下図のようなWebブラウザバーに表示されている文字列を見たことがあるでしょうか?この文字列が、URLです。

https://diveintocode.gyazo.com/08c6c296563ae5646cb16a6454e8b6f7

このように、http://diveintocode.jp/を指定すれば、DIVE INTO CODEのページを見ることができます。http://blog.diveintocode.jp/と入力すれば、DIVE INTO CODEのブログを見ることができます。

https://diveintocode.gyazo.com/f63cece64e8d39a46886732a841e01e3

HTTPとは

URLを指定することでリクエストの送り先を決めることができます。しかし、送り先を決めるだけではリクエストを送ることはできません。
これは、荷物を送る時に、送り先と送る手段を決めなければならないことに似ています。

https://diveintocode.gyazo.com/4f4200c142245ebb3c55f899c6d454a5

つまり、URLだけではなく、リクエストを送る方法も指定する必要があります。
リクエストを送る方法は、HTTP(Hyper Text Transfer Protcol) という方法を指定するのが一般的です。
HTTPをリクエストの送信方法に指定することで、URLとHTTPのメソッドを含んだリクエストを送ることが可能になります。

https://diveintocode.gyazo.com/898b83feecc7b42745001d5d32d579df

HTTPメソッドとは

HTTPでリクエストを送信する際に、HTTPメソッドを指定することができます。
HTTPメソッドを指定することで、サーバーにどのようなリクエストであるか、知らせることができます。

主なHTTPメソッド

GET          :リソース取得
POST         :子リソース作成、リソースへのデータ追加
PUT/PATCH    :リソース更新、リソース作成
DELETE       :リソース削除

リクエストの送り方

それでは、URLとHTTPをもとに、どのようにリクエストが送られているかを確認しましょう。
URLは、送り先と送り先の内部のどこを指定するかを判断するために必要です。

https://diveintocode.gyazo.com/d20dfd23adbe61275ec923e97c0f79f5

HTTPメソッドは、送り先にどのようなリクエストを送るかを指定します。
具体的には、単にWeb上の情報を取得したい場合はgetメソッドを使います。他には、入力フォームに入力した内容を送信する際に使うpostメソッド、更新するときに使うpatchメソッド、削除するときに使うdeleteメソッドなどがあります。

https://diveintocode.gyazo.com/295f1a3473254ae558c9777cd56a2784

様々なHTTPメソッドがありますが、基本的に使用されるメソッドのほとんどはgetメソッドです。
DIVE00-1では、getメソッドを使用します。

https://diveintocode.gyazo.com/73ea4b4766b20b3388e568d7fec9c7ff

以上が、基本的な仕組みについてです。

HTMLとは

HTMLは、マークアップ言語と呼ばれるものです。Webサイト上に表示させる基本的な文章を構成したり、見出しや表をマークアップ(人間語が認識出来ない機械でも文書の構造が認識出来るように、文書の各要素に目印を与えて行く事)するために使われます。
HTMLは「基本的な文書を構成するための言語である。」というイメージを持っておきましょう。

https://diveintocode.gyazo.com/155cf3892ca633863dd06db321cc344a

CSSとは

CSSは、HTMLでマークアップした場所を装飾するための言語です。例えば、文字に色をつけたり、文字の大きさを変更するために使います。

https://diveintocode.gyazo.com/68b3c1711c06c464b394927a86e22794

Webサーバーとは

Webサーバーは、ブラウザから送信されたリクエストを元に、HTMLやCSSなどをレスポンスとして返す役割を担うもののことです。

https://diveintocode.gyazo.com/16b7fbd4d3da8b09df7f4c59b7521a79

Webサーバ(ウェブサーバ、英:Web server)は、HTTPに則り、クライアントソフトウェアのウェブブラウザに対して、HTMLやオブジェクト(画像など)の表示を提供するサービスプログラム及び、そのサービスが動作するサーバコンピュータを指す。
広義には、クライアントソフトウェアとHTTPによる通信を行うプログラム及びコンピュータ。

##開発環境を構築する

Cloud9とは

それでは、実際に作業を行っていきます。
プログラミングをするためには、プログラミングを行うための場所(開発環境)を用意する必要があります。
そこで、プログラミングを行うためのツール一式を簡単に揃えることができるクラウドサービス「Cloud9」を使います。

クラウドサービスについて

Cloud9は、クラウドサービスの一種になります。クラウドサービスとは、インターネット経由で利用するサービスのことです。
利用者はWebブラウザのみを使って、開発環境を簡単に用意することができます。どのパソコンからもサービスを利用でき、データをインターネット上に保存することができます。

https://diveintocode.gyazo.com/7a9d37e41d9c80df21a79505892c9a26

Cloud9を登録する

それでは、実際にCloud9に登録しましょう。
※Cloud9は、クレジットカードの登録が必要ですが、無料で使用することができます。

:pencil2: Cloud9にアクセスしましょう。

https://c9.io/

https://diveintocode.gyazo.com/e6982fc4641dd3fd29c95b70ab3ad521

:pencil2: メールアドレスを入力してSign Upをクリックします。

https://diveintocode.gyazo.com/1f78bbd8f7c34ce3c14858b974f3c2c6

:pencil2: 名前を入力してNextをクリックします。

https://diveintocode.gyazo.com/fce0f5c8fb8c8c709c03b396b10adb79

:pencil2: username(ニックネームIDのようなもの)を入力してNextをクリックします。

usernameは後で、変更できないため、注意しましょう。

https://diveintocode.gyazo.com/2322eb561e52e56859c87e824bb963e1

:pencil2: 次に、Cloud9を利用する理由を選択します。

それぞれ、StudentとCourseWorkを選択しましょう。

https://diveintocode.gyazo.com/6a6c7493d85720fa7e02526bd0cbf2cd

:pencil2: 確認画面が出てきますが、特に変更がなければ、Nextをクリックしましょう。

https://diveintocode.gyazo.com/2bd4729b376d0e29df67e08e55f2a420

:pencil2: 「私はロボットではありません」にチェックをいれて、Nextをクリックしましょう。

https://diveintocode.gyazo.com/367069ca006cff92a37d1a0fd8438910

workspaceを作成する

新規登録が完了するとdashboardというworkspaceを管理する場所に移動します。
workspaceのひとつひとつは、一個の開発用のパソコンのようなものです。

:pencil2: achieveを開発するための、workspaceを作成しましょう。

workspaceにある灰色の枠内をクリックしましょう。

https://diveintocode.gyazo.com/69f2d1ec0acbcc5a0205d7473d0bbf90

:pencil2: workspace作成画面に移動するので、workspaceの名前を入力しましょう。

https://diveintocode.gyazo.com/a3850c446ebd17051905cba8e7d77d30

:pencil2: 次に、下にスクロールして、templateをrails turorial(railsではない)を選択してcreate workspaceをクリックしましょう。

https://diveintocode.gyazo.com/db9b2c32ae7a50edbce7628ce008e3ba

※privateではなく、publicを選択してください

create workspaceをクリックするとworkspaceが作成されます。作成されるまでこの画面が表示されます。

https://diveintocode.gyazo.com/c61ac1a5ebafd0efdc53a0f3e7a7d6d2

IDEについて

workspaceが作成されるとこのような画面(IDE)に移動できます。

https://diveintocode.gyazo.com/a7459378b256a5d76955efe4d5cc3ca7

:pencil2: workspaceを作成して、上記の画面(IDE)に移動できていない場合は、IDEをクリックして移動しましょう。

https://diveintocode.gyazo.com/01b95f74a4225ea31007109874b718d5

これで、プログラミングを行うための環境を構築することができました。

実際に作業に移る前に、このIDEの中身について学びましょう。

IDE (Integrated Development Environment)とは、統合開発環境のことで、テキストエディタ(コードを書く場所)、コンソール(命令を出す場所)を同じ場所から利用できるようにしたものです。

https://diveintocode.gyazo.com/7841dbeff849ad22b446cd4b7fed80c2

  • ファイルツリー アプリのフォルダやファイルの階層が表示される。ファイルの新規作成などはこちらから。
  • ファイルビュワー ファイルの中身を見ることができる
  • コンソール プログラミング言語を使用して命令を出す場所

保存について

ファイルを何かしら書き換えたら、保存をしなければなりません。ファイル名(ここではclogs_controller.rb)の横が となっていたら保存がされていない状態です。
Macユーザーなら ⌘+s 、Windowsユーザーなら ctrl+s を入力して保存しましょう。
保存すると × に変わります。

https://diveintocode.gyazo.com/6224ccaa9b99403893fb95c6ffabaae1

プレビューについて

これはHTMLやCSSの変更を確認した時に実際に表示される画面を見ることができる機能です。
Preview から Live preview file(ここではindex.html) をクリックするとAchieveのデザインを確認することができます。
なお、保存がされていないと変更点が反映されないので、保存されているかを確認してからプレビューを使うようにしましょう。

https://diveintocode.gyazo.com/2d252d8488a6ae36bf2b8abda71e9b44

achieveのTop画面を作成する。

HTMLでマークアップする。

開発環境を構築することができたので、実際に開発していきましょう。

まず、トップページの枠組みを作成していきます。

:pencil2: HTMLを記述するためのファイルを作成しましょう。

https://diveintocode.gyazo.com/087f707eb138918befae4496b9969763

ファイル名は index.htmlにしましょう。.htmlは拡張子の一種で、ファイルの種類がHTMLであることを示しています。Rubyのファイルであれば拡張子は、.rbになります。
ファイル(index.html)を作成することができたら、index.htmlをダブルクリックして、index.htmlを開きましょう。

https://diveintocode.gyazo.com/2c29e7af6529662cbed747974e3b7a98

index.htmlを開くことができると、このような画面になります。

トップページの枠組みを作成しよう。

まず、index.htmlに、achieveのトップ画面を作成するために、最低限必要な、Webページ用の枠組みを作成しましょう。

:pencil2: 以下のコードを、index.htmlに記述してください。

自分で書いたほうが、理解度が高まります。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Achieve</title>
</head>
<body>
</body>
</html>

コードを記述すると、このようになります。

https://diveintocode.gyazo.com/b69af2afa4bc35bc9c9af91b5903d897

それでは、この枠組のコードについて理解しましょう。

まず、と記述することで、文書がHTMLで作成されたものであることを宣言します。

要素とは

次に、このように<>で囲んで宣言するものを、要素といいます。
要素を使用することで、文書に役割をもたせることができます。例えば
とすれば、改行することができたり、

で大きい見出しを作成することができます。

このように要素は、基本的に、開始を宣言するものと終了を宣言するものが必要です。ここでは、開始タグがで終了タグがです。

属性とは


また、 要素には属性をもたせられるものがあります。例えば、htmlという要素には、langという属性を持たせることができます。実際のコードのように、とすれば、言語を日本語に指定することができます。もちろん属性をつけても、終了タグをつけてあげる必要があります。

HTMLの入れ子構造について

htmlは開始タグと終了タグの間に、さらに要素を加えることで、入れ子構造にすることができます。この場合、

<html>
<head>
</head>
</html>

この場合、htmlとheadは入れ子の関係になっています。

<!-- todo5 -->

このように、htmlを入れ子構造にすることで、Webページを作成していきます。

:pencil2: タイトルを設定しましょう。

~ の箇所にタイトルを定義することでブラウザのタブに表示されるようになります。Achieveは、ページのタイトルをAchieveとしています。ここで指定したタイトルはブラウザのタブに表示されたりします。

<head>
    <meta charset="UTF-8">
    <title>Achieve</title>
</head>

https://diveintocode.gyazo.com/c07128bda61921385b4f0d8e79199b74

headタグとは

headタグの間には、基本そのファイルに関する情報を記述します。例えば、ページのタイトルや中身の簡単な説明は、headタグ内に記述します
は、文字コードをUTF-8に指定しています。HTML5では、文字コードをUTF-8に指定することを推奨しています。

<body>
</body>

タグの中には、実際の文書の中身を記述します。

:pencil2: 見出しを記述しましょう。

タグを使用して見出しを作成していきます。

index.html

<body>
  <h2>About Achieve</h2>
  <h2>Function</h2>
</body>

タグは、の◯の中の数字を大きくするにつれて、見出しが小さくなります。

(例)

https://diveintocode.gyazo.com/8375924adc171e0983c358562160fd55

見出しを作成することができたら、変更内容を保存し、previewからLive preview file(index.html)をクリックして確かめましょう。

https://diveintocode.gyazo.com/f3cacd33465fe4654de57b12a8bf8f19

また、previewの出現した後に、赤枠をクリックすると更に大きく表示することができます。(通常のブラウザ表示)

https://diveintocode.gyazo.com/e5080e57ebdae6777be80af7e5e8c4a4

インデントとは

下記のコードのように ~ の範囲で開始位置を字下げして記述することをインデントといいます。
インデントはコードがどこの階層に属しているかを分かりやすくするためにあります。
インデントをいれることで、コードの可読性が上がるため、開発現場ではインデントを入れることが必須になっています。

index.html

<body>
  <h2>About Achieve</h2>
  <h2>Function</h2>
</body>

:pencil2: 段落を作成しましょう。

1つの文章のかたまりに段落を設定するためには、pタグを使用します。
また、
タグを使用することで、改行することができます。

index.html

<body>
  <h2>About Achieve</h2>
  <p>
    Achieveは、受講生のために作成された、教材用アプリです。<br>
    Achieveを作り終えることで、SecondTeamに参加するための力を身につけることができます。
  </p>
  <p>
    Acheiveを一言で表すと、タスク管理アプリです。<br>
    チームメンバーが、今どのようなタスクを行っているかリアルタイムで把握することができます。
  </p>
  <h2>Function</h2>
</body>

:pencil2: 画像を使用してachieveのFunction(機能)とメインヘッダーを作成しましょう。

HTMLで画像を使用するためには、以下を行う必要があります。

・ 画像を用意する
・ imgタグで配置する

まず、画像を用意しましょう。

https://github.com/Timeshift-corp/images

GitHubにアクセスして Download-ZIP をクリックします。

https://diveintocode.gyazo.com/59be3d5831442d81ad4d9da001c475be

画像をダウンロードすることができたらimageをCloud9にアップロードしましょう。

https://diveintocode.gyazo.com/8284f991a1e8726be5fbf19493894a69

画像を用意できたので、実際にimgタグを使用して画像を配置します。

index.html

<body>
  <img src="images-master/achieve.png">

  <h2>About Achieve</h2>
  <p>
    Achieveは、受講生のために作成された、教材用アプリです。<br>
    Achieveを作り終えることで、SecondTeamに参加するための力を身につけることができます。
  </p>
  <p>
    Acheiveを一言で表すと、タスク管理アプリです。<br>
    チームメンバーが、今どのようなタスクを行っているかリアルタイムで把握することができます。
  </p>

  <h2>Function</h2>
  <img src="images-master/key.png">
  <p>ログイン機能</p>
  <img src="images-master/mails.png">
  <p>メール送信機能</p>
  <img src="images-master/girls.png">
  <p>友達つながり機能</p>
  <img src="images-master/comment.png">
  <p>コメント投稿機能</p>
</body>

imgタグにsrcで属性を渡すと画像が表示されます。
src属性には、画像へのパスを渡してあげます。
この場合、画像は、imagesフォルダにあるため、images/画像ファイル名になります。

ヘッダーの土台を作成する

次は、ヘッダーの土台を作成しましょう。

:pencil2: ul, liタグでリストを定義しましょう。

DIVE INTO CODEの無料説明会を開催中

ハイレベルなプログラミングに入門したい方、フリーランスエンジニアになりたい方、
つくりたいアプリがある方、一歩前へ踏み出すお手伝いいたします。

無料説明会はこちら