Logo a0de449bfc794a45333c1bf4f16f82b382942b7bfe1fa9e70ba67900e2306bd7

DIVE INTO CODE

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

DIVE00-1

2017.01.10

HTML:CSS基礎

※ 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

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

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

要素とは

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

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

属性とは

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

HTMLの入れ子構造について

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

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

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

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

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

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

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

https://diveintocode.gyazo.com/c07128bda61921385b4f0d8e79199b74

headタグとは

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

<body>
</body>

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

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

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

index.html

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

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

(例)

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

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

https://diveintocode.gyazo.com/f3cacd33465fe4654de57b12a8bf8f19

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

https://diveintocode.gyazo.com/e5080e57ebdae6777be80af7e5e8c4a4

インデントとは

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

index.html

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

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

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

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タグでリストを定義しましょう。

<ul>タグはUnordered Listの略で、順序のないリストを表示する際に使用します。
リストの各項目は<li>タグを用いて記述します。

index.html

<body>
  <ul>
    <li>Achieve</li>
    <li>トップページ</li>
    <li>お問い合わせ</li>
    <li>ブログ</li>
  </ul>
省略

:pencil2: aタグでリストをリンク化しましょう。

次に、リストの各項目をクリックすると、それぞれの項目に移動させたいので、リストをリンク化します。
<a>タグに<a href="">属性を加えてリンクを作成しましょう。
例えば、<a href="http://diveintocode.jp/">とするとDIVE INTO CODEへのリンクを作成することができます。
リンク先に何も指定しない場合、#で代用するのが一般的です。

index.html

<body>
  <ul>
    <li><a href="#">Achieve</a></li>
    <li><a href="#">トップページ</a></li>
    <li><a href="#">お問い合わせ</a></li>
    <li><a href="#">ブログ</a></li>
  </ul>
省略
</body>

:pencil2: footerタグでフッターを作成しましょう。

フッターを作成する時は、<footer>タグを使用します。

index.html

<body>
  省略
  <footer>
    <p>運営会社DIVE INTO CODE株式会社</p>
    <p>© 2015-2016 Copyright DIVE INTO CODE Corp.</p>
  </footer>
</body>

マークアップする

HTMLでページの文書を構成することができたので、次はCSSを使用して装飾しましょう。
HTMLを装飾するためには、CSSで装飾する場所を指定する必要があります。

(例)

<body>
  <h3>女の子</h3>
  <h3>男の子</h3>
</body>
.h3 {
  color: red;
}

CSSでは、h3タグで囲まれた文字色を赤色に装飾しています。
しかし、この場合だとすべてのh3タグが同じように装飾されてしまうので、class属性を使用して、装飾する場所を作成するのが一般的です。

(例)

<body>
  <h3 class="woman">女性</h3>
  <h3 class="man">男性/h3>
</body>
.woman {
  color: red;
}

.man {
  color: blue;
}
<h3 class="クラス名">女性</h3>
.クラス名 {
  セレクタ: ;
}

HTMLで、womanmanという名前のクラスを作成しています。
そしてCSSで、womanクラス内の文字色を赤色に、manクラス内の文字色を青色に装飾しています。

それでは実際にマークアップしていきましょう。

:pencil2: headerタグでマークアップしましょう。

今後使用することになる、ヘッダーのリンクを<header>タグで囲いましょう。
<header>タグで囲うことで、headerで囲まれているところは、ヘッダーであると示すことができます。

index.html

<body>
  <header>
    <ul>
      <li><a href="#">Achieve</a></li>
      <li><a href="#">トップページ</a></li>
      <li><a href="#">お問い合わせ</a></li>
      <li><a href="#">ブログ</a></li>
    </ul>
  </header>
省略

:pencil2: sectionタグでマークアップしましょう。

<section>タグで囲うことによって、意味や機能のまとまりであることを指定します。

index.html

省略
<section>
  <img src="images-master/achieve.png">
</section>
<section>
  <h2>About Achieve</h2>
  <p>
    Achieveは、受講生のために作成された、教材用アプリです。<br>
    Achieveを作り終えることで、SecondTeamに参加するための力を身につけることができます。
  </p>
  <p>
    Acheiveを一言で表すと、タスク管理アプリです。<br>
    チームメンバーが、今どのようなタスクを行っているかリアルタイムで把握することができます。
  </p>
</section>
<section class="function">
  <h2>Function</h2>
  <div class="function-images">
    <div class="function-image">
      <img src="images-master/key.png">
      <p>ログイン機能</p>
    </div>
    <div class="function-image">
      <img src="images-master/mails.png">
      <p>メール送信機能</p>
    </div>
    <div class="function-image">
      <img src="images-master/girls.png">
      <p>友達つながり機能</p>
    </div>
    <div class="function-image">
      <img src="images-master/comment.png">
      <p>コメント投稿機能</p>
    </div>
  </div>
</section>

<section>は複数存在するので、class属性を加えて、それぞれ差異化しましょう。
また、画像もそれぞれ一つのボックスとして扱いたいので、クラスを当てます。

なお、<section>タグ以下にある<div>タグは、それ自身は特に意味を持っていませんが、<div>タグで囲んだ範囲をひとかたまりとして、CSSを適用するのに用います。

index.html

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

ここまでの作業で以下のようなコードが完成します。
必ず、コードの意味を理解するようにしましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Achieve</title>
</head>
<body>
  <header>
    <ul>
      <li><a href="#">Achieve</a></li>
      <li><a href="#">トップページ</a></li>
      <li><a href="#">お問い合わせ</a></li>
      <li><a href="#">ブログ</a></li>
    </ul>
  </header>
  <section class="main-header">
    <img src="images-master/achieve.png">
  </section>
  <section class="about">
    <h2>About Achieve</h2>
    <p>
      Achieveは、受講生のために作成された、教材用アプリです。<br>
      Achieveを作り終えることで、SecondTeamに参加するための力を身につけることができます。
    </p>
    <p>
      Acheiveを一言で表すと、タスク管理アプリです。<br>
      チームメンバーが、今どのようなタスクを行っているかリアルタイムで把握することができます。
    </p>
  </section>
  <section class="function">
    <h2>Function</h2>
    <div class="function-images">
      <div class="function-image">
        <img src="images-master/key.png">
        <p>ログイン機能</p>
      </div>
      <div class="function-image">
        <img src="images-master/mails.png">
        <p>メール送信機能</p>
      </div>
      <div class="function-image">
        <img src="images-master/girls.png">
        <p>友達つながり機能</p>
      </div>
      <div class="function-image">
        <img src="images-master/comment.png">
        <p>コメント投稿機能</p>
      </div>
    </div>
  </section>
  <footer>
    <p>運営会社DIVE INTO CODE株式会社</p>
    <p>© 2015-2016 Copyright DIVE INTO CODE Corp.</p>
  </footer>
</body>
</html>

CSSでコーディングする

マークアップが完了したので、CSSで装飾していきましょう。

:pencil2: cssを記述するファイルを作成しましょう。

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

:pencil2: index.htmlにCSSの読み込み定義を追加する。

作成したCSSを適用するためには、HTML側で読み込む設定をする必要があります。

<head>
  <meta charset="UTF-8">
  <title>Achieve</title>
  <link rel="stylesheet" href="style.css">
</head>

CSSを読み込む設定は、headタグの中に記述します。
link要素で、外部のスタイルシートを読み込むことができます。また、href属性を使用して、読み込むファイルをstyle.cssに指定しています。

:pencil2: normalize.cssを作成し、読み込ませる

Normalize.cssとは

クロスブラウザにHTMLのエレメント(HTMLのタグのこと)のデフォルトのスタイルを提供するCSSファイルです。
デフォルトのCSS(初期状態で適用されているCSSのこと)はブラウザごとに異なるため、Normalize.cssなどのリセットCSSを用いないと、
意図せぬレイアウトになってしまいます。
そのため、通常はNormalize.cssなどのリセットCSSを用いる必要があります。

Normalize.cssの特徴は、ブラウザのスタイルを完全に消去するよりむしろ有用なデフォルトのスタイルを
保存します(各HTMLエレメントがデフォルトで持っているスタイルを完全には削除しません)。
normalize.cssを使用して、ブラウザ間(Chrome、IE、Safariなど)で異なるデフォルトのCSSの設定を共通化させ、どのブラウザからでも同じに見える
ようにします。

クロスブラウザとは
クロスブラウザとは、動作するWebブラウザは明示せず、如何なる環境下でもコンテンツが何かしらの状態で提供されることを保証した状態のことを表します。

リセットCSSとは
http://creive.me/archives/10438/

参考文献(Normalize.css)
http://coliss.com/articles/build-websites/operation/css/about-normalize-css.html

本サイト(Normalize.css)
http://necolas.github.io/normalize.css/

ドキュメント(Normalize.css)
https://github.com/necolas/normalize.css

style.cssのようにnormalize.cssを作成し、ファイルの中身を以下に設定します。
ファイルの中身は特に理解する必要はありません。

normalize.css

/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */

article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary { /* 1 */
  display: block;
}

/**
 * Add the correct display in IE 9-.
 */

audio,
canvas,
progress,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */

template, /* 1 */
[hidden] {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
  outline-width: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h2 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/* Forms
   ========================================================================== */

/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
select,
textarea {
  font: inherit; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Restore the font weight unset by the previous rule.
 */

optgroup {
  font-weight: bold;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,


[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,


[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */


[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */


[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

そして、htmlからnormalize.cssを呼び出します。

index.html

<head>
    <meta charset="UTF-8">
    <title>Achieve</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="style.css">
</head>

cssの基本について

(例)

<body>
  <h3 class="woman">女性</h3>
  <h3 class="man">男性/h3>
</body>
.woman {
  color: red;
}

.man {
  color: blue;
}

cssは、上記の例のように使用します。

.適用したい要素 {
  セレクタ: ;
}

:pencil2: CSSでコーディングする準備が整ったので、ヘッダーから作成していきます。

width: 100%とすることで、ヘッダーを横幅いっぱいに広げます。
background-color: #2c3e50;とすることでヘッダーの背景色を指定のものに変更しています。

style.css

header {
  width: 100%;
  background-color: #2c3e50;
  height: 54px;
}

それでは、作成した画面を実際に表示させてみましょう。
index.htmlを選択して右クリックをして「Preview」をクリックしてください。

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

作成された画面が表示されました。
ちなみに以下の赤枠で囲ったアイコンをクリックすることで、別タグに作成した画面を大きく表示させることができます。

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

ヘッダーの上に、隙間が空いてしまっているのが分かるかと思います。
まず、この隙間の原因を探りましょう。
chromeの検証ツールを使用すると、隙間の原因をさぐることができます。

:pencil2: Cloud9上のブラウザで右クリックをして、検証をクリックしましょう。

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

検証をクリックすると画面右(下)に検証ツールが現れるはずです。
検証ツールが表示される場所は特にどこでも構いません。

次に、検証ツールのselectボタンをクリックします。
このボタンを押して、要素を当てると今の状況を確認することができます。

https://diveintocode.gyazo.com/67d28c79d324ad954748327ef4087a8e

その状態で、ヘッダーにカーソルをあててを確認してみましょう。

https://diveintocode.gyazo.com/df2fdcee7b42ae95af6e388877468464

このように表示されます。このオレンジの部分はmarginと呼ばれる、余白です。
この余白が原因で、隙間があいているようです。従ってこの隙間を取り除きましょう。

:pencil2: marginを修正しましょう。

style.css

header ul {
  margin: 0 auto;
}

margin: 0 auto;とすることで、上下のmarginを0に、左右のmarginを自動に設定しています。

:pencil2: list-styleを修正しましょう。

次に各リスト項目の横にある点を取り除きましょう。
list-style: none;とすることで、listの横にできる黒点を取り除くことができます。

style.css

header ul {
  margin: 0 auto;
  list-style: none;
}

:pencil2: text-decorationを修正しましょう。

次に、ヘッダーのリストの文字を白色して、下線も取り除きましょう。
text-decoration: none;とすることで、リンクの下線を取り除くことができます。
color: white;とすることで色を白に指定しています。

style.css

header ul a {
  text-decoration: none;
  color: white;
}

次に、ヘッダーのリストを横にします。

:pencil2: リストを横並びにする

ヘッダーのリストを横にするためにfloatを使います。
floatは便利なプロパティですが、注意すべき点があるので順番に見ていきましょう。

float: left;とすることで、リストを左から順に横並びにすることができます。
そして、基本的にfloatを使用する際は、横幅を指定する必要があります。

style.css

header li {
  float: left;
  width: auto;
}

これでヘッダーを横並びにすることができました。

cleafixを使用する

floatは要素を浮かせて、要素を移動させています。なので、現在リストが浮いている状態です。
これにより、ヘッダーがリストを認識できなくなったり、下にあった要素がリストの裏に回ってしまったり....
などが原因でレイアウトが崩れてしまうことが多々あります。
なのでheader ul:afterとすることで、header ul(リスト)の後に擬似要素を作り
ヘッダーにリストの高さを認識させたり、他の要素の回りこみを阻止します。

https://diveintocode.gyazo.com/23c1097ce7509189b3b8126298844f41

style.css

header ul:after {
  content: "";
  display: block;
  clear: both;
}

このように擬似要素を作り、floatによるレイアウト崩れを阻止するテクニックをcleafixと言います。
今回はレイアウト崩れは発生していないですが、発生の原因になるので、floatした後はcleafixを使用しましょう。

:pencil2: ヘッダーの要素間隔を修正しましょう。

このままだと文字同士が少し窮屈のため、修正します。

style.css

header ul a {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: white;
}

display: block;でインライン要素をブロック要素にすることができます。
padding: 15px;で内側の余白を15pxとることができます。padding: 15px;で内側の余白を15pxとることができます。あ
ブロックとインライン、marginとpaddingについては、後で説明しますが、これで、ヘッダーを完成させることができたはずです。

インラインとブロックについて

  • ブロック要素:前後に改行が入る一まとまりの要素です。幅と高さが指定できます。
  • インライン要素:文字と同じレベルで扱われる要素です。幅と高さが指定できません。原則として前後に改行は入りません。

<a>タグはインライン要素のため、高さを指定することができず、実現したいheaderの高さにすることが困難です。
そのため、display: block; によりa要素をインライン要素からブロック要素に変更しています。

marginとpaddingについて

一言で表すと、marginは外側の余白、paddingは内側の余白です。

今回の場合、paddingにしても、marginにしても結果は同じですが、
IE5.x, 6で、float指定したボックスにマージンを指定すると、左側が指定された値の2倍のマージンになってしまう場合があるので、paddingを指定しています。

https://diveintocode.gyazo.com/426d1ddbecb57756e477d3ccc02500df

※上がpadding,下がmargin

:pencil2: main header を修正しましょう。

display: block;, margin: 0 auto;とすることで画像を中央によせています。

style.css

.main-header {
  padding-bottom: 15%;
  width: 100%;
  background-size: cover;
  background-image: url("images-master/header.jpg");
  background-attachment: fixed;
}

.main-header img {
  display: block;
  margin: 0 auto;
  width: 25%;
  padding-top: 15%;
}

:pencil2: about acheiveを編集しましょう。

paddingをそれぞれ指定することで背景色(白)の面積を拡大しています。

style.css

.about {
  background-color: white;
  color: #333;
  padding: 80px;
}

:pencil2: function-imageを完成させましょう。

background-color: #e9e9e9;で、背景色を灰色にしています。

style.css

.function {
  background-color: #e9e9e9;
  padding: 80px;
}

.function-images {
  width: 100%;
  display: table;
  margin-top: 60px;
  table-layout: fixed;
}

.function-image {
  display: table-cell;
  width: 100%;
}

:pencil2: footerを編集しましょう。

footerは、画面の横幅いっぱいに表示させたいので、width: 100%;としています。
また、padding: 20px 0 10px 0;とすることで上に20px、下に10pxの余白を入れて、背景色の面積を増やしています。

style.css

footer {
  width: 100%;
  background-color:#2c3e50;
  padding: 20px 0 10px 0;
  color: white;
  margin: auto;
  font-size: 12px;
}

:pencil2: footerを固定しましょう。

footerは一番下にあるべきなので、固定させます。
htmlをposition: relative;としfooterをposition: absolute; bottom: 0;とすることで画面上の一番下に配置します。前のsectionにかぶらないように,padding-bottom: 185px;とします。
style.css

html {
  position: relative;
  min-height: 100%;
}

body {
  text-align: center;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.function {
  padding-bottom: 185px;
}

:pencil2: 完成したコードを確認しましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Achieve</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <ul>
      <li><a href="#">Achieve</a></li>
      <li><a href="#">トップページ</a></li>
      <li><a href="#">お問い合わせ</a></li>
      <li><a href="#">ブログ</a></li>
    </ul>
  </header>
  <section class="main-header">
    <img src="images-master/achieve.png">
  </section>
  <section class="about">
    <h2>About Achieve</h2>
    <p>
       Achieveは、受講生のために作成された、教材用アプリです。<br>
       Achieveを作り終えることで、SecondTeamに参加するための力を身につけることができます。
    </p>
    <p>
       Acheiveを一言で表すと、タスク管理アプリです。<br>
       チームメンバーが、今どのようなタスクを行っているかリアルタイムで把握することができます。
    </p>
  </section>
  <section class="function">
    <h2>Function</h2>
      <div class="function-images">
        <div class="function-image">
          <img src="images-master/key.png">
          <p>ログイン機能</p>
        </div>
        <div class="function-image">
          <img src="images-master/mails.png">
          <p>メール送信機能</p>
        </div>
        <div class="function-image">
          <img src="images-master/girls.png">
          <p>友達つながり機能</p>
        </div>
        <div class="function-image">
          <img src="images-master/comment.png">
          <p>コメント投稿機能</p>
        </div>
      </div>
  </section>
  <footer>
    <p>運営会社DIVE INTO CODE株式会社</p>
    <p>© 2015-2016 Copyright DIVE INTO CODE Corp.</p>
  </footer>
</body>
</html>

style.css


header {
  width: 100%;
  background-color: #2c3e50;
  height: 54px;
}

header ul {
  margin: 0 auto;
  list-style: none;
}

header ul a {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: white;
}

header li {
  float: left;
  width: auto;
}

header ul:after {
  content: "";
  display: block;
  clear: both;
}

.main-header {
  padding-bottom: 15%;
  width: 100%;
  background-size: cover;
  background-image: url("images-master/header.jpg");
  background-attachment: fixed;
}

.main-header img {
  display: block;
  margin: 0 auto;
  width: 25%;
  padding-top: 15%;
}

.about {
  background-color: white;
  color: #333;
  padding: 80px;
}

.function {
  background-color: #e9e9e9;
  padding: 80px;
  padding-bottom: 185px;
}

.function-images {
  width: 100%;
  display: table;
  margin-top: 60px;
  table-layout: fixed;
}

.function-image {
  display: table-cell;
  width: 100%;
}

footer {
  width: 100%;
  background-color:#2c3e50;
  padding: 20px 0 10px 0;
  color: white;
  margin: auto;
  font-size: 12px;
  position: absolute;
  bottom: 0;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  text-align: center;
}

DIVE00-1課題

完成したAchieveを提出しましょう。

課題に取り組んでみましょう。ご質問等がありましたら、無料説明会にて承ります。

  • 目次

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

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

無料説明会はこちら