Html入門

HTML入門
〜基礎知識をつけよう〜
1

勉強会〜HTMLの基礎〜
①HTMLとは？
②HTMLの書き方
-a.htmlファイルの作り方
-b.html全体構成
-c.htmlにタグをつけてみよう
③HTML問題
④HTML総括
2
アジェンダ

4
ー Webページを作るための最も基本的なマークアップ言語のひとつ（XML、
HXMLなどもある）
ー HyperText Markup Language（ハイパーテキストマークアップランゲー
ジ）の略
ハイパーテキスト＝高機能なテキスト
マークアップ＝印をつける
HTMLとは？

5
何がハイパーテキスト？
ハイパーリンクを埋め込むことのできる高機能なテキスト
ハイパーリンクとは、ウェブページで下線の付いたテキストなどをクリックすると別ページへ移動するリ
ンクのこと。
何がマークアッップ？
文字に印（タグという）をつけていくことでそれぞれ意味づけをして、画像や表を見れるようにすること
ができる。
っていうことなので、、
WEBページから別のウェブページにリンクをはったり、WEBページ内に画像・動画・音声などのデータ
ファイルをリンクで埋め込むことができる。
HTMLとは？

6
もう少しわかりやすく言うと、、
テキストに印（以下タグ）をつけて、それぞれの部分が何であるのか示したテキストファイルのこと。
それぞれのタグは＜ここから見出し＞＜ここまで見出し＞というようにあらかじめ決められていて、
HTML５では約１００種類ある。
HTMLを学ぶということは、タグの意味を知り、タグの付け方のルールを覚えることみたいなもの。
HTMLとは？

7
そもそも、なぜHTML必要？
コンピュータが理解できるようようにするため。
予め決められた書式に沿ってファイルをサーバに設置することにより、
Webブラウザ側で書式に則ったレイアウトで表示することができるから。
HTMLとは？

9
HTMLの書き方
a. HTMLファイルの作り方
b. HTML全体構造
c. HTMLにタグをつけてみよう

1
a.htmlファイルの作り方
何も考えずにとりあえず下記全てコピーしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
文章の内容
</body>
</html>

1
① macのテキストエディタを開く (TextEdit)
②先ほどのソースをコピペして、文章の内容部分を好きな言葉に変え
てくださいませ。
③ index.htmlという名前でファイルを保存する「.html」という拡張
子をつけることで、HTMLファイルであることをコンピュータが認識
してくれます。
（「index」部分は何でもいいです。例「gig.html」）

1
保存したファイルをプラウザで開くと右
の画像のような結果が見られると思いま
す！
あとは先ほど作ったファイルにHTMLタ
グを用いて書き換え、保存、プラウザの
リロードで実際に自分が書いた表示結果
が見れますね。
これでHTMLファイルを作成、練習する
環境が整ったので実際にいじり倒して行
きましょう。

1
b.htmlの全体構成
<!DOCTYPE html> HTML5で制作されたファイルであるこ
とをまず宣言。
<html lang=”ja”> html要素内で使われている言語が日本
語であることを示す。
<head> 画面には出力されないけれども、このhtmlファイル
に必要なタイトルや文字コード、外部のファイル読み込み
（CSS,JavaScriptなど）Htmlファイルで最初に読み込まれる
重要な部分。
<body> コンテンツを記載する部分。
↑基本的にはこの＜body＞タグの中に文章をソースコードを
書いていきます！
○ 文字とアルファベットや記号を組み合わせて書く。
○ 複雑に見えるが、１つ１つおさえていくと、難しい話はほ
とんどない。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>HTML5</title>
</head>
<body>
文章の内容
</body>
</html>

1
画面に表示されるのは<body></body>の部分のみ！基本構文込みの全ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Workship MAGAZINE</title>
</head>
<body>
<h1>LPのトレンドとは？</h1>
<p>
近年のランディングページデザインによく見
られるデザインパターンを3つ<br>海外のWebサイトを例え
にご紹介します。
</p>
</body>
</html>

1
タグはテキストの特定の範囲につけますが、前のタグを開始タグ、後ろのタグを終了タグと言います。こ
の時、開始タグと終了タグの間に挟まれいるテキストは要素内容、または単に内容と言います。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Workship MAGAZINE</title>
</head>
<body>
<h1>LPのトレンドとは？</h1>
<p>
年のランディングページデザインによく見られるデザインパター
ンを3つ、海外のWebサイトを例えにご紹介します。
</p>
</body>
</html>
開始タグ
要素内容
終了タグ

1
c.htmlにタグをつけて見よう
1. h1〜h6
2. p
3. div
4. table
5. a
6. header
7. nav （ul,ol,li）
8. main
9. footer
先ほどHTML５のタグの種類は現時点で約１００種類程あるとお話しましたが、実際によく使うタ
グはその中でもごく一部です。
その中でも特によく使うタグを実際にプラウザに表示して一つ一つ確認しながら進めて行きましょ
う。今回説明するタグは全部で９つです。

1
実際にタグをつける前に、タグがないとどのように表示されのか確認しておきましょう。
下の画面をデフォルトと考え次ページ以降、実際にタグつけていきたいと思います。
タイトル
Webや出版物などの形式にかかわらず、情報をわ
かりやすく整頓する作業は良いユーザーエクスペ
リエンスを提供するために欠かせない作業です。
特にWebサイトやアプリの情報設計はその重要度
が注目されています。
今回は、数多く存在するデータの整理法のなかで
も、最も効率的であるとされているLATCHの原則
について話したいと思います。

1
h = heading(見出し)の意味です。文章の見出し(章題)を記述します。見出しのレベルは h1～h6 まであ
り、h1 が一番大きな見出し、h6 が一番小さな見出しになります。

1
p ＝ P は Paragraph(段落)の略です。<p>～</p> でひとつの段落を示します。

2
div = divisition 略 divで囲った部分にスタイルを与えれる。
今までのタグと違い、div単体では何も表さない。あらゆるものを囲んで一まとまりにできる。

2
<table>～～～</table>
この要素で囲んだ部分はテーブル（表）であることを宣言
<tr>～～～</tr>
table要素の中に書く。表の横一列を表しています。
<td>～～～</td>
tr要素の中に書く。この要素で囲んだ部分は表の１つの部屋を表していてセル
と言います。
<th>～～～</th>
trの太字にバージョンです。
table = 表を作成できるタグ以下３つ（＋１）のタグを組み合わせて表が作成できる。

2

2
a = Anchor リンクの出発点と到達点を指定するタグです。リンクの出発点ではhref属性でリンク先を指定します。
開始タグの中に情報（属性）を書くこともある。
タグの種類によっては、開始タグの中に＋αの情報を入れる場合も。このタグの中に入れる情報は「属性」と呼
ばれる。
例えば、、
<a>~</a>はリンクを作るためのタグですが、リンク先のURLは開始タグの中にhref="リンク先のURL"という
形で書きます。
<a href=”サイトのURL”>〜</a> <a>~</a>に挟まれている部分がリンク先へ飛ぶボタンに！
↑ 半角スペース開ける
<p><a href=”https://giginc.co.jp/”>GIG ホームページ</a> に飛びます飛びます</p>

2
header = この文書のヘッダー部分を指定します。<header>～</header> で囲んだ部分がヘッダ部分
になり、この文書全体に関する指定などを書きます。（タイトル、ナビゲーションなど、）

2
nav = navigation
他のページや、ページ内のポジションへのナビゲーション情報を記述します。<ul>~</ul>は次ページで

2
リスト構造タグ<ul>、<ol>、<li>は箇条書きを行うときに使うタグです。
Unordered Listの略。
順不同のリスト番号なし
のリスト作成する時に使
います。
Ordered Listの略。
番号順に整列したリスト
を作成するときに使いま
す。
<li></li>はList Itemの略。
リストの項目を記述する
時に使います。

2
main = ページのメインコンテンツのエリア

2
footer = 通常、そのセクションの著作者に関する情報、関連ドキュメントへのリンク、著作権情報等を含めるエリア

3
HTML 問題
問題：下記ページをhtmlファイルで作成しプラウザで表示させてください。

3
HTML 総括！！
○ タグという命令を使うことにより、文字を記述したり文字の大きさを変えたり、画
像を表示することなどが出来る。
○ ただHTMLだけではただの文字、画像だけの面白くないページになるので、CSS
と呼ばれる文字やWebページの背景を変えたりと、サイトをオサレにできるHTMLの
相棒については乞うご期待！！

Good is good.
We provide opportunities to the SEKAI by fusing technology and ideas.
テクノロジーとクリエイティブでセカイをより良くする
お問い合わせはこちらから
https://giginc.co.jp/contact/

Html入門

More Related Content

Similar to Html入門

More from GIG inc.

Html入門

Editor's Notes