Unformed Building

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

公開:

パーマリンク

この記事は『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検索)。
そうすれば、その情報を経験している世界への道を築く人々のトップになれるでしょう。

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