回答が必ず正しいわけではありません。ヒントとしてお使いください。この質問はお試し回数に含まれません。Railsチュートリアル」の作成者です。Enough」の共同創立者であり、主執筆者でもあります。Teaching)を受賞しています。ハーバード大学を卒業後、カリフォルニア工科大学で物理学博士号を取得。Combinator起業家プログラムの卒業生でもあります。Donahoeは、起業家とデザイナーの顔も持つフロントエンド開発者です。Mason」のリードテストカバレッジアナリスト兼テック共同創設者でもあります。USC(南カリフォルニア大学)卒(専攻:経済学、研究:インタラクティブマルチメディア技術)。ライセンスの元で提供されています。これらのライセンスはいずれか一方が有効になります。MITライセンスに基づいて使用する場合は、ビールも購入する必要はありません。「すべてのソースコード」とは、Railsチュートリアル内で題材としている「Railsアプリケーションのソースコード」を指します。「Railsチュートリアル」という教材は上記ライセンスで提供されていないのでご注意ください。営利・非営利問わず、事業で使用する場合は教材連携サービスをご利用ください。Web(WWW)1で全面的に用いられている「マークアップ言語2」です。この処理方法は世界中で普遍的に用いられているので、Web技術を業務で使う人々3なら誰でも、「HTMLとは何か」「HTMLのしくみ」を学ぶ意義があります。本書『HTML編』は、こうしたHTMLの基礎部分をしっかり学べるように構成されています。ブラウザにWebサイトが表示される仕組みインターネット上ではさまざまなHTMLチュートリアル的な教材を見つけられますが、そうした教材の多くは個別のHTML構文のサンプルや解説が中心で、「現場で役立つHTMLを実際に書く方法」や「書いたHTMLのデプロイ4方法」まではなかなか手が回らないのが現状です。本書では、本物と同じHTMLページの具体的な作り方はもちろん、作ったHTMLページを実際のWebサーバーにデプロイする方法についても、手順を追って進めれば必ず最後までたどり着けるように構成されています。「HTMLのすべてをまとめて学ぶ」体験を得られるので、HTMLを初めて学ぶ方はもちろん、既に他のHTMLチュートリアルをやってみたことのある方にもおすすめです。本チュートリアルでは、HTML全体を隅から隅までもれなく解説することはしません。その代わりHTMLを正しく、サクサク書けるようになるために必要なポイントに絞って解説します。ここで言う必要なポイントには、「わからないことがあったら自分で調べる」のに不可欠な基礎知識や調べ方も含まれます。概念を表す具体的な用語を学び、「どこがわからないか」「どこまではわかっているか」を自分の中ではっきりさせておかないと、インターネットで検索することもできません。した「わからないことを自力で調べて解決するスキルを獲得する」ことは、本チュートリアルシリーズ全体の重要な主題でもあります。sophistication)は「読み書きのスキルを身に付ける」ことと似ています。技術の成熟には、本を声に出して読むときのように「自分の力で理解する」スキルや、必要に応じて辞書を参照しながら文を書くときのように「自分の力で調査する」スキルも含まれます。HTMLは、Web技術で欠かすことのできない「書き文字」であり、学校で習う「ひらがな」「カタカナ」「漢字」に匹敵する必須科目です。本書では、皆さんの「技術の成熟」をレベルアップする機会を要所要所に織り込んでいます。作成したWebサイトはただちにproduction(本番)環境にデプロイし(1.3)、デプロイでつまづきがちな問題の解決方法も合わせて学びます。わからないHTMLコードが登場したら、まずざっくり読んで大体の内容を把握するにとどめ、詳しい内容についてはその後で学びます。Webサイトを「正しい方法で」学ぶために、コマンドライン編、テキストエディタ編、Git/GitHub編で皆さんが学んだツールを総動員します。これらのツールについては、本チュートリアルシリーズで順に学んだものをそっくりそのまま使います。以下のツールの理解や使いこなしに不安のある方は、本編に取り組む前に予習しておきましょう。プロ向けツールたち(子猫画像は除く)本チュートリアルは「ソフトウェア開発のベストプラクティス」「実際のWebサイトにデプロイする具体的な手順」までも網羅し、この1冊でHTMLのスキルを完結して学べるようになっています。HTMLをまったくのゼロから学ぶ方にとっては少し敷居の高い内容ですが、会得するメリットは計り知れないほど大きなものになります。本編を学んでおけば、他の開発者と共同作業するうえでも、さらに複雑なWebサイトの構築方法を学ぶスキルを身につけるうえでも、絶大なメリットがあります。本書では、HTMLの何もかもを学ぶのではなくHTMLの核心部分を理解することを中心に据えています。world!」ページをいきなりproduction環境にデプロイするところから始めます。第2章では、indexページに「書式(フォーマット)付きテキスト」「リンク」「画像」を入力する方法を学び、さらに第3章で、サイトのページを増やして「テーブル」や「リスト」などの高度な機能を盛り込みます。最後に第4章で「インラインスタイル」も多少追加し、素のHTML要素にシンプルなスタイルを適用するとどんな効果が現れるかを実際に確かめながら学んでいきます。本編を通して構築するWebサイトはもちろん実際に正しく動作しますが、チュートリアルが終盤にさしかかる頃には、HTML単体だけでは解決できない重要な制限がいくつか登場し始めます。Design編』に進むための準備でもあります。Sheets)を用いて最新の完全なWebサイトを作成し、サイトのデザインをHTML構造から切り離します。Webサイトのレイアウトを構成する方法や、高度なスタイル作成方法についても合わせて学べます。はじめにどんなシンプルなWebサイトも、どれほど複雑なWebサイトであっても、舞台裏を支えているのはHTMLです。本チュートリアルでは、シンプルかつ「本物の」プロ仕様Webサイトを実際に作ってデプロイしながら、あらゆるWebサイトでコンテンツの編成やオンライン表示の舞台裏を支えている構造を学びます。1.3)6によって1993年に導入されて以来、技術標準として絶え間なく進化を繰り返してきました。Standard7が正式にW3Cで勧告として発表されました。詳しくは『どうしてHTML5が廃止されたのか』をご覧ください。Webブラウザを作っている企業は、規定の仕様を参照して、「テキストをボールド(太字)にする」指定や「文字色を変える」指定、あるいは「両方同時に行う」指定などが正しい形式でブラウザに渡されたときに期待どおりに振る舞うよう、ブラウザを実装します。心配しないで欲しいのですが、HTMLのバージョンが変わるごとに何が変わったのかを細かく調べる必要はありません。ブラウザの機能を拡張して最新技術を取り入れるために、機能の「変更」ではなく単に新機能を定期的に「追加」していることを知っておけば十分です。機能変更より機能追加の方がずっとやりやすいのです。HTMLでよく用いられるさまざまな「要素(element)」は、本チュートリアルで全般的に用いている要素も含め、これまで当初の仕様からほとんど変更されていません。した要素が何の心配もなく常に安全に使えるとは限りません。具体的ないくつかの事例については「1.2」で解説します。Language」という名前が表すとおり、「マークアップ言語」の一種です。マークアップ言語は、プログラミング言語では「ありません」のでご注意ください。Webサイトの作者は、HTMLを用いて「コンテンツをどう表示すべきか」を編成および定義できます。表)」「画像」「リンク」をコンテンツに追加したりできるということです。HTMLファイルは、普通のテキストドキュメントに著者がさまざまな注釈を注意深く追加したもの、と考えるとよいでしょう。した注釈には「この部分を強調表示(highlight)したい」「ここに画像を置きたい」「ここで追加情報の置き場所を読者に見せたい」といったものがあります。HTMLのH、つまり「ハイパーテキスト(Hypertext)」とは、Web上のドキュメントから別のドキュメントへ(直線的でない方法で)表示を移動するリンク方法のことです。Wikipediaで「HTML」の記事を読んでいると、CSSのような関連トピックへのリンクが強調表示されているとします。このリンクをクリックすると、表示はただちにその別記事に移動します。Wikipediaの特定のページにリンクする代わりに、WikipediaのWebサイトそのものにリンクすることもできます。ドキュメントの外部リンクをクリックすると、ブラウザ上でそのページが新しいタブとして表示されることがありますが、これを行う方法については「3.3」で学びます。ハイパーテキストは、従来のリンクなしドキュメントと比べて技術的に大きな進歩です。探したいものを見つけるのに、紙のようにページをめくったり、Webページを延々下にスクロールしたりせずに済むのです。今やドキュメント間をリンクする機能は「あるのが当たり前」ですが、HTMLの仕様が作成された当時は、技術史にその名を残すに値する大発明だったのです。素のテキスト)」形式で書かれます。『テキストエディタ編』で解説したように、プレーンテキスト形式はテキストエディタで編集するのにうってつけです。ワープロソフトやリッチテキスト形式(RTF)などのWYSIWIG9アプローチは、人間がドキュメントにGUI10やメニューで直接書式を設定できる点は便利ですが、書式をコンピュータで手軽に自動変更するといった柔軟な処理には不向きです。先ほど説明した「テキストへの注釈」とは、タグのことなのです。HTMLタグはどこでも使える後ほど説明しますが、HTMLでサポートされているタグにはさまざまな種類があります。タグ」の形式になります。文字列(string)とは「文字(character)の集まり(sequence)」のことです。1.6で詳しく説明します。slash)」記号(/)があります。HTMLの典型的なタグのつくりHTMLタグは、エンドユーザー(つまりWebサイトを見ている人)のWebブラウザ画面には表示されませんが、舞台裏でブラウザに対して「コンテンツにどう書式を設定するか」「ページ上でどのように表示すべきか」を指示します。テキストの文字列にHTMLタグを付けた様子これは文字列です。文字列の中には、重要な部分もあれば重要でない部分もありますが、読者が重要な部分に注目してくれるようにしたいと思います。そこで、文字列の一部を<strong>強調表示に変更</strong>して、文字列の他の部分より浮き立つようにしたいと思います。strongタグは、ほとんどのブラウザでボールド(太字)のテキストとしてレンダリング(表示)されます。1.1は典型的なブラウザ上で以下のような感じで表示されます12。文字列の中には、重要な部分もあれば重要でない部分もありますが、読者が重要な部分に注目してくれるようにしたいと思います。そこで、文字列の一部を強調表示に変更して、文字列の他の部分より浮き立つようにしたいと思います。ところで、HTMLではstrongタグの他にボールド用のbタグも「一応」サポートされています。セマンティックタグであるstrongタグは「そのタグで囲まれたテキストを何らかの形で強調せよ」という指示であり、具体的な強調の方法はブラウザに任されています。<b>タグや<i>タグにはご用心」というお話むかしむかしのお話です。HTMLが最初に作られた頃は、インターネットに接続すると「ピー、ガガガガ」というファックスみたいな音がいつも鳴り響いていました。その当時は、インターネットに接続した時間で課金されたり、送信したデータ量で課金されるのが普通でした。要するに今よりもネット接続の料金がずっと高かったのです。当時はこうした制約があったため、HTMLのタグを決めるときにも「タグをどこまで短くできるか」が重要視されました。タグの文字数が少ないほど通信料金を節約できるということです。できたての技術でしたので、「タグ名にちゃんと意味がある」かどうかをじっくり考える余裕もなく、「1文字で意味がわかりにくくてもいいの!」「指定どおりに表示できればそれでいいの!」という風潮でした。このように何とかしてタグを短くしようと頑張った結果、初期のHTMLではテキストをボールドにするときにbタグ(<b>...</b>)、テキストをイタリックにするときはiタグ(<i>...</i>)という、書式を「即物的に」表すタグが使われました(実は今も使われてしまっています)。要するにケチケチ作戦ですが、それでも当時はこれで困る人はいませんでした。一部の開発者たちが、ひとつ重大なことに気づき始めました。「今のHTMLタグは、ブラウザ上の書式(=見た目)しか定義されていないじゃないか!」「今のHTMLタグは、コンテンツの意味を表す方法が定義されていないぞ!」という批判が始まりました。ブラウザ上でそれっぽく見えていればそれでOKな人々はそんなことを気にしませんでしたが、大量のWebページを自動的に解析するシステムを作る人々は困難に直面していました。さまざまなタグで囲まれたコンテンツの実際の意味を自動的に推測する必要に迫られていたのです。「ここは本文なのか?」「ここは結論なのか?」「ここは注釈なのか?」「ここは脚注なのか?」「ここは本文と関係ない操作用のGUIなのか?」という具合です。この問題を解決するため、HTMLの仕様に新しいタグを追加するときには「見た目を表すタグ名」を排除して「文書の構造上の意味を表すタグ名」を推進しようというムーブメントが起こりました。その結果、ボールドはstrongタグ(<strong>...</strong>)で指定し、イタリックはemタグ(<em>...</em>、emはemphasisの略)で表すことが望ましいということになりました。テキストをボールドにする真の意図は、そのテキストをコンテンツの中で「際立たせたい」ということであり、テキストをイタリックにする真の意図は、そのテキストを「(軽めに)強調したい」ということである、という考えに基づいています13。大した違いではないだろうと思われるかもしれませんが、セマンティックタグの用途は、単にテキストを際立たせたり軽く強調したりするだけではありません。Design編』で解説します。そこでは、常識的なタグの使い方やページレイアウトの作成方法についてさらに深堀りする予定です。ここまで、HTMLの中核となる概念について解説しました。「HTMLは、タグで囲まれたコンテンツでできている」「タグはコンテンツを組み立てたり、表示の変更を指定したりするのに使う」ということです。神ならぬ悪魔もまた「細部に宿る」ということわざもあります。HTML全体の詳細は果てしがありません。演習問題によってはこの先登場するスクリーンショットにたまに答えが映り込んでいることもあります。1.2で使われているタグの種類をすべてリストアップしてください。1.1のよい実践例のひとつでもあります)。HTMLタグの中には、コンテンツを含まないタグもあります。tag)」とも呼ばれます。1.2のうち、どれが空要素かをリストアップしてください。入れ子にする)こともできます。あるタグの内側に別のタグを置くこともできます。1.2のうち、どのタグがネストしているかをリストアップしてください。自己終了タグは含めないこと。行連句</a>が配置される)。プロジェクトを開始するマークアップとタグの基本的な構造を学び終えたので、いよいよHTML学習用の「サンプルWebサイト」を立ち上げる準備が整いました。このサンプルWebサイトは、「本チュートリアル」「サイトの会社情報」「HTML自体」に関するささやかな情報を提供する模擬的な情報Webサイトで、モックと呼ばれます。このWebサイトに、homeページと2つの補足用ページを開発しながら、さまざまなHTMLタグの使いこなし方を学ぶと同時に、一般公開Webサイトの作り方についても説明します。あなたの学習の成果がインターネット上で誰でも見れるようになります。今はサンプルの情報をそのまま使いますが、最終的にはこのWebサイトに「あなたの情報」を掲載します。最初は『Git/GitHub編』のときと同じ手順に沿って進めるので、本セクションはGit操作のおさらいも兼ねています。(Gitの使いこなしに不安があれば今のうちに『Git/GitHub編』を読んでおきましょう。Pages」という機能を無料で利用できます。「ホスティング(hosting)」とは、Webなどのサービスをデプロイして動かすこと、またはそうした設置の場を提供するサービスです。Webが登場して間もない頃の不便極まりない時代と比べると、これは夢のように素晴らしい進歩です。同じことを1999年にやろうとしたら、(大学や研究機関などのWebサイトを無料で使うのでもない限り)ホスティングサービスも有料でしたし、Webサイトを閲覧するユーザーにデータが転送されるときの費用まで負担しなければなりませんでした。Webサイトが大して混雑していないのに請求額が急上昇することもありました。Pagesもそのひとつです。Pagesは無料で、しかも驚くほど使い勝手がよいのです。Pagesで動かせるようになります。Dangerous』チュートリアル(英語)でも説明しているように、このWebサイトを「www.example.com」のようなカスタムドメインで運用することもできます。Pagesは、Gitのバックアップが組み込まれたプロ級のハイパフォーマンスWebサイトを、完全に無料で実現しているわけです。Pagesだけでこれだけのことができると、他のサービスはちょっとやそっとでは太刀打ちできませんね。それでは、サンプルWebサイトで使うディレクトリと最初のGitリポジトリを作りましょう。最初に「ターミナル」アプリでウィンドウをひとつ開いて14、sample_websiteというディレクトリを作成します15。repos/sample_website次は、cdコマンドでディレクトリの中に移動し、touchコマンドでサイトのメインページ用ファイルを作成します。ファイル名はindex.htmlにすべきです16。index.html続いて、Gitリポジトリを作成(初期化)します。repository"先ほどtouchコマンドでファイルを作っておいたのには理由があります。ファイルが何も入っていない空のディレクトリは、そのままではGitでコミットできないので、何か適当なファイルを作って入れておく必要があったのです17。作成するファイル名をindex.htmlにすべきと書いたのにも理由があります。いわゆる「homeページ」に使うデフォルトのファイル名にはindex.htmlを使うことになっています。あるWebサイトのドメイン名のみをブラウザのアドレスバーに入力して開くと、このindex.htmlファイルの内容が自動的にデフォルトとして表示されます。言い方を変えると、たとえばexample.comをブラウザで表示すると、そのWebサイトのサーバーは自動的にexample.com/index.htmlを表示します18。日本ではWebサイトを指すときに未だに「ホームページ」という言葉が使われることがありますが、この用い方は正確ではありません。本来のhomeページとは、「そのWebサイトを開くと最初に表示される、出発点としての(特定の)ページ」「その中で他のページに移動しても、最終的にそこに戻る(特定の)ページ」を指すものであり、Webサイト全体を指すものではありません。本チュートリアルでは、意味の不正確な俗称の「ホームページ」と区別するため「homeページ」と表記しています。「Webサイトのデフォルトであるhomeページのファイル名はindex.htmlにする」というのは、厳密には絶対的な決まりではなくWeb開発の慣習(convention)に過ぎず、実際にはWebサーバーの設定でいくらでも他のファイル名に変えられます。そもそもなぜhome.htmlにしなかったのかという素朴な疑問もあるかもしれませんが、この慣習はほぼ完全に定着しているので、事実上絶対に近いと考えてよいでしょう20。今後自分でWebサイトを構築するときも、他の開発者が混乱しないよう、この慣習に従っておくことをおすすめします。example.comというドメイン名は、先ほども述べたようにサンプル用の標準ダミードメインとして予約されています。今後Webサイトを自分で作るときも、何らかのダミードメインをHTMLで書く必要が生じたらこのexample.comを使うよう習慣づけておくことをおすすめします。このダミーサイトは今後変更される心配がなく、安心してダミーに使えるからです。逆に、たとえばusousousouso800.comのような「たぶん存在しないであろうドメイン名」をその場で適当にでっちあげて入力するのは避けましょう。将来誰かが本当にそのドメインを作ってしまうかもしれません。同じ理由で、ダミーのメールアドレスが必要になったときも、このexample.comを使うようにしましょう21。Gitリポジトリを初期化したので、リポジトリをGitHubにpushする準備が整いました(リポジトリは空っぽ同然ですが)。リモートの取得元を指す)」にメインのURLとして設定します。1.9に示した場所にあります。line」セクションに表示されているコマンドをコピーして使っても構いません。mainこのとき、パスワードの入力を求められます。このパスワードはGitHubのパスワードではなく、個人用のアクセストークンにする必要があります。リモートリポジトリ」をご覧ください。