[翻訳] これから HTML と CSS を学び始める君へ

Category : CSS, HTML

この記事は、Stack Overflow に投稿された、user553944 による質問 Would you recommend starting from HTML5 & CSS3 for beginners? と、Boldewyn による 最も評価されていた回答 を翻訳したものです。

翻訳は完全ではありませんし、だいぶ意訳している部分がありますので、ぜひ原文もご参照ください。

また、Stack Overflow の質問・投稿は Creative Commons Attribution-ShareAlike 3.0 Unported ですので、この記事も同様のライセンスで公開しています。

user553944 による質問

私はウェブデザイン・開発の世界に入りたいと考えているミドルスクールの学生です。

私は小さいころからウェブ(を使うこと)に興味を持っていましたが、今は “作る” 側になりたいと思っています。 ウェブデザインと開発について調べてみて、スクリプト言語よりも先にマークアップ言語から学び始めたほうがいいと思いました。
そこで、新しい HTML5/CSS3 から始めるべきか、それともまずは現行バージョンの HTML/CSS を着実にやるべきか、迷っています。
HTML5/CSS3 は、初心者は避けほうがいいですか? どれから始めるかは特に問題ではありませんか?

また、お勧めの HTML(5)/CSS(3) に関する良書、またはウェブサイトを教えていただけたら嬉しいです。

前もってお礼を申し上げます :)

Boldewyn による回答

まずは簡単なものから始めよう

ほとんどの場合(初めて学ぶ場合は特に)、HTML4 は HTML5 の一部であり、また CSS2 と CSS3 も同様です。 ですので、初めは "古い" 技術から学ぶことをお勧めします。なぜなら、HTML5 と CSS3 の仕様は古いバージョンより多岐に渡っているからです。
(参考:"HTML" is the new "HTML5")

HTML5 のチュートリアルには別の問題があります。
HTML5 は穏やかな春の朝の雛菊のように突然現れました。それ自体はいいことです。
しかし、初心者(またはその可能性が高い人)向けなのか、HTML5 はどう違うかと学びたがっている (X)HTML の経験者向けなのか、そういったドキュメントの違いをあなたのようなルーキーが判断するのは難しいと思います。
HTML5 への入門は、HTML4 のチュートリアルよりも混乱する可能性が高いです。
(HTML3 と HTML4 の場合では、テーブルレイアウト・font タグ・既に議論されたようなものといった実例を除けば、 2つの間に大きな違いはありませんでした)

私の場合

学習方法は人それぞれですので、私がウェブ開発で歩んできた過程をまとめておきます。

  • 私は物理学部に入るまで、ウェブ開発にこれといった興味はありませんでしたが、しばらくして「自分のブラウザ用にカスタマイズされたスタートページがあると便利だな」と思いました。
    それは2004年のことで、iGoogle はまだありませんでした。
    そう、そこなのです! まずは小さなプロジェクトを作り、そこから始めるのです。
  • 幸運なことに、ドイツ語圏には SelfHTML という HTML を始めるための素晴らしいリソースがあったのです。 ただ、残念ながら SelfHTML はサイトが復活してからほとんど更新がないので、英語対応のクオリティは分かりません。
    ですが、どうか前述の W3Schools を使わないでください。
    そのサイトではなく、また仕様書とは別の HTML の優れたチュートリアルをまとめておきます(以下を参照のこと)。
    (訳註:W3Schools リンク先は W3Fools です。「前述の」は他の回答のことです)
  • 自分のブラウザ用のスタートページが完成したあと、私は自分が所属する RPG グループのホームページを作りました。それは複数の HTML ページからできていました。
    そのときに私は1つのスタイルシートで複数の HTML ページに適用できる CSS というものを知りました。
    これは、それまで溜めてきた多くのファイル構造について私が考え始めた最初の地点でした(「どのフォルダにどのファイルがあるか」という観点から)。
  • またそれとは別に、その他の技術をたくさん学ばなければならないことに気づくと思います。
    • 私は、自分たちのグループ用のプライベートエリアがほしかったので、HTTP 認証について学びました。
    • サブディレクトリにファイルを置くことで、URL と相対/絶対パスの重要性を早く学べます。
    • 私は FAQ コンテンツのために、質問をクリックすることで非表示になっている回答を表示させるというものを使いたいと思いました。
      これは私にとって JavaScript のスタート地点でした。"本物の" で基本的な JavaScript と、ググってコピペしただけはない jQuery スニペット(当時それは Prototype でしたけども)を学んだことで、現在、私はとても恩恵を受けています。
  • 次のステップは、静的な HTML からサーバー上で生成されるものに移行することです。
    私は PHP と MySQL の非常に良い初心者コースを取り(私見ですが、サーバーサイドの技術を始めるのにもっともシンプルな方法だと思います)、大学内で PHP の使えるちょっとしたウェブスペースを得ることができました。
    "Hello World" は、当時の RPG サイトにとって、いいゲストブックでした。
    (まあ現在では、あなたは Disqus にリンクを投げるだけで済む話です)
  • 今や私はチュートリアルとリファレンスの最先端にまでやってきました。そして、最初は本当に覗き見だけだった仕様書を読み始めました。 それは PHP のマニュアルから始まり、HTML4 の仕様書、W3C の CSS2 の仕様における CSS プロパティの定義、その他色々と読み進めていきました。
    後知恵ですが、強調したいもう1つのポイントがあります。
    できるだけ早く仕様書を読むようにしてください。まだ理解できない部分があるでしょうが、仕様書より良いソースはありません。
  • それから後は、少なくともちょっとした注意、しかし時には基本的な理解を必要とする、多くの新しい技術を常に学び続けることです。DOM, CGI, SVG, XML, XHTML と HTML の相違点, 正規表現, Python, mod_rewrite, nginx, XSLT, PDF, RSS, RDF, Bash, SSH, Git, SVN, XSS, Unicode, Web Fonts, Dublin Core, JSON, SQLite, … (リンク先は全て Wikipedia です)
    (訳註:一部を除いて日本語版 Wikipedia のリンクに変更してあります)
  • 最終的に、あなたは何らかを専門とする必要に迫られるでしょう。
    その範囲はざっと見ただけでも「私はデザイナーだ。手に負えないようなコードには二度と触らない」というものから「B2B JSON は JBoss と Hibernate 以来の最高のものだ。このために Photoshop を必要としないのは素晴らしい」というものまであります。
    私は未だにできるだけ多くの範囲で最新の情報を得るために、シンプルなアプローチを続けていますが、このやりかたは長くは続かないと予想できます。今から5年未満のうちに(今日でも)、あなたは以下のような職務記述書をみつけるでしょう。
    "canvas デベロッパー"、"マルチメディアマークアップストラテジスト"、"クロスプラットフォームユーザエクスペリエンスの専門家"、"レガシーな Flash コードとテーブルベースの HTML メールテンプレートのスペシャリスト"、"オフラインキャッシュセキュリティの達人"、"ウェブストレージデータベース技術者" などなど。
    しかし、あなたが主に興味を持っている分野で少なくとも基本的な理解を持っていることは、新しいアイディアとアプローチのために、あなたが柔軟な対応ができるようにしてくれるでしょう。
    そしてより重要なことは、古くて試されてきたアイディアと問題へのアプローチ方法だとあなたが考えいるものは、本当は新しいものだということです。

HTML と CSS の他にも学ぶことが山ほどあると言われたことで、がっかりしないでください。
それらの技術はクールなものを作るための、すぐ身近にあるチャンスとテクノロジーのワンダーランドだと私は思っています。

注意すること

問題なのは、間違ったリソースから学ぶことです。 よく分からないことがあったら、ここ Stack Overflow で尋ねてみることをお勧めします。
(chat.stackoverflow.com に招待するともっといいかもしれません)

これは個人的な警告ですが、WYSIWYG や Dreamweaver のようなエディタから手を離してください。IDE やコード補完機能のあるエディタを使うべきです(Eclipse など)。
私は違う道のりを歩みましたが(GoLive から Notepad++ を経て、最終的には Vim に行き着きました)、それは好みの問題です。
しかし、私が使うべきだと言っているソフトウェアが、あなたから何かを隠したり、はっきりと指定しなくても自動で何かを作ってくれるものだという考えを少しでも持っているのなら、その考えは捨て去ってください。

基本的な選び方は、ファイルのエンコード方法(ISO-8859-1, UTF-8, …)と UTF-8 ファイルに BOM を付加するかどうかを選択できることです。

お勧めのウェブサイト

もう一度言いますが、この後に挙げるリソースのどれかで混乱してしまったとしても気を落とさないでください。
次に挙げるリンク集はプロが普段からリファレンスとして使っているものなのですから。

基礎

W3.org
HTML と CSS の標準化組織です。
developer.mozilla.org
Firefox を作っている組織 Mozilla による開発者向けリソースです。
HTML/CSS とウェブ開発における最先端の素晴らしいチュートリアルがあります。
個人的な意見ですが、現在オンラインで見ることのできるベストな JavaScript リファレンスです。
msdn.microsoft.com
マイクロソフトの HTML/CSS ドキュメントです。
Safari Reference Library
Apple と Safari 中心ですが、色々と良い文書があります。
Opera Web Curriculum
Opera Web Curriculum は重要な技術がよくまとまっています。
Validator
Validator はコードのエラーをチェックしてくれます。
これは W3C が公開していて、ウェブ開発者のツールボックスの中で最も重要なものの1つです。

チュートリアル

HTML5 Boilerplate
HTML5 や jQuery などをベースとするウェブサイトとウェブアプリケーションを素早く構築できるようにすることを目指すプロジェクトです。
多くのベストプラクティスがバンドルされているので、ソースコードを読み通すだけの価値があります。
A List Apart
ウェブ開発者とその関係者へ向けて公開されている文書です。
便利で重要な方法と、HTML と CSS を仕事としている人へのプラクティスが数多く公開されています。
Dive Into HTML5
同じ名前の書籍に付随するウェブサイトです。
HTML5 を教えることを目標としているので、入門者がついていくのは難しいかもしれません。
しかし、内容は良く書かれていて、正確です。
CSS Zen Garden
"CSS ベースのデザインでどれほどの外観のものができるかというデモンストレーション" このサイトは、HTML4 と CSS2 の驚くべき例を見せてくれます。
24 Ways
ウェブ開発者のアドベントカレンダーで、有名人による素晴らしい記事が年に24個のパックとして公開されています。

概説など

quirksmode.org
ブラウザと互換性テストを主な内容とするサイトです。
あなたのページが Firefox, IE, Opera で全て違って見える場合は、ここを訪れるべきです。
History of the WWW
ウェブの初期(1995年まで)はどのように過ぎたかという W3C の概論で、良い読み物です。
zvon.org
"リファレンス" と "チュートリアル" のセクションで、ついていくのが大変ではありますが、かなり正確なものを見ることができるでしょう。
Jacob Nielsen’s Alertbox
Jacob Nielsen によるユーザビリティ研究の巨大なセットを提供しています。
Periodic Table of HTML Elements
HTML5 の全要素をとても上手く直感的に表示しています。
CSSPlay
Stu Nicholls による多くの最新 CSS トリックの実験場です。

仕様書

w3.org/TR
W3C の元にある全仕様リストです(大部分は XML, HTML, CSS に関連したもの)。
w3.org/TR/html4
全ての要素と属性が説明されている、HTML4 の公式仕様です。
関連:whatwg.org は、W3C に XHTML2 をやめさせて HTML5 に移行するように強制した裏切り者です。彼らの多くはブラウザベンダーです。
w3.org/TR/CSS2
CSS 2.1 の公式仕様です。
RFC 1738
URL がどのように構成されているかの定義です。
RFC 1945
インターネット上でページを提供する伝送プロトコルである HTTP 1.0 の定義です。
また、RFC 2616 はその後継である HTTP 1.1 の定義です。
ECMAScript Specification
ECMAScript は JavaScript の標準化されたバージョンの名前です。はっきり言って、私はほとんど読んだことがありません。たいていの場合は the reference on mozilla.org を使っています。
DOM についても同様です。公式仕様は W3C にありますが、暗黒時代の Netscape と IE はそれぞれ独自実装をしていました。
php.net
PHP の公式ドキュメントがあるページです。
Unicode Consortium
あなたが ASCII の世界から離れて多言語を扱うようになれば、必然的に UTF-8 と Unicode と付き合うことになるでしょう。
できるだけ早くそれらと仲良くなるといいでしょう。

その他

Smashing Magazine
ウェブデザインやフロントエンド開発についての興味深い記事を読むことができます。
jsFiddle
HTML, CSS, JavaScript を試して、すぐに結果を見ることができるサイトです。
テストしたり、ちょっとしたスニペットを共有するには最適です(例えば Stack Overflow での質問のときなど)。
XAMPP
Windows や Mac OSX で Apache(ウェブサーバー), MySQL, PHP 環境を簡単に構築できます。
Microformats.org
これは少し高度なものです。マイクロフォーマットはマシンと人間の両方に分かりやすいデータを一度に表示しようとするものです。
それがどういう方法で達成されようとしているかを見ることで HTML の要素と属性がどのように使われるべきかを多く学ぶことができます。
CSS Resetr
2007年以降、CSS リセットはとても流行っています。これらは、ブラウザが要素に適用するデフォルトのスタイル(たとえば h1 要素の大きくて太いテキストとマージン)のほとんどを取り去るスタイルシートです。
CSS Resetr では有名なリセット CSS を試すことができます。
CSS ルールがどの要素に影響を与えるかという素晴らしい見識を得られるかもしれませんので、リストアップしました。
FontSquirrel @font-face generator
CSS2.1 の @font-face プロパティで遊ぶには良い方法です。ソースを見てみるとインスピレーションが湧いてきます。
またこれとは別に、制作物に Google WebFonts Directory を使うのもいいでしょう。
When can I use…
CSS3 とその他最新のプロパティ、サポートしているブラウザのバージョンの表があります。
Firebug
Firefox で開発を行うなら、このアドオンなしではいけません。私を(そして多くの人たちを)信じてください。
The Elements of Typographic Style Applied To The Webd
"The Elements of Typographic Style" (Robert Bringhurst の著作。ぜひ読むことをお勧めします) の知識とヒントを CSS とウェブテクノロジーに適用することに関することが書かれているウェブサイトです。

Stack Overflow の質問と回答

書籍

実のところ、私は HTML と CSS を勉強するために本を買ったことはありません。
しかし、HTML4 と CSS2 は新しい HTML5/CSS3 よりも量の少ないものです。

書籍なら、オライリーから出版されているものを強くお勧めします。
私が持っている多くのオライリーの本(bash, Python, XSLT, …)は、全てが良く書かれていて、技術的に正確なものです。

他のユーザーによるお勧め書籍

最後に

私は常に新しいことを学び、向上し、既に学んだ技術の知識を深めています。
もしあなたが HTML と CSS を学び始め、真剣に取り組むなら、多くの問題に突き当たるでしょう。
何の手がかりもなく、それが何をしているのか、正しいかどうかと、コードを見ることでしょう。
しばらくしたら、セキュリティとその穴について経験するでしょう(それが大きなものではなく、クレジットカードの詳細に関わるようなものでないことを願っています ;-) )。

しかし、油断せず、すぐに「ソースを見る」メニューを使うことを習慣にし、質問するようにしましょう(ここ Stack Overflow や面白いブログ記事のコメント欄、Google 検索)。
そうすれば、その情報を経験している世界への道を築く人々のトップになれるでしょう。

これで終わりです。楽しんでね!

Trackbacks & Pingbacks

Leave a Reply