Webページ作成のキホンの「キ」
Webページを初めて作る方向けに,基本的なことをまとめた記事です.
簡単なページをWebに公開できるようになることを目標とします.
Webページの仕組み
大雑把に言うと,Webページは次のような仕組みで表示されます.
- ブラウザが指定したURLにアクセスする.
- リクエストを受けたWebサーバは,ブラウザに対してページ表示に必要なファイルを返す.
- ブラウザは受け取ったファイルを解釈して画面に描画する.
※画像は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
- CSS
- Javascript
このうち,必ず必要になるのは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サーバに置いてみましょう.手順は以下の通り.
- 上記ソースコードをテキストエディタにコピペして,「index.html」という名前で保存.
- Webサーバの公開ディレクトリにアップロード.(公開ディレクトリは使用しているサーバの設定を確認して下さい)
そして,WebサーバのURLに実際にアクセスしてみてください.
以下のように表示されると思います.
先ほどのソースコードを軽く解説してみます.
<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にアクセスしてみてください.
以下のように背景がグレーになります.
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というぐらいよく使われます.