プログラミング入門ナビ編集部はじめにHTMLやCSS、JavaScript等を学習していると「このタグはどういう意味なんだろう?」「この記述は必須?不要?どっちだったっけ?」といった疑問が出ることがよくあります。全てを熟知し覚えておく必要はないのですが、こういった場合に自分で調べられるようにしておくと学習が捗りますね。内容を動画でも解説しています。Foundationが運営している公式サイトです。ウェブ開発に携わる人々の役に立つよう、関連する技術情報を公開しています。わからないことがあったら、まずはこのMDNを参照するのがおすすめです。強くおすすめする理由としては次のようなものがあります。信頼性の高い情報が手に入るウェブ開発の学習をしていてわからないことがあった場合、基本的には検索サイトで調べる方が多いですね。それ自体は問題ないのですが、検索結果に多く出てくる個人の方が書いたブログや技術系投稿サイトの情報を鵜呑みにしてしまうのは少々問題です。まとまっていて大変参考になることも多いのですが、情報が古かったり、正確性が担保されていないといった懸念があります。結局、そういった情報を参考にあの手この手を試してみたものの、なかなかその記事に書いてある通りにならず、よく調べてみるとかなり古いバージョンについての話だった、といったケースはよくある話です。なってしまうと貴重な時間と労力の無駄ですね。MDNは情報の質が高いので実際の業務で参照しているエンジニアも多く非常におすすめのリファレンスです。個人発信の記事と比較すれば多少取り付きにくい部分はあるかもしれませんが、こういった信頼性の高いサイトで調べることにも慣れていくことを強くおすすめします。ウェブ開発に関する情報が一通り揃っているMDNのサイトで「テクノロジー」というメニューをクリックすると、取り扱っている情報のカテゴリが見られます。HTML・CSS・JavaScriptといったウェブ開発に必須の技術に加え、グラフィックやHTTPプロトコルの話題もありますね。特定の分野に絞って詳しく解説しているサイトは多くありますが、このように必要な情報が体系立てて網羅されているのがMDNの利点です。HTMLならここ、CSSならこっち、というようにいろんなサイトを調べなくとも、MDNを参照すれば一通りの情報が揃うのは学習効率を上げるための大きなメリットといえます。無料で使用可能ここまでの信頼性と網羅性を兼ね備え、かつ日本語版もあるという便利なMDNですが、無料で参照することが可能です。教科書にすれば数冊分の情報に匹敵することを考えると、素晴らしい価値のあるサイトですね。リファレンスという立ち位置である以上、ウェブ開発学習の全てを担うことは難しいですが、プログラミング講座や教材で開発の流れを掴みながら、わからないことがあったときに参照するにはうってつけです。取り組んでいる講座や教材と組み合わせて使用すれば抜群のコストパフォーマンスを発揮します。MDNを使ってみよう早速、MDNの使い方を見てみましょう。ブックマークしておくのがおすすめMDNは下記のリンクから閲覧可能です。ブックマークしておくとわからないことがあった際にすぐ調べられるので便利ですね。docs特定のワードについて調べたい場合は「テクノロジー」メニューからカテゴリを選ぶ方法がおすすめです。HTMLのアンカー要素<a>のタグに指定できる属性はどんなものがあるのか調べたい場合について見てみましょう。elements」をクリックして展開すると<a>がありますね。これをクリックするとアンカー要素<a>の詳細ページに入り、指定可能な属性一覧を確認できます。Google検索も便利もしくは、調べたいワードが決まっているならばGoogle検索でMDNページを見つけ出すのも手っ取り早いです。p」とGoogle検索してみましょう。検索結果に出たMDNのサイトをクリックすると、直接詳細ページに飛ぶことができます。まとめウェブ開発でわからないことがあった際、おすすめの調べ方としてMDNの使い方やその利点を紹介しました。自分で調べる癖が付けられると、学習スピードがぐんと上がります。プログラミング学習のお供に活用してください。本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。内容を動画でも解説しています。https://www.youtube.com/watch?v=YkmQ5ZIdD0I&feature=youtu.be改行やインデントがないとどうなる?例えばこのようなHTML文書を考えてみましょう。VSCodeなどのエディタで実際に打ち込んでみてください。</body></html>これをブラウザで表示すると下記のようになります。次にコードから改行やインデントを取り除いてみましょう。下記のように、とても雑然としたコードになります。</html>エディタで保存したら先ほどのブラウザをリロードしてみましょう。なんと表示はそのまま変わりません。実は、改行やインデントがなくても正しく書けてさえいればこのようにきちんと表示されるのです。改行やインデントはなぜ必要?これではますます冒頭のように「改行やインデントなんて、Word文書みたいに自分の好きなタイミングで付けたらいいのでは?」という思いが強まってしまうかもしれませんが、お待ちください。どんなプログラミング参考書でも改行やインデントは必ずつけるよう指南があります。それだけ、改行やインデントには実は非常に重要な役割があるのです。ここからはその理由を説明していきます。コードを読みやすくするこれは直感的に理解しやすいかもしれません。先ほどの改行・インデントなしのコードを見て「何が書いてあるのかわかりづらくなったな...」と思われた方が多いのではないでしょうか。先ほど改行やインデントを取り除いてもきちんと表示できたのは、ブラウザが改行やインデントを無視してコードを読み込むためです。「HTML文書の存在理由はブラウザに読み取ってもらってWebページとして表示されることなので、それさえできればいい」といってしまえばそれまでなのですが、その考えは少々短絡的といえます。いうのも、実際のWebサイトはいくつものWebページを保有する大規模なものであるため、基本的には複数人で開発します。そのため、誰かが書いたコードは人間である他の開発者が目にすることが多いです。ページ同士の連携や機能拡張のために修正する等、目的は様々ですがそんな時に先ほどのような改行やインデントのないコードを書いていれば、間違いなくブーイングが起きます。エンジニアのお作法として、他の人にも読んでわかりやすいように必ず改行やインデントを入れるようにしましょう。バグを少なくするそれなら、せめて改行は入れるけどインデントまではなくてもいいのでは?と思われたかもしれません。インデントのない下記のコードを見てください。実はこのコードでブラウザに表示させようとすると、真っ白な画面になってしまいます。red;}</head><body><h1>はじめての見出し</h1><p>はじめての段落</p></body></html>次にインデントを付けた下記ならばどうでしょうか。インデントの有無以外で上記のコードと差はありません。</body></html>8行目でh1のスタイル指定が終わった後「}」から、9行目の</head>まで通常ならばインデントが1段ずつ戻るのが、一気に2段下がっているのが不自然です。本来はこの8行目の下に終了タグ</style>があるべきでしたが、無いということが見つけやすいですね。このように、インデントがあれば書かれたコードを見ても不自然な箇所からバグを見つけやすいですし、書いている途中でもインデントを意識していれば間違いに気付きやすいです。要素ごとにインデントがあるのでHTML文書の要素同士の階層構造が見やすいという利点もありますね。まとめHTML文書での改行とインデントの重要性について説明しました。無くともブラウザに表示はされますが、エンジニアの嗜みとして改行とインデントは必ず入れるようにしましょう。他の言語でも同様の理由から入れるようにしてください。本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。プログラミング入門ナビ編集部はじめにHTMLを学習したいけれど、どんな風に書くのかイメージがわかない、難しそう...と考えてはいませんか?HTMLは数あるプログラミング言語の中でも比較的易しく、取り掛かりやすいため、とにかくやってみるのがおすすめです。この記事では、はじめてHTMLを書く方向けに1つ1つステップを踏んで方法を解説します。macOS、Windowsで手順は同じです。内容を動画でも説明しています。[macOSの場合]https://www.youtube.com/watch?v=lHkwuFKbh4I&feature=youtu.be[windowsの場合]https://www.youtube.com/watch?v=m-4ftze8F94&feature=youtu.beウェブページの完成イメージこのような簡単なウェブページをHTMLで作ってみましょう。下準備まずはデスクトップに学習用の「web」というフォルダを作成してください。フォルダ名は任意ですが、この後の流れでは「web」という名称で進めるため同じにしておいた方がわかりやすいです。[macOSの場合][windowsの場合]コーディングHTMLに限らず、コーディングを行う際はエディタを使うと便利です。エディタはプログラミング言語に応じて文字を見やすく色付けしたり、ファイル同士の見比べをしやすくレイアウトしたりといった機能があります。Codeです(VSCodeと略称でも記載されます)。全てのプログラミング言語に対応し、使い勝手も良く近年人気が急上昇しています。こだわりがなければインストールして使ってみましょう。下記から入手できます。以降、VSCodeでの画面例になります。[macOSの場合]VSCodeを開いたら、Fileメニュー->Openから先ほど作った「web」フォルダを開きます。Folderから先ほど作った「Web」フォルダを開きます。「web」を指定すると、下記のような画面になります。webフォルダの中にさらにフォルダを作成しましょう。Folder」と表示されるところ)をクリックし、テキストボックスに「html-basic」と入力すれば作成されます。下記のようになればOKです。次に、この「html-basic」の中にHTMLファイルを作成していきます。File」のアイコンをクリックしてください。テキストボックスに「index.html」と入力します。下記のようになっていればOKです。index.htmlをダブルクリックすると右側の部分にファイルの中身が開きます。今はまだ何も書かれていませんが、この中にHTMLを記述していきましょう。実際のコーディングに入る前に、いくつか注意点があります。ファイル名には原則として日本語を使わない拡張子は.htmlとする全角・半角を意識する1の理由として、ウェブ系の基礎となる技術は日本以外の国で開発されることが多く、日本語の使用が想定されていません。ファイルの中身にコンテンツとして日本語を書くのは問題ないのですが、ファイル名に日本語を使うと想定外のトラブルが発生することがよくあるためです。このような本質的でないトラブルに引っ掛かり解決に時間がかかるのを防ぐためにも、ファイル名には日本語を使わないのが得策でしょう。3についてはこの後のコーディングで詳しく説明しますが、同じ数字や記号でも全角・半角の使い分けができないとブラウザがうまくHTMLを読み込めません。正しい使い分けを意識しましょう。シンプルなページindex.htmlの中に下記のコードを記述していきます。完成形は下記ですが、理解を深めるため順を追って記述していきましょう。</body></html>まず1行目はDOCTYPE宣言という部分で、この文書がHTMLだということを宣言しています。html>この<>で書く部分のことをタグと呼びますが、初心者の方は、よく全角で書くミスをしがちです。下記のように「!」が全角の「!」になっていたりするとブラウザがHTMLを読み込めませんので注意してください。lang=ja>2行目以降にはhtmlタグを記述します。HTMLでは、下記のようにスラッシュなしの「開始タグ」、スラッシュありの「終了タグ」がワンセットとなっていて、その間に中身を書いていくのが基本です。この開始タグ+中身+終了タグのかたまりを「要素」と呼びます。終了タグを忘れないよう、開始タグを書いたらセットで書いてしまうのが良いでしょう。<html></html>html開始タグの中には「属性」といって、そのタグに適用できるオプションを記述可能です。下記のように記述すると、htmlタグの中で使用する言語として日本語が指定できます。属性についてはまた後の記事で紹介します。lang="ja"></html>次にhtml要素の中にhead要素とbody要素を記述します。head要素はこのhtml文書に関する情報を記載する部分、body要素はHTML文書の本体を記載する部分です。head要素の中に、文書のタイトルを入れるためのtitle要素、文書に関するメタデータを入れるためのmeta要素を記述しましょう。title要素とmeta要素はhead要素の中に入れ子として入る形になるので、見やすくするためにタブでインデント(一段右にずらすこと)します。</body></html>タイトルとして、<title>と</title>の間に「はじめてのHTML」と記載します。meta要素にはHTML文書で使用する文字セットとしてutf-8の指定を行います。言えば日本語を文字化けせずに使うための設定と考えてください。body要素には下記のように本文を記載しましょう。</body></html>ここで、meta要素には終了タグがないことにお気づきでしょうか。先ほど、基本的に開始タグと終了タグはワンセットになると述べましたが、中には終了タグを付けてはいけない要素もあります。全てを暗記する必要はなく、使用したい要素があればその都度下記のサイトで調べることが可能です。docs:HTML要素リファレンス(Mozilla)ここまで記述できたら、ファイルを保存しましょう。ファイルが保存されていない状態では、VSCodeのタブの右横に丸いマークがついています。保存にはショートカットが便利です。macOSの場合は[Command+s](Commandキーとsキーを同時に押す)、Windowsの場合は[Ctrl+s](Controlキーとsキーを同時に押す)で保存できます。VSCodeのタブ横の丸いマークが消えたことを確認してください。保存できたら、早速ブラウザで見てみましょう。Finder」をクリックしてください。Chromeを選択してください。Explorer」をクリックしてください。Chromeを選択してください。してブラウザで表示してみると、下記のようになります。タブの部分に、title要素に記述した「はじめてのHTML」が表示され、本体には「はじめての見出し」「はじめての段落」が並びで表示されていますね。コードの中では、改行してこの2文を書きましたが、ブラウザでみると改行が入らないことを覚えておいてください。冒頭で示した完成イメージと違い、この2文が同じ太さで書かれていますね。完成イメージのように、2文を別々な見せ方にするにはどうすれば良いのでしょうか。マークアップしてみようマークアップというのは、HTMLの要素の機能を使って、文章の意味づけを行うことです。下記のように「はじめての見出し」をh1要素で、「はじめての段落」をp要素で囲ってください。終了タグにはスラッシュが必要なことや、タグに全角を使ってはいけない点に注意しましょう。</body></html>再度、ファイルを保存し、ブラウザで表示してみてください。先ほど表示したブラウザがそのまま残っていれば、ブラウザのリロードボタンをクリックするかF5キーを押せば保存した内容が更新されます。今度はイメージ通りになりました。このように、h1要素でマークアップするとフォントが大きくなって見出しとして表示され、p要素でマークアップすると段落として別の行に表示されます。h1要素やp要素があることでブラウザが見出しや段落として表示しなければならないことを理解し、ふさわしい表示ができるようになったわけです。スタイルを指定するには補足ですが、この例では文章の見た目(スタイル)を変更するためにHTMLの要素を利用しましたが、本来HTMLは文書のレイアウトのために使用されるものであり、細かなスタイルの指定には利用しません。スタイルの指定まで同じ文書内で行うとコードが複雑になり、本来のレイアウト構造が見にくくなるためです。スタイルをより詳細に指定するためには別のプログラミング言語であるCSSを使用します。見出しの文字色を赤くするには下記のように、head要素内にstyle要素を追加します。今回はわかりやすさのために同じ文書内に書きましたが、通常はこのスタイル部分を別のファイルにすることが多いです。</body></html>ブラウザで表示してみましょう。このように、style要素で文字色等を変更することができます。まとめHTMLでのプログラミングの流れを説明しました。エディタでコードを書いて、ブラウザで確認するだけなので、難しい環境構築等が不要で始めやすいですね。方にとってもイメージを掴むきっかけになれば幸いです。お手元でもチャレンジしてください。本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。プログラミング入門ナビ編集部はじめにHTML学習において一番最初に学ぶことはコードの書き方ですが「どんなルールで書くのか?」「全体としてどんな構造になるのか?」が最も重要です。この記事では、その要となるHTMLの基本的な構文と構造について解説します。HTMLの基本構文タグでコンテンツを挟むHTMLのコードに共通しているのは下記の構文です。なんとなく目にしたことがあるかもしれません。<タグ名>コンテンツ</タグ名>HTMLには様々な機能があり、どの機能を用いてコンテンツを表現したいか?を「タグ」を用いて記述します。段落として「はじめてのHTML」というコンテンツをWebページに載せたいとしましょう。その場合は下記のように記述します。「p」が段落の機能を意味します。<p>はじめてのHTML</p>コンテンツとは日本語で「情報の中身」のような意味合いで、上記では「はじめてのHTML」がそれにあたります。一部の例外(inputタグ等)を除き、ほとんどのHTMLはこのようにタグでコンテンツを挟むのが基本構文です。最初のタグを「開始タグ」、終わりのタグを「終了タグ」と呼び、この「開始タグ+コンテンツ+終了タグ」のまとまりを要素と呼びます。上記の例は段落「p」のタグで挟んでいるため「p要素」と呼ばれたりもします。基本的には上記のように大変シンプルな構文ですが、下記の点に注意してください。本項の内容を動画でも解説しています。次にHTMLの基本構造を見て見ましょう。DOCTYPE宣言とhtml要素HTML文書の基本的な構造は上図のようになっています。HTML文書の先頭にはDOCTYPE宣言と呼ばれる「使用するHTMLの種類」の宣言を行う部分が必要です。その次がhtml要素で、<html>で始めて</html>で閉じます。これはHTML文書の最上位要素で、この中に他の要素を入れていきます。html要素の中に入る代表的な要素はhead要素、body要素です。head要素には文書タイトル、文字コード、キーワード、説明文、関連ファイル等、文書の基本情報を記述します。このhead要素に記述された内容はwebページには表示されません。body要素は文書の本文を記述する部分で、ここに記述した内容がwebページとして表示されます。アクセスしてきたユーザーから見える部分です。説明だけではイメージが掴みにくいので、実際のコード例を見てみましょう。</body></html>まず最初にDOCTYPE宣言でhtmlを使用することを明言しています。その後、html要素がありその中にhead要素、body要素がありますね。head要素の中にはmeta要素、title要素があります。meta要素にはメタデータを記述しますが、メタデータというのはデータそのものではなく、データに関する情報のことを指しており、ここではcharset=”utf-8′′という情報がありますね。意味は、この文章の文字セット(キャラクターセットと呼びます)はutf-8を使う、ということです。文字セットとはコンピュータで表示するために定められた文字集合のことで、ウェブブラウザが文章を解析して表示する際に参照する決まりのようなものと捉えてください。日本語で書いたのにロシア語の文字セットを使うとウェブブラウザがロシア語だと思って表示してしまうので、文字化けの原因となります。title要素では、このHTML文書のタイトルを定義することが可能です。Chromeのタブでウェブページを表示するとそれぞれのタブに文字列が出ていますね。この部分がtitle要素で記述されたものです。続くbody要素の中にはp要素があり、冒頭の例の通り、段落として表示される部分です。要素の入れ子とドキュメントツリーHTML文書は、上図左側のように要素の中にさらに別の要素があり、さらにその中に別の要素が...といったように、要素の入れ子構造になっています。これは言い換えると右側のように階層構造とも見られるのが特徴です。html要素の中にbody要素があるので、これらは親子関係にある(html要素が親要素、body要素が子要素)といったり、body要素の中でh1要素とh2要素は同列にあるので兄弟関係にあるといったりします。本項の内容を動画でも説明しています。https://www.youtube.com/watch?v=VyArkIObSXc&feature=youtu.beまとめHTMLを学ぶうえで最初に知っておくべき基本的な構文と構造について説明しました。本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。プログラミング入門ナビ編集部はじめにプログラミング言語を学んでいると「この言語はどうやって開発されたんだろう?」と疑問に思うことはありませんか?開発の経緯や背景を知っていると、より興味を持って学習が進められますね。内容を動画でも解説しています。)のイギリス人研究者であるティム・バーナーズ・リー博士によって開発されました。研究所内では多くの研究者により様々な研究が為されていましたが、膨大な論文の中から関連する資料を探し出すのは一苦労で、より簡単に研究者同士が進捗状況や研究成果を共有できるようにする必要があったのです。ティム・バーナーズ・リー博士はこの目的のためにハイパーテキストシステムを考案し、ある論文から別の参考文献へリンクを貼ってすぐに参照できるようにしました。Webが生まれた経緯です。Language)が開発されました。下記が1991年、ティム・バーナーズ・リー博士によって世界で初めて公開されたウェブサイトで、現在は復刻版として公開されています。Web博士はこの偉大な功績を称えられ、2016年にIT界のノーベル賞ともいわれるチューリング賞を受賞しています。インターネットが開発されたのは別の経緯であり、1969年にアメリカの国防総省にて情報共有を目的に開発されたARPANET(アーパネット)が起源です。主要なHTMLのバージョン開発以後、HTMLは何度かのバージョンアップがありました。下記が主要なHTMLのバージョンです。HTML5.2(HTML5のマイナーアップデート)HTML4.01やXHTML1.0が10年以上使用されていましたが、現在では新規のプロジェクトに関してはHTML5またはそのマイナーアップデート版が使用されます。HTML5はフォームに使える部品やスマートフォン向けの機能等を大幅にアップグレードしたもので、ビデオをページに埋め込むことも可能となりました。このようにHTML5はHTML4の良い部分を残しつつ、新しいニーズに合った機能が追加されています。Language)の文法で書き直したものです。HTMLでは複雑な数式や化学式を表現することができなかったため、XMLの拡張性を取り込みつつ、ブラウザでも表示できるよう新たに開発されたのがXHTMLです。後発のHTML5でMathMLやSVGといった機能を埋め込んで数式や化学式の表示が可能となったため、2009年に開発が中止されました。Webで使用される各種技術の標準化を推進するために設立された非営利の標準化団体です。先述のティム・バーナーズ・リー博士が1994年に創立し、その後も率いています。数百の企業や団体が参加してWWW技術の標準化や教育活動を行っており、HTMLの仕様もこの団体によって決定されているわけです。一般に標準化の作業はとてつもない時間と手間がかかるといわれますがHTMLも例に漏れません。W3C勧告(正式にW3Cが仕様として認めること)となるまでには多くのステップが必要で、また、勧告後も間違いがあれば「第○○版」といった形で更新されていきます。まとめHTMLの歴史と関連情報を紹介しました。研究成果の共有を目的に開発された技術が、今やここまで世界中の人々からありとあらゆる目的で活用されているのは驚きですね。開発者本人であるティム・バーナーズ・リー博士もまさか数十年でこんな世界になるとは予想できていなかったかもしれません。本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。・About・プライバシーポリシ。