Pages - Menu

▼

Pages - Menu

▼

Pages

▼

2019年8月2日金曜日

HTMLとは【初心者向け】 「HTML」

勉強の為に転載しました。
https://techacademy.jp/magazine/4843?utm_source=meetup&utm_medium=email&utm_campaign=20190802

「HTML」とは何なのかを超初心者向けに解説した記事です。今さら知らないなんて言えない・・という方はお読みください。技術的な表現はなるべく使わないようにしているので、プログラミングやWebデザインの事前知識は不要です。
TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。
Webサイト制作に必須となる「HTML」を初心者向けに解説した記事です。
聞いたことはあるけど、よくわからないという人はお読みください。
これからエンジニアとして働きたい、プログラミングを学習したい人はぜひHTMLとは何なのか理解することが最初の一歩になるはずです。ぜひ理解していきましょう。

本記事は、TechAcademyのWebデザインオンラインブートキャンプのHTMLのカリキュラムをもとに執筆しています。

なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

目次


HTMLとは

HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページを作るための最も基本的なマークアップ言語のひとつです。
普段、私たちがブラウザで観ているWebページのほとんどが、HTMLで作られています。
たとえば、『TechAcademyマガジン』を運営するキラメックス株式会社のWebサイトも、HTMLが使われています。
キラメックス

Webページの裏側を見る

Webページが「言語」で書かれているといっても、直感的にはわかりずらいですよね。
画面上で右クリックをし、「ページのソースを表示」を押してみましょう。
ソースを表示

すると、以下のように英語がずらっと並んだ画面が表示されるかと思います。
HTML
並んでいる英語の文字は、ソースコードと呼びWebページ内の表示や動作を命令することができます。
このように、Webページの正体はHTMLタグを使って構成されている文書であり、これがブラウザで読み込まれることで、Webページが表示されるのです。
ソースコードは、あらゆるWebページで見ることができるので、試しにいくつか見てみるといいでしょう。

Hyper Text Link（ハイパーテキストリンク）

ハイパーテキストとは、その名の通り、高機能なテキストのことです。
どう高機能かというと、文書中の指定箇所にリンクを貼ることができ、ほかのページに移動することができます。この機能を、Hyper Text Link（ハイパーテキストリンク）と言います。
ハイパーリンク

また、マークアップとは「しるしをつける」という意味ですが、これは、裏側のソ−スがHTMLタグを使って表記されていることに基づいています。
HTMLタグによってタイトルや小見出し、リスト表示といった具合に、文書のなかで特定の部分に意味を持たせ、全体を構造化していきます。
タグ
< >で囲まれたものがタグです。

HTMLの種類

HTMLには「HTML」「XHTML」「HTML5」など、いくつか種類があり、使えるタグに違いがあります。使いたいタグに応じて、HTMLのバージョンを確認しておいたほうがいいでしょう。

大石ゆかり
ソースコード、ハイパーテキストリンク、マークアップ・・・。HTMLってこんなに難しいんですか？
田島悠介
HTML自体は、Web上の文書みたいなもので、書籍や雑誌と同じだよ。
大石ゆかり
なるほど！じゃあ、書籍で言えばソースコードやリンクやマークアップは何に当たるんですか？
田島悠介
リンクは他のページの場所。マークアップはタイトルや見出し、ページにある画像などを指定してあげる方法のことなんだ。合わせてソースコードと言います。

HTMLファイルの作り方

最後に、HTMLファイルの作り方ですが、「.html」という拡張子をつけることで、HTMLファイルであることをコンピュータが認識してくれます。（例 index.html）

以下では、HTMLのタグの中で、リンク・画像・段落分けなどよく使用するタグについて基本的な書き方を解説します。ブラウザでの実際の表示も確認できるので、初めてHTMLに触れる方は、ぜひご覧ください。

リンクを表示する

リンクを作成した場所へページが移動しました。
リンクを作成するには<a>タグを使用します。

<a>タグの書き方

<a href="リンク先へのパス">リンクを貼るテキストや画像</a>
hrefの属性値(“”内)にリンク先の絶対パス(https://〜で始まるもの)あるいは相対パス(現在の位置を基準としたもの)を入力します。
最後に必ず終了タグ</a>を入力します。

使用例

実際に<a>タグを使用してテキストにリンクを貼ります。
https://coolors.co/
今回は「Coolors」というサイトへのリンクを繋げてみます。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <a href="https://coolors.co/">リンク</a>
  </body>
</html>
a href〜の部分の””内にパスを入力します。ここではCoolorsへのリンク(絶対パス)を入力しています。
画面ではこのように表示されます。テキストの部分をクリックします。
リンクを作成した場所へページが移動しました。

画像を表示する

画像を表示させるには<img>タグを使用します。

<img>タグの書き方

<img src="画像ファイルへのパス">
srcの属性値(“”内)に画像の絶対パスあるいは相対パスを入力します。
<img>タグには終了タグは存在しません。

使用例

実際に画面に画像を表示させます。
今回は”img_1.png”という名前の画像ファイルをHTMLと同じディレクトリ内にアップロードし、それを表示させます。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <img src="img_1.png">
  </body>
</html>
同じディレクトリ内に画像ファイルがある場合は、ファイル名だけを入力すると相対パスとして繋げることができます。
画面ではこのようになります。
指定した画像ファイルが表示されました。

段落分けを行う

段落を分けるには<p>タグを使用します。

<p>タグの書き方

<p>段落の内容</p>
ひとつの段落としたい部分を<p></p>で囲みます。

使用例

実際にテキストを2つに段落分けしてみます。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
    <p>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </body>
</html>
それぞれの文章を<p></p>内に入れます。
画面ではこのようになります。
前の段落と次の段落との間に、一行分の間が表示されます。

HTMLで覚えておきたいタグ一覧

その他サイトの基本的な構成で使用することのあるいくつかのタグを紹介します。
タグ役割説明
<h1>-<h6>見出しを作成見出しの部分に使用します。このタグの中の部分は強調され、大きく表示されます。
<h1>が一番大きく表示され、<h2>→<h6>となるほどに小さな見出しになります。
<ul>・<li>順番のないリストを作成順序のないリストを作成するタグで、サイトのメニューなどを形成するのに役立ちます。
<ul>がリスト全体を、<li>が各項目を作成します。
<form>入力フォームを作成サイト内に入力フォームを作成するタグです。
入力された情報の処理はPHPなど他の場所で行います。

もっと細かくHTMLファイルをどう作るのかを知りたい、書き方を知りたい方は、HTMLの書き方の記事も合わせてご覧ください。

大石ゆかり
ひえー！タグがたくさん出てきたんですけど。
田島悠介
マークアップ(目印)として使うものがタグです。
大石ゆかり
タグを使ってページのタイトルや見出し、表示する画像を指定して作成したものがHTMLファイル何ですか？
田島悠介
その通り！

また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。
[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。

関連するキーワード

時刻:

0 件のコメント:

コメントを投稿