1.15のように自動的にハイライトされます25。highlighting)」機能は、人間がソースコードを読みやすくするためのもので、コンピュータのためではありません。シンタックスハイライトは、index.htmlファイル自体には何の影響も与えませんが、エディタ上でタグとコンテンツを色分けして人間が楽に区別できるようにしています。本チュートリアルのコード例がシンタックスハイライトで色分けされているのもそのためです。world!」をテキストエディタで表示した様子index.htmlにコンテンツを追加したので、ブラウザで結果を確認しましょう。macOSの場合は、以下のようにコマンドラインでopenコマンドを実行します。macOSでのみ有効Linuxシステムの多くは、xdg-openという似たコマンドが使えます。1.17のように表示されるはずです。1.17のURLは、インターネット上ではなく自分の手元にある「ローカル」ファイルを指していることにご注意ください。file:///Users/mhartl/repos/sample_website/index.htmlこのindexページはローカルシステム上にあり、実際のWebサイトにはまだデプロイされていません。Pagesにpushすればデプロイされます。1.18のようになるはずです。デプロイ直後はGitHubPagesがサイトをロードするまでしばらく待つこともありますが、以後は爆速でレスポンスを返します。1.17)と完全に同じですが、ブラウザのアドレスバーをよく見ると、URLがgithub.ioになっていることがわかります。実際に動いている本物のWebなのです。おめでとうございます!production(本番)Webサイトの公開に成功しました。1.2のマークアップに置き換えてください。そこにあるaタグの意味を推測してください。ブラウザの「Webインスペクタ」機能を使って、上の演習問題のページのソースコードをブラウザ上で調べましょう26。1.2と違うかどうかを調べてください。1.4のように素朴でいい加減なコードもレンダリングできますが、それに頼るのは危険です。」がブラウザ上で正しくレンダリングされなくなってしまいます。HTMLページが完全に検証(バリデーション)されていないと、まさにこうした問題が起きます。このような問題を避けるため、ここからは常に検証済みHTMLをサンプルWebページで使うことにします。検証済みHTMLを使うことで、ブラウザの種類が異なっていてもページが正しく表示されるようになります。文字化けしたaboutページ(『Git/GitHub編』より)典型的なHTML構造(スケルトン)は、htmlタグを1つ持ち、その中に2つの要素(head要素を1つとbody要素を1つ)を持ちます。<html><head></head><body></body></html>このままでは読みづらいので、スペースと改行を追加して、HTMLの構造がひと目で分かるようにするのが通例です。</body></html>HTMLではスペース文字を余分に追加しても無視されるので、このように整形してもブラウザ上の表示は変わりません。HTMLを整形するHTMLを読みやすくするため、スペースや改行を適切に追加してドキュメントの構造を明確にし、ひと目でわかるようにする慣習が広く普及しています。最初のうちはやや違和感があるかもしれませんが、Web開発の世界ではソースコードが読みにくくならないようにするため(そしてHTMLコーダーを激怒させないため)、このスタイルを維持する習慣が定着しています。一般に、HTMLをブラウザで表示すると余分なスペース(スペース文字の2つ以上の連続)は消えます。world!</p>上のきれいなHTMLと、改行やスペースがだらしなく追加された下の残念なHTMLは、ブラウザ上でまったく同じに表示されます。</p>HTMLを常日頃からこのように整形し、このスタイルを崩さないよう努めるのはよい習慣です。前者は、明らかに後者より読みやすくなっています。マークアップに手を加えていくうちに読みやすさが落ちることもあります。ページが複雑になってテキストの文章量が増加したり、タグのネストが追加されると読みづらさが増します。コンテンツをシンプルに保ち、タグを見落とさないようにするためには、さらに厳密なスタイルで整形する必要があるでしょう。どんな場合にも使えるユニバーサルなマークアップの整形方法というものは残念ながら存在しませんが、改行については少なくとも以下のことを守りましょう。strong</strong>など)。インライン要素の詳細や、いわゆるブロック要素との違いについては3.2で詳しく解説します。英語やドイツ語や韓国語などの単語をスペースで区切る言語では「コンテンツが長くなったら改行を追加してインデントを追加する」手法もありますが、日本語コンテンツでは問題が生じるので、改行しないことをおすすめします28。インデントのレベル(深さ)は開発者ごとに好みが分かれていますが、本チュートリアルでは「スペース2個」でインデントするスタイルを用いています。「スペース4個」もよく使われますが、私たちの経験上ではエディタの右側にすぐ達してしまいます。スペースではなくTab文字でインデントするのを好む開発者もいますが、Tab文字によるスタイルは退けた方が無難でしょう。Tab文字の最大の問題はデバイスやエディタによって文字幅が異なってしまうことで、あるエディタではマークアップが気持ちよく整形されているのに、コマンドラインで見ると逃げ出したくなる可能性もあります。そのようなときは、自分のエディタを設定してスペースを正しく使うようにすることが重要です29。最後に、現代のテキストエディタの多くはHTMLを自動整形する機能を最初から内蔵していることは知っておく価値があります(VSCodeエディタの場合は「⇧⌥F」)。この機能は、巨大なHTMLファイルをインデントで整形するとき、特に外部の会社や顧客から渡されたファイルや、HTMLファイルがまともに整形されていない場合に大変重宝します。した自動整形機能は一般に「オートコレクト」などと呼ばれます。プログラミング言語では、言語の構文を解析してより高度なコード整形を行う「lint」と呼ばれるツールも広く使われ始めています。した自動整形ツールは、大勢の作業者が共同作業するうえで書式のばらつきを防ぐ必須ツールとなっています。共同作業では、作業者全員が自動整形の設定を完全に同じにしておくことが重要です(人によって違う書式に自動整形されていたらケンカの元になります)。自動整形ツールを作業者の手元で使っていると、全員の設定を常に揃え続けるのに手間がかかります。エディタ内蔵の自動整形機能はエディタごとにまったく異なりますが、エディタは開発者ごとにはっきり好みが分かれるものなので、作業者全員のエディタを強制的に統一するのも簡単ではありません(おそらく反発を買うだけでしょう)。そこで最近では、エディタ内蔵の自動整形に代えてエディタから作業者共通の自動整形ツールを呼び出したり、GitHubなどのリポジトリ上にコードをpushすると自動的に何らかのlintツールが走るように設定することも広く行われています。ツールは流行り廃りが激しいので、一度慣れたツールをずっと使い続けられる可能性は少ないでしょう。いずれにしろ、今後は何らかのツールによる自動整形が当たり前になり、コードを自分勝手な書式で書くことはなくなるでしょう。HTMLの中で<head>と</head>で囲まれているセクションは、「メタデータ(metadata)」を定義するヘッダーコンテナです。メタデータとは「データに関するデータ」のことです。この<head>セクションはブラウザ上では表示されませんが、ブラウザに対してさまざまな指定を行えます。コンテンツを正しく表示するのに必要なCSSファイルやJavaScriptファイルの置き場所などの情報を、ブラウザ上に表示せずに指定できます。Design編』で学びます。<body>と</body>に囲まれたコンテンツは、ブラウザに表示されます。どんなWebサイトでも、コンテンツは必ずHTMLのbodyタグの内側に置かれています。type」を知らせる要素が必要です。これは省略できません。次に、head要素の内側に、空ではないtitle要素を定義する必要もあります。これは一応省略可能ではありますが、省略しないことが強く推奨されています。</body></html>上のDOCTYPEだけは他のタグと書式がかなり異なっていますが、これは「そういうものだ」と考えましょう。これが一体何なのかは気にする必要はありません30。1.6で見たstrongタグや、1.4で見たpタグと同様、開始タグと終了タグがあります。titleの中身が空なのは違反ですが、bodyの中身は空でも問題ありません。ひとつ注目いただきたいのは、このページに関する「エラー」は何も表示されませんが、「lang属性(attribute)がない」という「警告(warning)」が1件表示されるという点です。この警告は後ほど3.3.1で修正する予定です。1.19でもうひとつ学んだのは、コンテンツをどの「文字セット(character)」で表示するかをブラウザに伝える必要があるということです。Unicodeを文字セットに指定すると、「TM」「©」などの記号や「voilà」などのアクセント文字やさまざまな言語特有の文字(漢字やひらがなも含む)などの膨大な文字セットが使えます。1.6のようにheadにmetaタグを追加します。文字セットについてUnicode普及前の日本では「Shift_JIS」や「EUC-JP」「ISO-2022-JP(俗にJISコード)」といったさまざまなエンコード方式が乱立していました。これらは多言語を混在させることもできず、いわゆる文字化けもしばしば発生しました。Unicodeが普及した現在は、文字化けを見かけることもほぼなくなりました。文字セットの世界ではUnicodeが勝利しましたが、Unicodeの規格の中には実は「UTF-8」「UTF-16」という複数のエンコード方式(encoding)が存在します(他にマイナーな「UTF-32」なども一応ありますが)。UTF-8は設計の優れたエンコード方式で、特にプログラミングの世界ではほぼ勝利を収めています。UTF-16はWindowsの内部エンコード方式に採用されてしまったために、Windowsユーザーから受け取る生テキストファイルはUTF-16でエンコードされていることがほとんどです。テキストエディタはUTF-8やUTF-16を自動的に認識して対応するので、通常はほぼ気にしなくても大丈夫です(これまでのチュートリアルはすべてUTF-8ベースになっています)。プログラミングではUTF-8とUTF-16の違いに注意が必要になることもあります。element)」と呼ばれる特殊なタグなので、閉じタグが存在しません。tag)」とも呼ばれます。1.7を参考のために再掲載します。</html>HTMLスケルトンは大事なので、要素を1行ずつおさらいしておきましょう。1.8ではbodyタグの内側に置かれていることにご注意ください。1.18のときと同じになります。1.22のようにパラグラフの周りの余白がわずかに増えていることです。world!」ページところで、ページタイトルの表示方法はブラウザごとに多少違いがあります。1.24のように2つ目のタブを追加するまでタイトルをタブに表示しないブラウザもあります。このページタイトルはブラウザによっては表示されないことがありますが、それでもHTML標準において必須とされているので、省略すべきではありません。reader)や、検索エンジンのクローラー32にとっても重要な情報源でもあるので、その意味でも省略すべきではありません。Pagesに結果をpushする準備が整いました。1.25のようになります。validatorで確認してください。1.26のように表示がおかしくなる(タイトルが消える)ことを確認してください。これは閉じタグの重要性を示しています。validatorでチェックするとバリデーションが失敗する(エラーが表示される)ことを確認してください。1.10で置き換え、住所に含まれるホワイトスペース(スペースや改行文字などを合わせた呼び方)がブラウザで表示されない(無視される)ことを確認してください。インターネット上で提供されているハイパーテキストシステム。スリー)とも呼ばれる。文章の構造や表示方法を記述するための言語。最近では事実上すべての開発者、デザイナー、それに管理職すら含まれます。実際のWebサーバーに反映すること。Webそのものを発明したという意味で。4.0)」ライセンス条項に基づいて無改変にて利用。日本語訳版もありますが、最新情報は英語版を参照すると良いでしょう。2.0)」ライセンスに基づいた改変。2.0)」ライセンスに基づいてリリース。Get」の略で「(画面上で)見た通りのものが(印刷物として)手に入る」という意味。昔のコンピューターは、ディスプレイで表示される画面表示と、実際に印刷したときの見た目を揃えることはほとんど不可能でした。「グラフィカルユーザインタフェース」の略。操作の大半をマウスやタッチスクリーンなど画面上からの指示で行えるもの。2.0)」ライセンス条項に基づいて無改変にて利用。仮にstrongタグの中身(つまり<strong>と</strong>で挟まれた文字列)が英文だった場合は、途中で改行されていたとしてもブラウザは改行を「無視」します。ブラウザは、改行がなかったかのように、英語の文字列をひと続きのテキストとして表示します。WebデザイナーやDTP専門家の多くが「イタリック体は日本語のテキストに合わない」と指摘しています。実際、日本語の文字にイタリックを指定すると斜めになって読みづらくなることがよくあります。明確な意図がない限り、日本語コンテンツでは原則としてイタリック体を避け、別の強調表示方法を検討する方が無難でしょう。shell)に変更しておくことをおすすめします。/bin/bashを実行し、パスワードを入力してから「ターミナル」アプリを終了し、再度起動すれば完了です。途中でいろいろなメッセージが表示されますが、無視しても大丈夫です。リポジトリを初期化する」でも解説しています。断りのない限り、『HTML編』で扱われているコマンドは、すべて既刊の3つのチュートリアルのいずれかで解説されています。本チュートリアルで、よくわからないコマンドを見かけたら、既刊のチュートリアルの中を探すことをおすすめします。index.htmlにすべき理由については、この後すぐに説明します。『コマンドライン編』でも述べましたが、ファイルをtouchコマンドで作成したのは単に私の好みによるものです。これで作成したファイルの中身は空になります。index.htmlを実行する手もあります。このexample.comのリンクをクリックすると実際にexample.comが表示されますが、これはexample.comサイトはWebサイトのサンプルを記述するときのダミーWebサイトとして予約することがHTMLの標準仕様で定められているからです。ことで、「ホームポジション」や野球の「ホームベース」に通じます。Unixやプログラミングには、この種の暗黙の慣習が驚くほどたくさんあります。自動化テストでこうした思いつきのダミーメールアドレスを使っていたら、あるとき本当にそのメアドを知らない誰かが有効にしてしまい、思わぬ事故につながったという事例があります。GitHubのユーザーインターフェイス(UI)は定期的に更新されているので、ブラウザで表示されるGitHubの画面はスクリーンショットと若干異なる可能性もあります。2.0)」ライセンス条項に基づいて無改変にて利用。1.3.1でREADMEファイルを追加した方もいるかもしれません。エディタはファイルの.html拡張子を認識しています。Chromeの場合、ブラウザの画面を右クリックして「検証」をクリックしてみましょう。Design編』で詳しく学ぶことができます。inspector」でググるのも良いでしょう。一部に障害が起きた場合、全体に影響を及ぼして全てが停止してしまうのではなく、障害の規模に応じて機能を抑えながらも全体の処理を続行するシステムのこと。HTMLファイル内の改行文字はブラウザ上で1個のスペースに置き換えられることをうまく利用して、英語やドイツ語や韓国語などの単語をスペースで区切る言語ではこの方法で整形できます。日本語や中国語のように単語間にスペースを置かない言語でこの方法をそのまま使うと、残念ながら不自然なスペースが日本語文に表示されてしまいます。実際に少し長い日本語文を改行で区切って試してみても良いでしょう。エディタによっては本物のTab文字をスペースで代用する「Tab文字エミュレーション」機能でまごつくこともあります。DOCTYPEの前に感嘆符がある理由もわかりません。2.0)」ライセンス条項に基づいて改変。2.0)」ライセンスに基づいてリリース。Webの内容を自動的にインデックス化する検索エンジンの機能で、「ボット」「スパイダー」などとも呼ばれます。社によって運営されています。サービスなどもご検討していただけると嬉しいです。研修支援や教材連携にも対応しています。