しろかい！

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

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

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サーバとして動作させるのに必要なソフトがインストールされており，代表的なものにApacheやnginxなどがあります．が，詳しいことはここでは触れません．興味がある人はググッて下さい．

というのも，わざわざ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

CSS（Cascading 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ページに用いられる言語は複数あります．代表的なところだとPHPやRubyです．
これらの言語を使うと，例えば掲示板やメールフォームなどのアプリケーションや，APIを開発することができます．
こちらも，興味があればググってみてください．

まとめ

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

参考ページ

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

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

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

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