しろかい!

アプリ開発や機械学習などの開発Tips.

Webページ作成のキホンの「キ」

Webページを初めて作る方向けに,基本的なことをまとめた記事です.
簡単なページをWebに公開できるようになることを目標とします.

Webページの仕組み

大雑把に言うと,Webページは次のような仕組みで表示されます.

  1. ブラウザが指定したURLにアクセスする.
  2. リクエストを受けたWebサーバは,ブラウザに対してページ表示に必要なファイルを返す.
  3. ブラウザは受け取ったファイルを解釈して画面に描画する.

f:id:shun9167:20150415190904j:plain ※画像はhttp://www.mit-support.com/2010/09/725.htmlより拝借しました.

つまり,Webサーバを用意して,そこにWebページのファイルを置いておけば,Webページを公開することができます.
以下では,Webサーバと,Webページのファイルについて説明していきます.

Webサーバ

Webサーバとは,読んで字のごとくWebページを公開するためのサーバのことです.
Webサーバとして動作させるのに必要なソフトがインストールされており,代表的なものにApachenginxなどがあります.が,詳しいことはここでは触れません.興味がある人はググッて下さい.

というのも,わざわざWebサーバを自前で準備しなくても,世の中には無料でレンタルできる便利なサービスがあります.
「簡単なWebページを公開できるようになる」だけなら,無料レンタルで十分です.
これもググったら星の数ほど色んなサービスが出てくるので,探してみてください.

Webサーバを用意したら,公開ディレクトリ(環境によりますが,大抵はpublic_htmlという名前のディレクトリ)以下にファイルを置くことで,Webに公開することができます.

Webページのファイル

Webページの表示に必要なファイルは主に3つあります.

このうち,必ず必要になるのはHTMLのみですが,以下では3つ全て説明します.

HTML

HTML(Hyper Text Markup Language)とは,Webページを記述するプログラミング言語のようなものです.
厳密にはマークアップ言語と言って,文章を構造化・装飾するために用いられます.

HTMLはタグというものを用いて構造化や装飾を行います.例えば,

これは<strong>ペン</strong>です.

というように書くと,以下のように表示されます.

これはペンです.

「ペン」が太字になったのが分かるかと思います.これは,<strong>〜</strong>というタグが「文字を強調表示する」という意味を持つからです.

このように,タグは基本的に以下のように記述します.

  • < >で囲む
  • 装飾する部分を<開始タグ></終了タグ>で囲む.

タグには他にもリンクタグ,見出しを表すタグ,段落を表すタグ,画像を表示するタグなど,非常に多くのタグが存在します.
全部覚えるとか無理なので,以下のサイトで目的のタグを探しながらページを作成するとよいと思います.

HTMLファイルを公開してみる

では,実際にHTMLを書いて,それをWebサーバ上に公開してみたいと思います.

HTMLは原則として以下の形式で書いていきます.
今はその意味については触れず,おまじないだと思って下さい.

<!DOCTYPE html>
<html>
<head>
 <!-- ページに関する様々な情報を記述するエリア -->
 <title>ページタイトル</title>
</head>
<body>
 <!-- 実際にページに表示する内容を記述するエリア -->
 Hello World!
</body>
</html>

とりあえず,このページをWebサーバに置いてみましょう.手順は以下の通り.

  1. 上記ソースコードテキストエディタにコピペして,「index.html」という名前で保存.
  2. Webサーバの公開ディレクトリにアップロード.(公開ディレクトリは使用しているサーバの設定を確認して下さい)

そして,WebサーバのURLに実際にアクセスしてみてください.
以下のように表示されると思います. f:id:shun9167:20150415233604p:plain

先ほどのソースコードを軽く解説してみます.

<head>~</head>部には,ページに関する情報を記述します.この部分に記述する内容は,原則としてブラウザ上には表示されません.

じゃあ<head>~</head>部には何を書くのかといえば,例えばページのタイトルです.
<title>~</title>で囲まれた部分はページのタイトルとして解釈され,ブラウザの上の方の特定の場所に表示されます.通常の表示領域には表示されません.

次に,<body>~</body>部には,実際にWebページとして表示する内容を記述します.
上のソースコードでは,ここに「Hello World!」と書いているので,ブラウザで見た時にも「Hello World!」と表示されるのです.

なお,ソースコード中の<!-- ~ -->はコメントとして扱われ,ブラウザで表示されることはありません.

ちなみに,「index.html」というファイル名には特別な意味があって,次のどちらのURLでもアクセスすることができます.

  • http://[WebサーバのURL]/
  • http://[WebサーバのURL]/index.html

つまり,ディレクトリ名でアクセスした時に表示されるファイルは「index.html」となるわけです.
説明するまでもないと思いますが,「hoge.html」というファイル名のページのURLは,

  • http://[WebサーバのURL]/hoge.html

となります.

CSS

CSSCascading Style Sheets)とは,Webページのデザインを制御する言語です.
HTMLでも強調表示など簡単な装飾はできますが,凝ったデザインを表現することはできません.このままだと素っ気ないページしか作れません.

そこでCSSの登場です.

例えば次のように記述すると,ページの背景色をグレーにすることができます.

body {
  /* 背景色をグレーにする. */
  background: gray;
}

このように,CSS

適用したい要素 {
  属性: 値;
}

という形で記述します.
ここでは,「body(ページ全体)のbackground(背景)をgray(グレー)にしなさい」ということですね.

なお,/* */で囲まれた部分はコメントとして扱われます.

CSSについても数が多すぎて覚えるとか無理なので,例によって以下のサイトを参考にするのがいいと思います.

HTMLファイルにCSSを適用してみる

では,上記のCSSをindex.htmlに適用してみます.

先ほどの「index.html」を置いたディレクトリに,上記のCSSを「style.css」というファイルで配置します..cssというのが,CSSファイルの拡張子になります.

続いて,index.htmlを修正します.
<head>~</head>内に以下の1行を追加して下さい.

 <link rel="stylesheet" type="text/css" href="style.css">

このタグで,style.cssを読み込むように指定しました.

再びブラウザでindex.htmlにアクセスしてみてください.
以下のように背景がグレーになります. f:id:shun9167:20150416010006p:plain

Javascript

Javascriptは,動的なWebページを作成するのに用いられるプログラミング言語です.
C言語などのように演算を実行したり,ページにアニメーションのような動きを加えたり,非同期処理したり,HTMLとCSSだけではできないことを実現してくれます.

今回の目的の範疇を超えてしまうので,これ以上は説明しません.
興味のある方はググってみてください.

その他の言語

他にもWebページに用いられる言語は複数あります.代表的なところだとPHPRubyです.
これらの言語を使うと,例えば掲示板やメールフォームなどのアプリケーションや,APIを開発することができます.
こちらも,興味があればググってみてください.

まとめ

この記事では,「簡単なページをWebに公開できるようになること」を目標に,Webの本当に触りの部分だけを掻い摘んで説明しました.
これを足がかりとして,是非本格的なWebページ作成に挑戦してみてください!

参考ページ

ドットインストール - 3分動画でマスターできるプログラミング学習サービス
動画でプログラミングを学べるサイト.入門におすすめ!
HTML,CSSJavascriptなど,だいたい揃ってます.

HTMLクイックリファレンス
この記事で何度か登場したHTML,CSSのリファレンス.分からないことがあればここを見るとよいです.

とほほのJavaScriptリファレンス - とほほのWWW入門
Javascriptのリファレンス.

jQuery 日本語リファレンス
Javascriptのライブラリ「jQuery」のリファレンス.JSといえばjQueryというぐらいよく使われます.