1: Web 標準カリキュラムの紹介

By Masataka Yakura

• 次の記事: インターネットと Web の歴史、そして Web 標準の進化
• カリキュラムの目次へ

はじめに

私には、ある夢がありました。

過去8、 9年にわたり、私は教育に関する仕事に力を注いでいました。あるときは技術書を執筆し、人がその技術で何かかっこいいものを作る手助けをしました。勤務先に新しく入ってきた人の訓練を行うこともありました。また、利用者の助けになるよう、Opera のソフトウェアについてチュートリアルの執筆・編集も行いました。

私は Web についても熱意をもっています。その中でも、オープン Web 標準というものをとても信じています。そして、Web をより良いものとするために私に何ができるのだろうと考えたとき、はじめに言った教育というトピックに立ち返るのです。

「教育」といっても、いろいろあるでしょう。他人を尊敬し、お互いが協力しあう方法を教えることかもしれません。あるいは、デバイスやプラットフォームを越えて機能し、また障害を持つ人に対してアクセシブルな Web サイトを作る方法を教えることかもしれません。このうち、Web 標準について当てはまるのは後者です。というわけで私は、今日そして将来の Web のために、Web標準を採用するサイトを増やす手助けに注力しようと決意しました。

決意してからしばらくの間は、思いが私の頭の中だけに留まっていましたが、Opera で働く機会を得ることで実現することができました。仕事として価値を見いだしてくれた Opera に、とても感謝しています！ついに、夢のひとつがかなったのです。

というわけで、この記事では過去数か月にわたる努力の結晶である Web 標準カリキュラムについて紹介したいと思います。このカリキュラムは、私を含めたくさんの方が執筆した、Web デザイン・Web 開発の土台となる知識を提供するコース資料です。カリキュラムはほぼすべての方を対象としています。お金は必要ありませんし、資料はアクセシブルです。また、事前知識も必要としません。

私はこのカリキュラムを大学で利用してほしいと考えています。なぜなら、Web標準に関する教育資料や指標は、多くの大学で不足しているからです。私は多くの学生から、彼らが Web 標準で作成した課題が減点されるという話を聞きました。これはなぜかというと、とても古い知識を基に採点が行われているからです。一方で、Web 関連の職種で募集をかける雇用者からは、面接を受けに来た学生が Web 開発の実情をまったく知らないといった嘆きも聞いています。

もしあなたが、望ましい方法でWeb標準を教える先進的な大学に居たら、ぜひ連絡してください。

さて、この記事は次のような構成になっています。

• なぜ、Web 標準なのか？ — Web 標準を利用することの利点はもちろんのこと、一部で受け入れられていない現状とその理由、そして、このコースがどのように対処しようとしているのかを簡単に述べようと思います。
• コースの構成 — 名前のとおり、コースがどのように構成されているのか、また教育担当者がどのように資料を利用すると効果的かを説明します。
• このコースを利用すべき人は誰？ — 「誰もが (anyone)」と書くことがあるのですが、それが具体的にどういった意味なのかを説明します。
• カリキュラムの目次 — 「おしゃべりはもう勘弁。早く学びたい。」という方はこちらをクリックしましょう。目次にスキップできます。
• 謝辞
• 連絡先

なぜ、Web 標準なのか？

Web 標準を Web デザイン / Web 開発に取り入れることは、どう素晴らしいのでしょうか。4番の記事に詳しく書かれていますが、ここでも簡単に説明しておくことにしましょう。

Web 標準を利用することで、次のような恩典が与えられます。

1. コーディングの効率化: このコースを進めていくと、Web標準に関するベストプラクティスの多くが、コードの再利用に関係していることに気づくと思います。ページの内容 (HTML) 、スタイル情報 (CSS) 、挙動に関する情報 (JavaScript) をそれぞれ分けることで、ファイルサイズを抑えることができ、また情報の再利用が同じコードを書くことなく実現できます。
2. 管理の容易さ: 効率に関連するのですが、HTML をまず書き、あとで必要な部分にだけスタイルと挙動を class や関数を利用し与えるというやり方は、サイトの管理を容易にします。もしあとでスタイルや挙動を変更する必要が生じても、該当する一部分を編集するだけでWebサイト全体に反映されるからです。すべての HTML 文書をいちいち変更する必要はありません。
3. アクセシビリティ: Web における重要課題のひとつに、置かれている環境を問わず、すべての人に対し Web サイトをアクセシブルにするというものがあります。たとえば、視覚障害や運動障害 (手を自由に動かせないなど、運動機能に制限のある状態) を持つ方が、不自由なく Web サイトを利用できるようにすることが挙げられます。大変そうに感じるかもしれませんが、Web 標準とベストプラクティスに従うことで、余計な労力を割くことなく、多くの方に対してアクセシブルな Web サイトにすることが可能です。
4. デバイスの互換性: これは、Windows、Mac、Linux といったプラットフォームだけではなく、携帯電話やテレビ、ゲーム機など、別のブラウジングデバイスにおいてもWebサイトを機能させることを意図しています。これらのデバイスには、画面の大きさやプロセッサーの性能、操作手法に制限がありますが、これもアクセシビリティと同様に、Web 標準とベストプラクティスを利用することで多くのデバイスで機能する Web サイトにできるのです。いまや、携帯電話は PC よりも急速に普及しており、またそれらの多くがインターネットに接続できます。それなのに、このマーケットを見過ごすことを、あなたやあなたのクライアントが許すでしょうか？(モバイル Web 開発については、dev.opera.comに掲載されているモバイル関連の記事もご覧ください。)
5. Web クローラー/検索エンジン: いわゆる検索エンジン最適化 (SEO)と呼ばれるものです。ちょっと詳しく説明すると、Web を巡回しサイトをインデックスに登録する Web クローラーというものに対して、Web サイトを可能な限り可視化することで、Google や他の検索ランキングで上位になる方法を表します。SEO にはいろいろな術があるのですが (詳しくは Intelligent site structure for better SEO! や Semantic HTML and Search Engine Optimization などの SEO 関連記事をご覧ください)、これについても Web 標準を利用することで、Google や Yahoo! に対し Web サイトをより可視化することができ、ビジネスに良い影響をもたらすのです。

Web 標準にはこのような利点があります。しかし一方で、Web にあるサイトのほとんどが未だWeb標準に従ったものではありません。さらに、Web 開発者の多くもまた、時代遅れでかつ良くない手法を利用し続けているのです。

「どうして？」と思った方がいるかもしれません。でも、これにはいくつかの理由があるのです。不十分な教育、会社のポリシー、学ばなくても稼げることによる学習意欲の低下、Web 標準の難しさ、Web ブラウザーの Web 標準対応状況といったことを理由に、言い訳をする人がいるのです。

では、一つずつ詳しくその理由を考え、さらに反論してみましょう。Web 標準を学ばない/取り入れないことに言い訳ができないようにするのです。

1. 不十分な教育: これがこのコースの存在理由でもありますね。多くの大学が、Web 関連のコースで Web 標準を教えることはありませんし、また多くのカリキュラムが、時代遅れな手法を今でも解説しています。変えようとしても、お役所的な手続きがありますからとても難しいのです。書籍やトレーニングなどもありますが、高くつきます。しかし、ちょっと待ってください。そのための Web 標準カリキュラムです。このコースは無料ですし、Web 標準の教育について大学などにプッシュも行っています。言い訳はできませんよ。
2. 会社のポリシー: いくつかの企業や研究所のWebサイトが時代遅れなことについて、疑いの余地はありません。そういったところでは、職員に時代遅れのブラウザーの仕様を義務付けるポリシーがあるかもしれません。しかし、状況は改善されています。どのように Web サイトを作り変えていけばいいのかを説明するコースも無料で存在していますし、今こそ悪い習慣を改めるべきなのです。Web サイトを Web 標準というモダンなつくりにすることにより、古いブラウザーでは見栄えが悪くなることがあります。そうなると、内部で利用するブラウザーもアップグレードしようという動きがでてくるでしょう (もちろん、古いブラウザーでも新しい Web サイトは最低限機能しなければなりませんが)。また、企業は顧客に対してもブラウザーのアップグレードを進めるべきです。Web 標準なサイトにすることにより、検索結果のランク向上やアクセシビリティの確保、多様なデバイスに対応できるなど、ビジネスメリットもあります。それを無視するつもりでしょうか？
3. 「勉強する必要なんてないから」: 「時代遅れなやり方でも給料はもらえているし、なんで新しいやり方に悩まされる必要があるんだい？」なんて言う人がいることを私は知っています。でも、先ほど説明したとおり、Web 標準によるやり方は効率がよく、また書くことも管理することも容易なのです。また、モダンなコードはアクセシブルですし、デバイスを限定することもありません。なんだか、わくわくしてきませんか？さらに、新しいことを学べば、自分のスキルセットをこれからのキャリアにも生かせるでしょうし、もっとお金を稼げるようになるかもしれません。それに今日の企業は、Web 標準のスキルがある人を要求しているんですよ。
4. 「難しいんだよ」: まったくもう。ちょっとでいいので、コースを進めてみてください。Web 標準の基礎を習得することが難しくないことを理解できると思いますから。これは特定の人に限ったことではありません。Web デザイン / Web 開発の初心者であっても、またはスキルを磨くため新しく Web 標準を学ぼうとしている Web 開発者であっても、同じように感じるはずです。Web 標準は時代遅れなやり方と同じくらいの難易度ですし、そこまで難しいわけではありません。しかし、そのような古いやり方に比べて、多くの利点があるんです。
5. ブラウザーの Web 標準サポート: ブラウザーの Web 標準に関するサポートは、昔は本当にバラバラでした。ですから、Web サイトのクロスブラウザー対応は悪夢のようなものでした。しかし最近はそうでもありません。新しいブラウザーは充分に Web 標準をサポートしています。対応度合いの低い古いブラウザーに対してはまだ配慮が必要ですが、現在のベストプラクティスを使えば、古いブラウザーの利用者に対しても理にかなったユーザー体験を提供できるのです。

いかがでしょう。ご覧のとおり、Web 標準を取り入れないことへの言い訳はもう通じません。もしあなたが初心者であれば古いやり方を忘れる必要もないので、ペストプラクティスを最初から学べます。

コースの構成

このコースは、数多くの記事から構成されています。基本コースで50本以上の記事があり、各記事は数千ワードほどの長さになります。個々の記事は特定の内容について取り上げており、必要に応じて、その背景や重要な理論、実践的な例やチュートリアル、例題などが提供されます。

コースを教えるもっとも論理的な方法は、あなたの受け持つ講義の回数にあわせて、記事を割り振ることです。講義でカバーする内容は、事前に生徒に関連する記事を読ませ予習させます。そして講義では、記事中の実践的な例をひとつずつ見ていきます。講義の後は、復習として生徒に例題を解かせます。

事前に記事を読ませてさえいれば、ひとつの講義にかける時間は1時間程度で充分カバーできると考えています。ですから、コース全体にかかる講義の時間は50時間ほど、そして予習にかける時間も50時間ほどになるでしょう。

もちろん、講義にかけられる時間や何をカバーするのかなど、考えなければいけないこともあります。しかし、実践することが重要です。

このコースを利用すべき人は誰？

このカリキュラムは、数多くの記事から構成されるWeb標準に関するコース資料で、Web 標準なデザイン手法を一から学びたいという人を対象としています。

Web サイトをただ閲覧するくらいの人でも、資料を読めば CSS や HTML の知識を充分に持ち、加えて基本的な JavaScript を理解できることを目的に、このコースは作られています。それだけの知識があれば、就職や転職に自信をもって挑むことができるでしょうから (もっとも、経験について教えることはできませんが)。

で、具体的にどんな人なのでしょう？私はこのカリキュラムが、Web デザインの「よいやり方」を学びたいという人に役立ってほしいと思っています。たとえば、次のような人たちです。

1. 大学やカレッジの生徒/教員: すでに書きましたが、このカリキュラムは独自のコース資料をつくるにも、コースの資料として一部を利用するにも理想的なものになっています。もしあなたが Web 関連のコースを受講している学生であれば、このカリキュラムを補足資料として使うべきです。そして、先生にもこの資料を使うよう働きかけてください！あなたが先生や講師である場合、講義で利用するテクニックがベストプラクティスであるかどうかを確かめる資料として、このカリキュラムを利用することをおすすめします。
2. 高校生やもっと若い学生: このコースは大人の人を主な対象として書いていますが、それは別に、若い学生さんに恩恵がないというわけではありません。カリキュラムに目を通して、どのように進められるかを確かめてみてください。
3. Web デザイナーや開発者: Web 標準やベストプラクティスを利用していない人、手ごろなリファレンスを利用して知識を磨く人など、世の中にはさまざまなタイプの Web 開発者やデザイナーがいます。前者の方に対して私は、このカリキュラムをWeb標準が簡単で価値のあることを理解するチャンスとして授けたいと思います。後者の方には、このカリキュラムをさまざまなことに役立ててほしいと思っています。たとえば、人を助けたり、スキルを磨いたり、難しいことを思い出すためのリファレンスとして使うことができるでしょう。また、上司やクライアントに対して、アクセシビリティには価値があることを説得するための材料としても利用できるでしょう。
4. 企業内の教育担当者: このカリキュラムは無料ですから、安価なトレーニング資料としてとても理想的です。
5. そのほかの方: もしあなたがちょっと Web デザインや Web 開発に興味を持っているのであれば、知見を広げるための資料として使ってくれたらと思っています。なんたって、このカリキュラムは無料ですし。

このコースにお金を払うことを、私は期待していません。このコースはクリエイティブ・コモンズ・ライセンスのもとで提供されており、適切な表示 (Attribution) さえあれば、だれもが自由に利用することができるようになっています。

Web標準カリキュラム：目次

はじめに

1. Web 標準カリキュラムの紹介 (Chris Mills 著) — 今あなたが読んでいる記事です。

翻訳のお知らせ: Web 標準カリキュラムの翻訳も行われています。

訳注: カリキュラムの原典は英語版になります。これはその日本語訳です。

Web 標準の世界へのいざない

2. インターネットと Web の歴史、そして Web 標準の進化 (Mark Norman Francis 著)
3. インターネットのしくみ (Jonathan Lane 著)
4. Web 標準のモデル — HTML, CSS, JavaScript (Jonathan Lane 著)
5. Web 標準 ― すばらしき夢、でも現実は？ (Jonathan Lane 著)

訳注: 以降の記事については、現在翻訳を行っている最中です。

Web デザインの基本理念

このセクションでは、コードやマークアップの詳細は扱いません。ここでは、画像の作成やコーディングの前に行うWebデザインプロセスについて、また、IA やナビゲーション、ユーザビリティなどの概念について紹介します。

6. Information Architecture—planning out a web site, by Jonathan Lane.
7. What does a good web page need?, by Mark Norman Francis.
8. Colour Theory, by Linda Goin.
9. Building up a site wireframe, by Linda Goin.
10. Colour schemes and design mockups, by Linda Goin.
11. Typography on the web, by Paul Haine.

HTML の基礎

12. HTML の基礎 (Mark Norman Francis 著)
13. HTML の <head> 要素 (Christian Heilmann 著)
14. 適切な DOCTYPE の選択 (Roger Johansson 著)

HTML の中身

15. Marking up textual content in HTML, by Mark Norman Francis.
16. HTML Lists, by Ben Buchanan.
17. Images in HTML, by Christian Heilmann.
18. HTML links—let’s build a web! by Christian Heilmann.
19. HTML Tables, by Jen Hanen.
20. HTML Forms—the basics, by Jen Hanen.
21. Lesser–known semantic elements, by Mark Norman Francis.
22. Generic containers—the div and span elements, by Mark Norman Francis.
23. Creating multiple pages with navigation menus, by Christian Heilmann.
24. Validating your HTML, by Mark Norman Francis.

アクセシビリティ

25. Accessibility basics, by Tom Hughes-Croucher.
26. Accessibility testing, by Benjamin Hawkes-Lewis.

CSS

27. CSS basics, by Christian Heilmann.
28. Inheritance and Cascade, by Tommy Olsson.
29. Text styling with CSS, by Ben Henick.
30. The CSS layout model - boxes, borders, margins, padding, by Ben Henick.
31. CSS background images, by Nicole Sullivan.
32. Styling lists and links, by Ben Buchanan.
33. Styling tables, by Ben Buchanan.
34. Styling forms, by Ben Henick.
35. Floats and clearing, by Tommy Olsson.
36. CSS static and relative positioning, by Tommy Olsson.
37. CSS absolute and fixed positioning, by Tommy Olsson.

CSS の上級コース

38. Headers, footers, columns, and templates, by Ben Henick

JavaScript の基本

27. CSS basics, by Christian Heilmann.
28. Inheritance and Cascade, by Tommy Olsson.
29. Text styling with CSS, by Ben Henick.
30. The CSS layout model - boxes, borders, margins, padding, by Ben Henick.
31. CSS background images, by Nicole Sullivan.
32. Styling lists and links, by Ben Buchanan.
33. Styling tables, by Ben Buchanan.
34. Styling forms, by Ben Henick.
35. Floats and clearing, by Tommy Olsson.
36. CSS static and relative positioning, by Tommy Olsson.
37. CSS absolute and fixed positioning, by Tommy Olsson.

モバイル Web 開発

1. Mobile 1: Introduction to the mobile web, by Brian Suda

補足記事

マイクロフォーマット

• Introduction to hCard, by Christopher Schmitt
• Introduction to hCard, Part two: Styling hCards, by Christopher Schmitt
• XFN encoding, extraction, and visualizations, by Brian Suda
• Styling XFN and rel-license links, by Christopher Schmitt
• Styling hReview Microformats, by Christopher Schmitt
• Microformat Encoding and Visualization, by Brian Suda

アクセシビリティに関する補足記事

• Introduction to WAI-ARIA, by Gez Lemon
• Creating accessible data tables, by Frank Palinkas
• Building Accessible Static Navigation with CSS, by Frank Palinkas

そのほか

• Getting your content online, by Craig Grannell.
• More about the document <head>, by Chris Heilmann.
• Supplementary: Common HTML entities used for typography, by Ben Henick.
• The Opera Web Standards Curriculum glossary, by various authors. This is incomplete, and will be added to as time goes by.

謝辞

このコースの作成には、本当に多くの方の協力がありました。ここで紹介する方は、皆とても素晴らしい人達ですので、みなさん是非、彼らの講演を聞きに出かけたり、本を買ったり、ブログを読んだりなど、できる限りの応援をしていただけたらと思います。

彼らに、感謝と敬意をこめて。

1. 著者: 記事の著者である Ben BuchananTom Hughes–Croucher, Mark Norman “Norm” Francis, Linda Goin, Paul Haine, Jen Hanen, Benjamin Hawkes–Lewis, Ben Henick, Christian Heilmann, Roger Johansson, Peter–Paul Koch, Jonathan Lane, Stuart Langridge, Robert Nyman, Tommy Olsson, Greg Schechter, Nicole Sullivan, Mike West, 本当にありがとうございます。あなた達がいなければ、このコースは存在していなかったでしょう。
2. Opera: Jan Standal, David Storey, 私のチームのみんな、そしてこの考えに賛同し、企画を進めてくれた Opera の従業員、どうもありがとうございます。
3. 企業や組織: Yahoo (著者の方と、構成やプロモーションに多大な貢献をしてくれた Sophie Major), WaSP (特に Gareth Rushgrove, Stephanie Troeth と Aarron Walter), Britpack, Geekup のみなさん、そしてこのコースに興味をもち、また後押しをしてくれた大学など、多くの企業や組織の強力がありました。とても感謝しています。
4. 貢献者: Craig Saila, Sara Dodd, John Allsopp, Roan Lavery, Bruce Lawson, Alan White といった素晴らしい人々に感謝しています。忘れている人がいたら、ごめんなさい。
5. 読者のみなさん: よい Web サイトの作り方に興味を持ち、このコースを読んでくれた皆さんにも、もちろん感謝しています。

連絡先

より多くの人に対して有益なものとなるよう、私は常にこのコースを見直すようにしています。もしコースへの提案やコメント、どこかで使いたいという要望などあれば、ぜひ連絡してください。Eメールアドレスは cmills [at] opera [dot] com になります。また、全ての記事の下のほうには「この記事についてディスカッションする」というリンクがあり、そこからコメントを投稿することができます。なお、コメントには my.opera アカウントの取得が必要になります。

• 次の記事: インターネットと Web の歴史、そして Web 標準の進化
• カリキュラムの目次へ

著者について

Chris Mills は Opera の Developer Relations Manager です。dev.opera.com や labs.opera.com で記事を編集・公開する傍ら、コミュニティに Opera の紹介やフィードバックの収集を行い、また Opera のソフトウェアの伝道師としても活躍しています。そして、このWeb標準カリキュラムの編集者兼オーガナイザーでもあります。

プライベートでは、彼はとても熱心な音楽ファンです。メタルやフォーク、パンク、エレクトロニカ、プログレをはじめさまざまな音楽を聴き、また演奏しています。彼のバンド Conquest of Steel もよろしくお願いします。

翻訳者について

矢倉 眞隆 (Masataka Yakura)

1984年生まれ。株式会社ミツエーリンクスにて、社内の品質改善活動や Web 標準 の普及啓蒙を行っている。W3C HTML WG メンバー。

株式会社 ミツエーリンクス

1990年創業。大規模な Web サイト開発を得意とするインフォメーション・インテ グレータ。自社コンテンツの Web 標準 Blog やアクセシビリティ Blog より、Web フロントエンド技術に関するさまざまな情報を発信中。

This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.