「HTML」とは何なのかを超初心者向けに解説した記事です。知らないなんて言えない・・という方はお読みください。技術的な表現はなるべく使わないようにしているので、プログラミングやWebデザインの事前知識は不要です。[テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。Webサイト制作に必須となる「HTML」を初心者向けに解説した記事です。聞いたことはあるけど、よくわからないという人はお読みください。これからエンジニアとして働きたい、プログラミングを学習したい人はぜひHTMLとは何なのか理解することが最初の一歩になるはずです。理解していきましょう。本記事は、TechAcademyのWebデザインオンラインブートキャンプのHTMLのカリキュラムをもとに執筆しています。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、Webページを作るための最も基本的なマークアップ言語のひとつです。普段、私たちがブラウザで観ているWebページのほとんどが、HTMLで作られています。『TechAcademyマガジン』を運営するキラメックス株式会社のWebサイトも、HTMLが使われています。HTML/CSSで挫折しない学習方法を動画で公開中Webページの裏側を見るWebページが「言語」で書かれているといっても、直感的にはわかりずらいですよね。画面上で右クリックをし、「ページのソースを表示」を押してみましょう。すると、以下のように英語がずらっと並んだ画面が表示されるかと思います。並んでいる英語の文字は、ソースコードと呼びWebページ内の表示や動作を命令することができます。このように、Webページの正体はHTMLタグを使って構成されている文書であり、これがブラウザで読み込まれることで、Webページが表示されるのです。ソースコードは、あらゆるWebページで見ることができるので、試しにいくつか見てみるといいでしょう。Link(ハイパーテキストリンク)ハイパーテキストとは、その名の通り、高機能なテキストのことです。高機能かというと、文書中の指定箇所にリンクを貼ることができ、ほかのページに移動することができます。Link(ハイパーテキストリンク)と言います。マークアップとは「しるしをつける」という意味ですが、これは、裏側のソ−スがHTMLタグを使って表記されていることに基づいています。HTMLタグによってタイトルや小見出し、リスト表示といった具合に、文書のなかで特定の部分に意味を持たせ、全体を構造化していきます。>で囲まれたものがタグです。HTMLの種類HTMLには「HTML」「XHTML」「HTML5」など、いくつか種類があり、使えるタグに違いがあります。使いたいタグに応じて、HTMLのバージョンを確認しておいたほうがいいでしょう。大石ゆかりソースコード、ハイパーテキストリンク、マークアップ・・・。HTMLってこんなに難しいんですか?田島悠介HTML自体は、Web上の文書みたいなもので、書籍や雑誌と同じだよ。大石ゆかりなるほど!じゃあ、書籍で言えばソースコードやリンクやマークアップは何に当たるんですか?田島悠介リンクは他のページの場所。マークアップはタイトルや見出し、ページにある画像などを指定してあげる方法のことなんだ。合わせてソースコードと言います。最後に、HTMLファイルの作り方ですが、「.html」という拡張子をつけることで、HTMLファイルであることをコンピュータが認識してくれます。index.html)以下では、HTMLのタグの中で、リンク・画像・段落分けなどよく使用するタグについて基本的な書き方を解説します。ブラウザでの実際の表示も確認できるので、初めてHTMLに触れる方は、ぜひご覧ください。リンクを表示するリンクを作成した場所へページが移動しました。リンクを作成するには<a>タグを使用します。href="リンク先へのパス">リンクを貼るテキストや画像</a>hrefの属性値(“”内)にリンク先の絶対パス(https://〜で始まるもの)あるいは相対パス(現在の位置を基準としたもの)を入力します。最後に必ず終了タグ</a>を入力します。実際に<a>タグを使用してテキストにリンクを貼ります。https://coolors.co/今回は「Coolors」というサイトへのリンクを繋げてみます。href〜の部分の””内にパスを入力します。ここではCoolorsへのリンク(絶対パス)を入力しています。画面ではこのように表示されます。テキストの部分をクリックします。リンクを作成した場所へページが移動しました。画像を表示する画像を表示させるには<img>タグを使用します。src="画像ファイルへのパス">srcの属性値(“”内)に画像の絶対パスあるいは相対パスを入力します。<img>タグには終了タグは存在しません。実際に画面に画像を表示させます。今回は”img_1.png”という名前の画像ファイルをHTMLと同じディレクトリ内にアップロードし、それを表示させます。</body></html>同じディレクトリ内に画像ファイルがある場合は、ファイル名だけを入力すると相対パスとして繋げることができます。画面ではこのようになります。指定した画像ファイルが表示されました。段落分けを行う段落を分けるには<p>タグを使用します。<p>タグの書き方<p>段落の内容</p>ひとつの段落としたい部分を<p></p>で囲みます。実際にテキストを2つに段落分けしてみます。</body></html>それぞれの文章を<p></p>内に入れます。画面ではこのようになります。前の段落と次の段落との間に、一行分の間が表示されます。HTMLで覚えておきたいタグ一覧その他サイトの基本的な構成で使用することのあるいくつかのタグを紹介します。見出しの部分に使用します。このタグの中の部分は強調され、大きく表示されます。<h1>が一番大きく表示され、<h2>→<h6>となるほどに小さな見出しになります。順序のないリストを作成するタグで、サイトのメニューなどを形成するのに役立ちます。<ul>がリスト全体を、<li>が各項目を作成します。サイト内に入力フォームを作成するタグです。入力された情報の処理はPHPなど他の場所で行います。細かくHTMLファイルをどう作るのかを知りたい、書き方を知りたい方は、HTMLの書き方の記事も合わせてご覧ください。大石ゆかりひえー!タグがたくさん出てきたんですけど。田島悠介マークアップ(目印)として使うものがタグです。大石ゆかりタグを使ってページのタイトルや見出し、表示する画像を指定して作成したものがHTMLファイル何ですか?田島悠介その通り!また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。関連する記事JSONをHTMLに埋め込む方法を現役エンジニアが解説【初心者向け】JSONをHTMLに埋め込む方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。...HTMLHTMLの特殊文字で表示できる矢印を現役エンジニアが紹介【初心者向け】HTMLの特殊文字で表示できる矢印について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。そもそも、...HTMLHTMLでファイルのダウンロードを設定する方法を現役デザイナーが解説【初心者向け】HTMLでファイルのダウンロードを設定する方法について解説します。記事を読むとさら...HTMLHTML4.01で非推奨であったインラインフレームを解説を現役デザイナーが解説【初心者向け】HTML4.01で非推奨であったインラインフレームについて、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。...HTMLHTMLでコードを表示する方法【初心者向け】HTMLについて今さら聞けない!という初心者のために、HTMLの基礎を紹介する記事です。今回は、HTMLでコードを表示する方法について解説します。...HTMLHTMLでコメントを書く方法【初心者向け】HTMLについて今さら聞けない!という初心者のために、HTMLの基礎を紹介する記事です。本記事では、これからWebデザインを勉強したいという初心者向けに「CSSとは何か」について解説します。HTMLとはの記事もあるので合わせてお読みください。本記事は、TechAcademyのWebデザインオンラインブートキャンプのCSSのカリキュラムをもとに執筆しています。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。CSSの役割はサイトの「スタイル」を決定することだよ。音声による読み上げや印刷時に関する設定もあるけれど、一番多いのはデザインやレイアウトなどの「見た目」に関する指定だね。実際のサイトで、CSSが適用されている場合とそうでない場合の違いを見てみよう。頭文字をとったものであり、スタイルシートとも呼ばれます。HTMLが、見出しやヘッダ情報などWebページの文書構造を形作るための言語であるのに対し、CSS言語は文書構造にデザインを施し、見栄えを整える役割を担っています。実際に、ブラウザでWebページを表示してみましょう。さきほど述べたように、このページはHTMLとCSSとが合わさって形作られています。試しにここからCSSを除き、文書構造のみを表示させてみましょう。Webページの読み込みがうまくいかない場合など、このような画面が表示されたことがある人もいるのではないでしょうか。これにCSSがきちんと適応されると、さきほどのようなきれいなデザインのWebページが表示されるのです。見出しと文字がただ順番に書かれただけになって、画像の位置や大きさもなんだか変わっちゃいましたね。これらのレイアウトやデザインを指定しているのがCSSになるんだ。今見ているのは、HTMLだけで構成された状態の文書だね。見やすいページを作るのに、CSSはとても大事なんですね。最後に、CSSファイルの作り方をご紹介しましょう。ファイル名に拡張子の「.css」をつけることで、CSSファイルとしてコンピュータが認識してくれます。CSSの基本的な説明は以上です。以下、html形式のファイルを用意します。いった一文を入れます。することで、「style.css」というファイルを読み込んで書いたCSSファイルを適用してくれます。下のような緑色の背景に白色の文字を表示させる方法を書いてみます。htmlファイルを用意しましょう。上で説明したように、cssの適用を<head></head>内に記述し、<body></body>内に表示させる文言を書いていきます。続いて、CSSファイルの編集です。「main」と「text」という名前のクラスを用意したので、CSSで幅や配色などを指定していきます。それぞれ箱分けするとこのような形になっています。最初はこれがイメージできず、自分のしたいレイアウトに出来ないことが多々ありますが、やっていく中で慣れていくはずです。CSSに関する基本的な構造だよ。“main”の部分、”text”の部分それぞれに色や大きさの指定をしているんですね。この”.main”,”.text”のようなスタイルを適用させる範囲の指定を「セレクタ」というんだ。