最近本だなを整理していて、もう読まなくなった Web制作系の本を片付けたりしてみました。ずーっと前、Webサイトってどうやって作るんだろうってところから始まって、用語もよく分からないまま色んな本を読んだりした頃を思い出します …。
Webサイトは HTML っていうものでできていて、CSS っていうもので、見た目をデザインしていくのかぁ … っていうことさえ、あの頃の私にとっては新しい発見だったなぁ … なんて思ったりしました。
最近では HTML5 とか CSS3 とか、私が勉強し出した頃に比べると、今から勉強を始める人にとっては、少し難しくなってるのかな？ … という印象を持ったりしています。今から Web制作をしてみたいっていう人にとっては、何を勉強すればいいのか戸惑っている人もいるみたいですね …（そういう質問を時々いただくので …）。なので今回は、これから Web制作を勉強するにあたって、どんなことをどんな順番で勉強したらいいのか … というフローを書いてみました。Web制作に興味をもってる学生さんとかに読んでもらえたらうれしいです！
Web制作の学習フロー 目次
- Webサイトの骨組み – HTML
- Webサイトのデザイン担当 – スタイルシート
- HTML から CSS を読み込む
- ブラウザについて知ろう！
- Webサイトを作成するときに使うツール
- ちょっと寄り道 … グラフィックをつくるには？
- レンタルサーバーで公開！
- HTML + CSS の次に挑戦したい – Javascript
- jQuery を勉強しよう！
- Javascript でできること – 例）Web API
- クライアントサイドとサーバーサイド
- サーバーサイド – PHPとMySQL に挑戦！
- サーバーサイド用のツール
- 効率化を考えよう！
- その他トレンド … というか、時代的なもの
- まとめ
1. Webサイトの骨組み – HTML
まず Webサイトというのは、HTML（えいちてぃーえむえる）という専用の言語で書かれています。HTML は Hyper Text Markup Language（はいぱーてきすとまーくあっぷらんげーじ）の略で、Webサイト用の文書を書くための言語です。Webサイト用の文書っていうのが、ちょっと分かり難い表現かもしれませんね …。
でも HTML で書くのは、あくまで意味の通る「文書」なんです。会社で書く報告書や、学生さんが提出する論文やレポートと同じように、HTMLで作るものはあくまで「文書」。文章には見出しがあったり、段落があったり、ときには図版を入れたり、箇条書きがあったりしますよね。そういった構造をもった文書を Webサイトで表示するために、HTML という言語を使って書くのが Web制作の第一歩です。HTML で文書を書くことを、「マークアップ」って言ったりもします。
1.1. HTML は文書
仮に以下のような、紙に書いた文章があったとします。
この文章には、大見出しや小見出し、段落があります。箇条書きのリストもあります。これを Webサイト用に HTML を使って記述しなおしてみましょう。
HTMLで書いた場合
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>これからWeb制作をするために勉強したいこと</title>
</head>
<body>
<h1>これからWeb制作をするために勉強したいこと</h1>
<p>Webサイトを作成するには、どんな知識と技術が必要になるのでしょう？専門用語が多い Web制作の現場では、言葉ひとつとっても初心者さんには分からないものが多いと思います。まずは Webサイトがどんなプログラム言語で記述されているのかを見てみましょう。</p>
<h2>使用される言語</h2>
<p>Webサイトは、主に以下のもので記述されています！</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
<h3>HTML</h3>
<p>HTML は Webサイトの骨格となる基本の部分。まずは HTML がなければはじまりません。Webサイトのコンテンツを「文章」として記述するための言語です。</p>
<h3>CSS</h3>
<p>CSS は、HTML でマークアップされた Webサイトのデザインを整えるために記述します。Cascading Style Sheets の略で、スタイルシートと呼ばれるように、ページの「スタイル」（デザイン）を指定するために必要になります。</p>
<h3>Javascript</h3>
<p>Javascript はブラウザ上で動くプログラム言語。主に HTML や CSS だけでは表現できないことを補う目的で使われます。学習が必須という訳ではありませんが、覚えておくと Webサイト上での表現に幅がでるので、ぜひ覚えたいプログラム言語のひとつです。</p>
</body>
</html>
なにやら<h1> ~ </h1> とか、<p> ~ </p> とか、<>（山括弧）で囲まれた記号みたいなもので、テキストが囲まれていますねー。これを HTML タグといいます。基本的には < 開始タグ > で始まって、</ 終了タグ > で終わります（例外もあります）。
HTML では、このようにテキストなどをタグで囲んで記述していくのがルールです。
そしてそれぞれのタグには意味があって、HTML は文章に意味をつけていく作業と言えますね！
- <h1> … ページの中の一番大きい見出しを意味します。
- <h2> … ページの中の二番目に大きい見出しを意味します。
- <h3> … ページの中の3番目に大きい見出しを意味します。
- <p> … 段落を意味します。
- <ul> … 箇条書きリストを意味します。
- <li> … リストの中のひとつひとつを意味します。
もちろんここで例にあげたタグは、たくさんあるタグの中のほんの一部です。HTML でのマークアップは、このように文章に意味を与えていく作業 … ちょっと地味な作業ですね！でも、この作業を避けていては Webサイトを作成することはできません。
もちろんこのブログ – Webデザインレシピも例外ではありません。
MEMO
Webサイトの HTML ソースは、ブラウザで確認することができます。例えば Google Chrome の場合は、表示 → 開発/管理 → ソースを表示 で、見ることができます。
HTML ソース
Webサイト作りは、この HTML でのマークアップが始まりです。HTML は文章に意味をつけながら、タグを記述していくもの。そして HTML は、Webサイトの本体ともいえる基礎部分です。ここでは「Webサイトの文章は、HTML でマークアップする！」って覚えておいてくださいね！
STEP1 – HTML から始めよう！
ひと言で HTML といっても、HTML4 とか XHTML、HTML5 と、いろいろなマークアップ言語があります。個人的には XHTML を勉強して、それから HTML5 … という流れがいいと思います。
2. Webサイトのデザイン担当 – スタイルシート
Webサイトの基礎部分は、HTML でマークアップすると書きました。さっき書いた HTML 文書、ブラウザで表示すればもう立派な Webサイトです。実際にどう表示されるかをちょっと見てみることにしましょう！
HTML をブラウザで表示
さっきの HTML をブラウザで表示した状態。
見出しは大きく表示されているし、段落を分ける余白もあって、文書としてはしっかり成り立っています。でも、せっかく WEBサイトを作るんですから、もっと自分の好きなようにデザインを施したいですよね！それを実現してくれるのが、スタイルシートというものです。正確には Cascading Style Sheets（かすけーでぃんぐすたいるしーと）といって、CSS って略されます。CSS では、HTML の要素（タグで囲んだものひとつひとつのことを要素って呼んだりします）にスタイル（デザイン）を指定していくことができるんです！
例えばさっきの HTML 内の <h1> 要素に背景画像を指定したり、ページの一部にテクスチャ（質感っていう感じ）画像を敷きつめてみます。また、一部の文字の色を、真っ黒からグレーにしてみます。
CSSで装飾したさっきのページ
地味？だったページが、少しだけ華やかになりました！
するとこんな風にページのデザインが変更されました！HTML では、タグと呼ばれるもので囲んで記述していましたが、CSS には CSS の記述の仕方があります。
CSSの記述の仕方
セレクタとか、プロパティとか値とか … ちょっと難しく感じるかもれませんけど、言葉に置き換えてみると簡単です！セレクタの部分には、各要素を指定して、プロパティと値を使って、デザインをしていするって感じです。
例えば <p> タグ（段落）の CSS に、以下のように記述してみます。
p { color: gray; }
言葉に置き換えてみると、「p要素（セレクタ部分）の色（プロパティ部分）を、グレイ（値の部分）にする。」という感じです。どうですか？こんな風に考えれば、CSS の記述も楽しくなってきますね！
プロパティにはたくさんのものがありますから、それを覚えていけばいくほど、CSS でのコーディングが楽しくなっていくと思います！例えば …
プロパティの例
- color … 要素内の文字の色を指定します。
- background … 要素に背景を指定します。
- border … 要素をぐるっと枠線で囲みます（太さや色などを指定）。
- width … 要素の幅を指定します。
ここで紹介したプロパティはほんのひと握りです。さっきは <p> 要素に指定した CSS を見てみましたけど、もうひとつ例をあげてみます。さっきの HTML の中の <h1> 要素（1番大きな見出し）には、次のようにプロパティや値を指定してあります。
h1 {
background-image: url(images/headline.png);
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px;
}ちょっとプロパティが増えました。CSS では複数のプロパティを指定できるので、要素それぞれに細かくデザインを施すことができるんですね！
プロパティの例
- background-image … 背景に使う画像を指定します。
- background-position … 背景画像の位置を指定します。
- background-repeat … 背景画像を繰り返すかどうかを指定します。
- padding-left … 左側の余白を指定します。
こんな風にたくさんのプロパティがあるので、ひと通り覚えるのは大変かもしれませんが、CSS のコーディングは経験を積むのが一番 … みたいなところもあるので、長く付き合っていくのがいいかもしれません。
いきなり記述の仕方について、ちょっとだけ紹介しちゃいましたけど、こんな風にして HTML で書かれた Webサイトのデザイン部分を担当しているのが CSS です。Webサイトを作成するなら、HTML と CSS は切っても切れない関係です。なのでよく HTML + CSS みたいに、セットで言われることも多いです。
STEP2 – CSS でデザイン！
まずは CSS の基本を学習して、その後 CSS3 の新しいプロパティなどを勉強する流れがいいと思います。
3. HTML から CSS を読み込む
ここまで HTML と CSS について、駆け足気味に紹介してきました。まずは HTML があって、デザイン部分は CSS が担当しているって書きました。でもこのふたつ … HTML と CSS は基本的に別々のファイルに記述します（HTML の中に CSS を書く方法もありますが、基本的には別ファイルがベターです）。
まず HTML の方は、拡張子を .html にします。そして CSS の方は .css にします。今回は HTML の方は index.html という名前、CSS の方は style.css という名前で保存したことにしてお話を進めていきますね！
HTML ファイルと、CSS ファイルはそれぞれ独立しています。そこでふたつのファイルを関連付けないといけません。Webサイトの骨格 … 本体は HTML なので、index.html の方から、style.css を読み込んであげなくてはなりません。
そのためには HTML ファイルには、以下のように <head> ~ </head> の間に style.css を読み込むための <link> タグを記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>タイトル</title>
</head>
<body>
ここに書いた HTML タグが、Webページとして表示されます。
</body>
</html>冒頭で紹介した <h1> タグや <p> タグなど、画面に表示する部分は、<body> ~ </body> の間に記述することになっています。そして <head> ~ </head> の間には、Webページの文字コードを記述したり、ページのタイトル（<title>タグ）を記述したり、スタイルシートを読み込むための <link> タグを記述する … という決まりになってます。
こんな風に HTML から CSSファイルを読み込んで、CSS で HTML の装飾をしていけば、素敵な Webサイトをつくることができそうです！
MEMO
ここでは HTML から CSS ファイルを読み込む … というような紹介をしました。Webサイトではたくさんのファイルを HTML ファイルに読み込んで利用するのが基本的な構造です。後で紹介する Javascript ファイルなども、CSS と同じように HTML で読み込みます。写真などの画像ファイルも同様です。
HTML + CSS の基礎については、下記のリンクが参考になると思います！
また、3分動画で Web制作について学べる、ドットインストールもおすすめです！
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
私は簡単な Webサイトが作れるようになった後、この本で勉強しました。XHTML と CSS の Web標準についての本なので、HTML5 や CSS3 などの記載はありません。
それでは早速、HTML と CSS を勉強しましょう！ … なんですけど、その前にもっと知っておいた方がいいことがあります。それはブラウザについてのこと。
4. ブラウザについて知ろう！
Web制作というと、Webサイトの作り方にばかり気をとられちゃいますが、Webサイトはブラウザで閲覧するものですから、ブラウザについても予備知識が欲しいところです。ブラウザというのは、Internet Explorer や Firefox といった Webサイトを見るために使うアレです。今もこのブログを見てくれてますよね！インターネットをするときに使っている、それがブラウザです。
どうしてブラウザについて知らなくてはならないのかというと、ブラウザによって Webサイトの表示や、使える技術などが違うからなんです。どこがどう違うか … ということを知るためにも、まずはブラウザを知ることが必要なんですね！ブラウザにはいくつかの種類があって、人それぞれ利用しているブラウザは違います。
主要なブラウザ
- Internet Explorer … Microsoft 製
- Firefox … Mozilla 製
- Google Chrome … Google 製
- Safari … Apple 製
- Opera … Opera 製
上記はブラウザの種類と、開発した会社（ベンダーって呼んだりします）です。私は主に Google Chrome を使っています。ときどき Firefox も使っています。使っているのが Mac なので、Safari もインストールされています。
そして日本では、Internet Explorer（以下 IE って書きますね！）を使っている人がとっても多いんです。IE を作ったのは、Windows と同じ Microsoft 社です。なので Windows パソコンを買うと、最初から IE がインストールされています。その結果、そのまま IE を使っている人が多い … という感じですね！
またブラウザもどんどん進化してしているので、ときどきバージョンアップします。例えば 2012年 7月現在、Google Chrome のバージョンは 20 ですし、Firefox の最新バージョンは 13 です。そして IE の最新版は 9 です。
4.1. ブラウザによるデフォルトの CSS
さっきブラウザによって、Webサイトの表示や使える技術などが違うと書きました。技術については後述することにして、表示が違うというのはどういうことでしょう？ここでもう一度、さっき作ったサンプルを見てみましょう。
ブラウザによる表示の違い
Safari での表示。フォントは明朝体ですねー。
Firefox での表示。フォントはゴシック体。
同じ html ファイルを閲覧しているのに、ブラウザを変えると表示が違います …。これはどうしてかというと、もともとブラウザでは各要素に対してデフォルトでスタイルが指定されているんです。なので特に CSS でスタイルを指定しない場合でも、大見出しである <h1> は大きな文字で表示されていましたし、段落と段落の間には、適度な余白（余白も CSS で指定する部分なんですよー！）ができていたんですねー。フォントの種類（明朝体とゴシック体）が違っていたり、デフォルトのフォントサイズも違ったりします。
ちょっとした違いなら、気にせずそのままでもいい場合もたくさんありますが、余白の大きさが違ってレイアウト的におかしくなったりする場合だってあります。そこでよく用いられる手法として、ブラウザのデフォルトの CSS を一度リセットして、自分で思うような デザインを CSS で記述しなおす … という reset.css（リセットCSS）というものがよく使われています。
リセットCSSの一例
/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
-
css reset </>
上記のような、各要素の余白を一度「0」にしたりするコードなどを、スタイルシート（css ファイル）の一番上に記述してしまうんですね！その上で、自分で好きなスタイルを改めて設定していく … といった具合です。
MEMO
全部リセットしてしまってから、改めてスタイルを指定しなおす … のではなくて、必要なものだけリセットして、できるだけデフォルトのスタイルを残す … というノーマライズCSS っていう考え方もあります。「ノーマライズCSS」などで検索してみると、いろいろでてくるのでチェックしてみてくださいね！
4.2. ブラウザによって使える技術が違う
ブラウザにはデフォルトのスタイルシートが設定されていて、それぞれのブラウザでは表示が違うということを書きました。でもブラウザ間の相違点はそれだけではありません。
例えば HTML5 から加わった新要素は、IE8 以下では基本的に使えません。なので HTML5 でマークアップするときには、注意が必要ですねー。また、IE8 以下では、CSS3 のプロパティも利用できません …。
それに対して、Google Chrome や Firefox、Safari、Opera などのブラウザでは、HTML5 の新要素や CSS3 も使えますし、iPhone（スマートフォン）や iPad（タブレット）などのモバイル機器に搭載されているブラウザでも使用することができます。
とはいっても、全ての新要素やプロパティが使える … というものではなく、ブラウザごとに使えるものに差があったりもします。
MEMO
下記リンク先のサイトでは、各ブラウザで使える HTML5 の要素や、CSS3 のプロパティが確認できます。
-
findmebyIP.com
ちょっと最新情報ではないです。この手のサイト、他に見やすいところがあったら、教えていただけるとうれしいです！
このようなことがあるので、それぞれのブラウザについてもある程度知っておく必要もあるんですね！
5. Webサイトを作成するときに使うツール
とりあえず HTML + CSS を使えば、Webサイトは作れますね！なのでここまででひと区切りして、今度は Webサイトを作成するときにつかうツールをチェックしてみます。最低限必要なのは、以下のふたつです。
- テキストエディタ
- ブラウザ
5.1. ツール 1 – テキストエディタ
テキストエディタは、名前のとおりテキストを書いたり編集できたりするもの。でも、Windows についてくる Office Word は使えません。テキストエディタには、無料で使えるものもたくさんあるので、まずはそれで始めてみてもいいと思います。
Webサイト … といっても、中身はテキストエディタに書かれたソースコードです。ですからテキストエディタを使って、html ファイルとか、CSS ファイルとして保存してあげればいいだけなんですね！
でも、コードを書くなら、色分け機能は欲しいかも …。手書きで打ち込んでいくと、間違えることもあるので、書式によって色分けしてくれるエディタだと、間違いを発見しやすいし効率的だと思います！
色分けされたコードと白黒のコード
コードが色分けされてると、綴り間違いもすぐに発見できます！
白黒だとちょっと分かり難いかも …
無料で使えるテキストエディタいろいろ
- さくらエディタ … Windows 用（使っていないので、詳しくはわかりません）
- CotEditor … Mac 用。コードの色分けもできます！
- Fraise … Mac 用。こちらもコードの色分け OK です！
また、オンラインの HTML の学習向けエディターも最近公開されています！
-
MOZILLA THIMBLE
本格的に Web制作するようになったら、専用のエディターを購入してみるのもいいと思います。入力補完をはじめ、コーディングを快適にしてくれる便利機能満載です！よく使われているものとしては、Adobe Dreamweaver が人気です（HTML エディターとしてだじゃなく、オーサリングツールとしても高性能です）。でもちょっと高価（5万円くらい）ですね …。私は Coda2（Mac用 … 定価で 8,500円）というエディターを使っています。
5.2. ツール 2 – ブラウザ
ブラウザはページの表示を確認するために必要ですね！でも最近のブラウザでは、閲覧するだけじゃなくて開発ツールも備わっているので、とっても便利なんです！私は普段 Google Chrome を使っているので、画面をちょっとご紹介。
Chrome のデベロッパーツール
Google Chrome のデベロッパーツール。表示 → 開発/管理 → デベロッパーツールから利用できます。
こんな風に HTML のソースと、そこに指定されてる CSS のコードがチェックできるのでとっても便利！また、そのまま HTML や CSS を編集して、どう表示が変化するのもチェックできるので活用してみてくださいね！
Firefox の場合は、デフォルトの開発ツールもいいんですけど、Firebug というアドオンが人気です。
-
Add-Ons for Firefox
他のブラウザにもこういった機能がついている（未確認）と思うので、お使いのブラウザで試してみてくださいね！
6. ちょっと寄り道 … グラフィックをつくるには？
Web制作では画像を使うことがとても多いです。ここでいう画像というのは、写真はもちろん、Webサイトのデザインを彩るいろいろな素材のこと。そういったグラフィックを作るのには、グラフィックソフトが必要です。そういったソフトの使い方も、Web制作をするなら覚えておきたいところですね！
一般的に以下のソフトがよく使われていますが、少し高価かも …。
- Adobe Photoshop（フォトショップ）
- Adobe Illustrator（イラストレーター）
- Adobe Fireworks（ファイヤーワークス）
どれも Adobe の製品です。Photoshop や Illustrator は、学生さんや教職員のみなさんは、割引で購入することができるので、将来 Web制作者を目指すなら、今のうちに購入しておくのもありですね！長ーくお世話になるソフトウェアだと思うので、おすすめです。
学生・教職員個人版 Adobe Photoshop CS6 Extended Windows版 (要シリアル番号申請)
アカデミック版は通常の価格の半額以下？で購入できます。学生さん、羨ましいです ….。
また、無料で試せる体験版もあるので、まずはそちらもチェックしてみてくださいね！
-
Adobe
まだソフトウェアにお金はかけたくない … という人には、Photoshop の替わりに、Gimp という無料で利用できるソフトがいいっぽいです。私は利用したことはないのですが、周りには使っている人もたくさんいます！
7. レンタルサーバーで公開！
今まで紹介したツールを使って HTML + CSS で Webサイトができたとします。でもそれは、ローカル環境（自分のパソコンの中）での作業でした。なのでインターネット上に公開されている訳ではありません。
インターネット上に Webサイトを公開するには、レンタルサーバーでスペースを借りて、そこに html ファイルや css ファイル、画像など、作成したものをアップロードします。
レンタルサーバーについては詳しく書きませんが、サーバーにファイルをアップロードするのには、FTP（ファイル・トランスファー・プロトコル）というものを使って転送します。そのときに専用のアプリが必要になりますが、これも無料のものが公開されています。
FTPクライアントソフト
ちなみに私は、Transmit というのを使っています（2,950円）。各アプリの使い方は、ヘルプなどを参照してみてくださいね！
8. HTML + CSS の次に挑戦したい – Javascript
HTML + CSS での Web制作になれたら、次はプログラムに挑戦してみましょう！プログラム言語にもたくさんの種類があります …。でも Javascript というプログラム言語は、HTML や CSS と同じように、ブラウザで動くプログラム言語（逆にサーバーで動くプログラム言語というものもあります … 後述しますね）。Javascript では何ができるかというと、HTML や CSS をプログラムによって操作することができるんですね！
HTML や CSS を操作するってどういうこと？って声が聞こえてきそうですね …。すこし言い回しが分かり難かったかもしれませんが、例を見ると分かりやすいと思います！
例えば数枚の画像を並べたいなーってなったとします。HTML と CSS だけでは、基本的にはそのまま画像を並べるしかありません …。
もちろんこれが悪い訳ではないんですけど、スペース的に制約がある場合などは、もっとスペースを小さくしたいですよねー。でも画像のサイズ自体を小さくするのもしたくない … というようなとき、小さい画像（サムネイル画像って呼んだりします）をクリックすると、大きな画像を表示する … といったものが便利です！
Javascript の使用例
サムネイル画像をクリックすると、大きな画像が入れ替わる。
そしてこの仕組みは Javascript というプログラム言語で、HTML と CSS を操作して作っているんです。
例えば小さい方の画像をクリックしたときに、大きい方の画像のファイル名を変更（HTMLの操作）したり …。そして画像が切り替わるときには、画像の不透明度を変更して（CSSの操作）、フェードエフェクトをつけたり …。Javascript を使えば、HTML + CSS だけではできない「動き」を Webサイトにつけることができるんですね！
STEP3 – はじめてのプログラム Javascript!
-
ドットインストール
でも Javascript というのは、とっても奥が深いです。そして実際に簡単ではありません。また、ブラウザによって挙動が違ったりする部分もあるので、なかなか大変です …。そこで Javascript を使うときに、ぜひ利用したいのが、jQuery というライブラリです！
9. jQuery を勉強しよう！
jQuery というのは、簡単に言ってしまうと Javascript をもっと手軽に利用できるようにしたものです。難しい Javascript のコードは書けなくても、jQuery というものを使えば CSS に似た感じの記述の仕方でコードを書くことができます。さっきのサンプルも、実際には jQuery を使ってコードを書いています。
詳しいことは過去記事に書いたことがあるので、そちらを読んでいただければうれしいです。
また、jQuery を利用したプラグインというものもインターネット上にはたくさん公開されているので、それらを利用するためにも、jQuery について学習しておくのもいいですね！
-
Webデザインレシピ
STEP4 – Javascript を手軽に利用できる jQuery
-
ドットインストール
MEMO
Javascript（jQuery 含む）の学習も、HTML や CSS と同じ環境で学習できます。特に新たなツールが必要な訳ではありません。
10. Javascript でできること – 例）Web API
さきほど Javascript は、HTML と CSS を操作することができると書きました。でも Javascript は他にももっといろんなことができるプログラム言語なんです。たとえば色んな企業が提供している Web API という仕組みを使えば、提供されたコンテンツを自分の Webサイトに表示する … といったことも Javascript を利用して作ることができます。
有名な Web API といえば、Google MAPS がありますよね！Google が提供する地図サービスを、自分の Webサイトに取り入れる … といったことができます。他にも Twitter（ツイートなどを表示させたり …） や Facebook（いいね！ボタンやその他） も Web API を公開していますし、Amazon（書籍データを表示させたり …） にもあったりします。
ちょっと難しい … と思うかもしれませんが、例えばこのブログのフッター部分には、ツイッターのツイートを表示しています。これも API という仕組みです。
Web API を利用した例
Javascript はいろんな可能性を秘めてるんだなーってことを紹介したくてちょっと書いてみただけなので、はじめのうちは Web API っていうものもあるんだー … っていう程度で問題なしです！
参考までに
-
ドットインストール
11. クライアントサイドとサーバーサイド
ここで一度、今まで紹介したものを少し整理してみましょう。
- HTML … Webサイトの骨組み、基礎部分。文章を書くのが主。
- CSS … HTML 文書にデザインを施すのが目的。
- Javascript … HTML や CSS を操作して、Webページに「動き」をつけたりできます。
- jQuery … Javascript を手軽に利用できるようにするライブラリ。
11.1. クライアントサイド
これらに共通する点は、全てブラウザで動作するもの … ということ。ブラウザのことをクライアントサイドって言ったりします。クライアントっていうのはお客さんっていう意味をもつ言葉ですねー。クライアントサイド … というのはお客さん側 … つまり Webサイトを閲覧してくれているユーザーさん側という意味になります。簡単に言っていしまえば、ユーザーさんのブラウザってことになります。
11.2. サーバーサイド
それに対して、サーバーサイドという言葉もあります。サーバーサイドというのは、実際に Webサイトの html ファイルや、css ファイルを置いてある Webサーバー側のこと。
サーバーサイド側でいろいろなことができれば、Webサイトをもっと素敵にすることができるようになりそうです。
11.3. サーバーサイドでは何ができるの？
サーバーサイドではいろいろなことができるのですが、主なものに Webサイトの HTML のソースコードを、ユーザーからのリクエストに応じて書き換えたりする … ということがあります。
では、ユーザーからのリクエストっていうのはなんでしょう？例えば検索フォームやお問い合わせフォームなど、ユーザーが何らかの入力をして送信するページってありますよね？このブログ – Webデザインレシピも、ページ上部に検索フォームがついています。このユーザーが何かを入力して送信するのがリクエストです。
サーバーにリクエスト送信
そしてそのリクエストを受け取ったサーバーサイドでは、リクエストの内容によっていろんな処理をします。例えば検索結果に該当するページがあれば、そのページを表示するための HTML をプログラムが書き出して、最後には Webページとして出力します。
リクエストを受けたサーバーサイドの動き
今回は検索フォームの例でしたけど、お問い合わせフォームや、通販サイトで買い物をするときなど、いろんなところでサーバーサイトプログラムが動いています。
「それじゃあ、フォームを付けるとサーバーサイドプログラムが必要なんだー」 … という訳ではありません。フォームで送信していなくても、リクエストを送ることができるんです。どんな方法でリクエストを送っているか … というと、URL にパラメータと値というものをくっつけて、リクエストを送信することができるんです！
具体的に見てみましょう！例えば http://webdesignrecipes.com/?p=10 という URL があったとします。この URL の構造は、実は以下のようになっています。
パラメータ付きの URL の構造
ここでは p（page の略だとします。）というパラメータが使われていて、値には「10」が入っています。これがリクエストになっていて、10ページ目を表示してください！的な意味になっています。
これを受け取ったサーバーサイドプログラムが、10ページ目のコンテンツを表示するために、HTML を書き出して、最終的に Webページとして表示する … という流れになります。
Attention
実際には http://example.com/?p=0 のような形式ではなく、http://webdesignrecipes.com/sample/ のように、一見するとパラメータ付きに見えないように、URL を変更することもできます。
11.4. データベースと組み合わせる！
さっきの例では、リクエストに応じて、サーバーサイドプログラムがリクエストにあったコンテンツを、HTML で書き出して Webページとして表示する流れになっていました。でも、そのコンテンツは一体どこにあるんでしょう？
それをしまっておくのがデータベース（図中にはすでに登場していましたが …）というもの。データベースという言葉は聞いたことがある人も多いと思います。データベースにコンテンツなどのデータをしまっておいて、リクエストがあったらプログラムがデータを取り出して利用する … という使われ方をします。
12. サーバーサイド – PHPとMySQL に挑戦！
サーバーサイドプログラムとデータベースを組み合わせると、前述したようにユーザーのリクエストに応じて、いろんなページを表示させることが可能になります。そこで次に挑戦したいのが PHP というプログラム言語。そして MySQL というデータベースについての学習です。
サーバーサイドプログラムやデータベースには、いくつかの種類があるのですが、PHP + MySQL という組み合わせは、CMS（コンテンツマネージメントシステム – 後述しますね！）というものでもよく使われている組み合わせです。
12.1. PHP
PHP は、Hypertext Preprocessor の略？ … Hypertext … これはどこかで見たことありますねー。そう、HTML (Hyper Text Markup Language)です。PHP は、もともと HTML を動的に作成することを主な目的として作られたプログラム言語。なのでさっき紹介したように、ユーザーからのリクエストに応じて、HTML を書き出す … ということに適した言語なんですねー。でも最初のうちは、この「動的に … 」という意味が分かりませんでした。
普通 Webサイトを作成するのには、前半で紹介したように HTMLでマークアップしますよね。そして .html という拡張子でサーバーにアップロードすれば、立派な Webページとして表示されます。でもこのWebページは、あなたが新たに HTMLファイルを編集したりしてサーバーにアップロードしない限り、ずっと変更されません。
それに対してブログなどは、管理ページでコンテンツを書いて更新すると、それが Webページに反映されますよね。あなた自身が HTML ファイルを書き直したりしていないのに、表示される HTML は最新の情報に書き換えられているはずです。これはプログラムによって HTML が作成されているからなんです。そしてこのようなページを「動的に作成されたページ」と言います。
ちょっとこのブログ（PHP + MySQL を使っています！）を例にしてみると …
いろんなものがデータベースから取得されて表示されてます
Attention
PHP は必ずデータベースと組み合わせなくてはならない … という訳ではありません。データベースを使わずに、PHP を使って作られた Webサイトだってだくさんあります！
STEP5 – サーバーサイドの PHP に挑戦！
-
ドットインストール
MEMO
PHP は動的に HTML を書き出すのに使われるプログラム言語ですから、HTML（+CSS）を学習した後で挑戦した方がいいですね！
12.2. MySQL
先ほど紹介したうように、Webページを表示するためにはコンテンツなどのデータを保存しておく必要があります。その置き場所として、PHP とペアのように使われているのが MySQL（データベース）です。PHP を使って MySQL を操作するためには、SQL文というものを記述しなくてはなりません。
PHP と MySQL を使えば、掲示板（ユーザーが投稿して、それを表示させる）みたいなものが作れるようになります。掲示板だけでなく、ブログのようなシステムを自分で作ることだって可能です！
データベース可視化したもの
データベースはデータの入れ物 … だけだと、かなり漠然としていますよね。上記はデータベースのデータを管理するためのツールで、データを可視化したものです。Office の Excel のような表に、データが整理されて格納されているのが分かります。こうやって見ると、なんとなくデータベースのイメージが湧くかと思います。
STEP6 – データベースを学習しよう！
Attention
サーバーサイドの例として、PHP + MySQL を紹介していますが、他にもたくさんのプログラム言語があります。過去記事にも書いたことがあるので、参考にしてもらえるとうれしいです！
-
Webデザインレシピ
13. サーバーサイド用のツール
クライアントサイドでは、基本的にブラウザで動作するものばかりだったので、学習するのにもブラウザとテキストエディタがあれば OK でした。でもサーバーサイドのプログラムを学習するには、サーバー環境が必要になります。
サーバー … と聞くと、レンタルサーバーのように、インターネット上にあり、レンタル（お金がかかる）じゃないとダメ … というイメージがありますが、実は自分のパソコンの中にサーバーを構築ことができるんです！
「サーバーを構築する」と聞くと難しそうですが、以下のツールを使えば、簡単に自分のパソコンの中にサーバーを構築することができるので、PHP や MySQL を勉強するならぜひインストールしてみてくださいね！
- XAMPP
- PHP や Perl（Perl もサーバーサイドスクリプトです）、MySQL などの環境を、簡単に構築できるパッケージです。Windows はもちろん、Mac でも利用できます。
- MAMP
- Mac 専用です。PHP + MySQL 環境を簡単に構築できます。
MAMP のインストールは、解説いらずっていうくらいとっても簡単なので省略します。XAMPP のインストールについては、下記のページが参考になると思います！
14. 効率化を考えよう！
HTML や CSS に始まって、Javascript や jQuery、PHP や MySQL など、たくさんの言語を見てきました。Webサイトを 0 から作ろうとすると、いろんな言語で色んなコードを書かなくてはなりません。でも Webサイト を作る度に、毎回 0 からコードを書いていては、ちっとも効率的ではありません …。そこで効率化できるところは、どんどん効率化していきたいですよね！
そこで登場するのがフレームワークというもの。例えば HTML を書くときには、毎回決まった記述をする部分があったりします。また、CSS を書くときも、毎回同じようにリセットCSS を手入力しませんよね？絶対コピーしたものを使うはずです。
そんな風に、自分なりに効率よく Web制作ができるようなテンプレートみたいなものを作ります。そうすれば、次からはそれを使えば 0 から作らなくって済みますよね！
そういった仕組みというか、下準備したものをフレームワークと呼んだりします。ちょっと難しい言葉ですが、少し詳しく過去記事に書いたことがあるので、読んでみてくださいね！
そしてそういったフレームワークは、自分で作るだけじゃなくて、すでに公開されているものを利用する … ということもあったりします。例えば Twitter Bootstrap（Twitter 社が提供しています）というフレームワークを使えば、ある程度 Webデザインのテンプレートができているので、効率よく Webサイトを作成することができます。
例えば … ボタンなど
分かりやすい例でみてみましょう。例えば上記のようなボタンも、Twitter Bootstrap でははじめから用意されています。自分でコードを「0」から書かなくても、用意されているものを利用すれば効率的ですねー。
-
Twitter Bootstrap
-
ドットインストール
もちろんこのようなフレームワークを使う前に、しっかりと HTML や CSS の基礎は勉強しておきたいです。
14.1. CakePHP もちょっとだけご紹介
PHP + MySQL を勉強すれば、ブログのようなシステムを自分で作ることができます。でも PHP + MySQL のコードを書いて、「0」からそういったものを作るのは結構大変だったりします …。そこでご紹介したいのが CakePHP というもの。
CakePHP は Webアプリ向けの PHP のフレームワーク。先ほど紹介した Twitter Boostrap は、クライアントサイドで動く部分のフレームワーク（HTML + CSS + Javascript など）です。サーバーサイドスクリプトにだって、こういった効率化に繋がるフレームワークがたくさんあります。
でもいきなり使い出すんじゃなくて、各プログラム言語などの基礎や概念などを学んで、ある程度自分でコードを書いて何かを作れるようになってから利用すると、より理解が深まると思います！
-
CakePHP
-
ドットインストール
14.2. CMS（コンテンツマネージメントシステム）を使う
HTML + CSS で作った Webサイトは、基本的に静的な Webサイトです。ですから HTML ファイルをテキストエディタで編集して書き換えない限り、Webページの内容は変更できませんよね …。そこで PHP + MySQL などを使って、ブログツールのようなシステムを構築すれば、Webサイトの更新作業も簡単になったりします。
もちろん PHP + MySQL を使って、そのようなシステムを自分で構築して利用するのも楽しいです！私も携帯サイト（スマフォじゃなくて、携帯）を作るときは、自分で作ったシステムで作成しています。
このような Webサイト の構築、管理、運営するためのツールを CMS（コンテンツマネージメントシステム）って呼んでいます。そしていろんな CMS が開発されていて、無料で利用できるものもたくさんありますが、クライアントワーク（仕事としての Web制作）では有料のものを使うことも珍しくありません。
管理画面から編集や更新ができる！
CMS を利用すれば、このような管理画面から、Webサイトを管理/更新/運営 することができます（画面は WordPress）。
最近では無料で利用できるブログツール – WordPress を CMS として使う … という流れもあったりします。私もよく WordPress を使って Webサイトを作っています。無料で利用できる CMS には、以下のようなものがあります。
- WordPress
- ブログ型更新コンテンツ向き
- OpenPNE
- SNSサイト向き
- XOOPS Cube
- コミュニティサイト向き
- EC-CUBE
- ECサイト（通販）向き
など …。上記にあげたものは、前述した PHP + MySQL で構築されています。このようなツールを使って、Webサイトの管理/更新/運営を、効率的にできるようになりたいですね！
15. その他トレンド … というか、時代的なもの
Webの技術は日々進化しています。コーディングの技術や、プログラミングの技術だったり、コンピューターなどのハード側の進化だってあります。Javascript のところで紹介した jQuery や、PHP のところで紹介した CakePHP など、プログラミングをしやすくしてくれるフレームワークも進化したり、ときには新しいものが登場したりします。
例えば今なら、iPhone などのスマートフォンや、iPad などのタブレットでも Webサイトが快適にみれるように、スマートフォン対応の技術なども勉強しておきたいです。
16. まとめ
今回は Webサイトを作成するために必要な知識、プログラム言語などの、勉強フローなどを見てきましたが、最後に整理してみましょう。
- 文書を Webサイト用にマークアップした、Webサイトの基礎部分 / 本体となるもの。
- HTML で作られた文書にデザインを施すためのもの。スタイルシート。
- 主に HTML や CSS を操作する、ブラウザで動作するプログラム言語。HTML + CSS の知識が必要になります。
- Javascript のプログラミングを、簡単なコーディングで行えるようにするライブラリ。
- サーバーサイドプログラムのひとつ。動的に HTML を書き出すので、HTML の知識は必須です。
- PHP を使うなら、合わせて覚えておきたいデータベース。
HTML + CSS が基本となって、クライアントサイドのプログラム言語、サーバーサイドのプログラム言語に、徐々にステップアップしていく感じですね！でも必ずしも、これらのプログラム言語などを学習しなくちゃいけない … という訳でもありません。
例えば、この記事の中で紹介した jQuery も、ひょっとしたら数年後には他のライブラリにとって変わるかもしれません。サーバーサイドで動作するプログラム言語だって、PHP だけではありません。それに CMS だって、PHP + MySQL 以外で構築されているものだってあります。
それに Web制作をするなら、ある程度ビジュアル的なデザイン（レイアウトや配色、タイポグラフィーなど）についても勉強すると、もっと Web制作が楽しくなると思います。また、ユーザビリティーというものについても、研究してみると勉強になると思います。
こうやって見てみると、勉強しなくちゃならないことってたくさんありますね！もちろん一度に覚えきれる訳も無いので、焦らずゆっくり学習していけばいいと思います。先日少しだけメールでやり取りさせてもらった人が、こんなことを言ってました。
焦らずに、今出来る事から確実に身につけていきます！
インターネット上にはたくさんの情報があるし、新しい技術もどんどん生まれて、正直ついていくのがやっとです …。でも「作りたいもの」と、「作りたい！」っていう気持ちがあれば、あとは焦らないで自分のペースで楽しみながら、Web制作していくのが一番だと思います。
本とかを読むだけじゃなくて、実際に作りたいものを自分の手で作って作ってたくさん作らないと、技術って身に付かないと思います。逆を言えば、作りたいものが無いなら、そんな技術は必要ないですしね！
最後はちょっとわけわかめでしたけど、「これからWebサイトを制作をしたいけど、何から勉強したらいいの？」っていう質問をよく受けるので、ブログにしてみました。あんまり上手にまとめられなかったです … X(
PS.
ミユキさん、Heart さん … 楽しみながら、お互い Web制作がんばりましょーね ;D