Html講習会資料

フリュー株式会社　就業体験

HTML 講習会
ソフトウェア開発部　 H(HTML) チーム

はじめに

本日の内容

1.HTML って何？
2.HTML で WEB ページを作成するには？

HTML って何？
普段よく見ている WEB ページ↓↓

HTML って何？
右クリックで「ページのソースを表示」をしてみると…

HTML って何？
こんな文章が出てきます。

HTML って何？
これこそが HTML です！
この文字の羅列によって WEB ページが作られているのです。

<header>
ここがヘッダーです
</header>
<nav>
ここがメニュー ( ナビゲーション ) です
</nav>
<section>
<article> コンテンツ 1</article>
</ section>
<footer>
ここがフッターです
</footer>

HTML って何？
HTML のタグ

<p></p>
<section></section>
このように、 < > で囲まれているパーツを「タグ」と言います。
<xxx> テキスト </xxx> のように同じタグで囲うことで、 WEB ページ上で
表示されるようになります

HTML って何？
例

<p> これはサンプルです </p>
と書くと…↓↓

これはサンプルです
とブラウザに表示されます

※ ちなみに、 <p> は 1 つの段落であることを表します

HTML って何？
さきほどの <p></p>( 段落 ) のようなタグがたくさん用意されてい
るので、これらを利用してホームページの構造を作っていきます。

タグ
<header>
<nav>
<section>
<article>
<footer>
<aside>
<p>
<a>

用

途

ヘッダを示す
メニュー・ナビゲーションであることを示す
一つのセクションであることを示す
記事であることを示す
( ブログやニュースのエントリで使う )

フッタを示す

余談・補足情報のセクションであることを示す
ひとつの段落であることを表します。
リンクを指定するタグです

HTML って何？
 このほかにもたくさんのタグがありますが、書ききれません…
 こういうときには、 Google 検索で調べてみましょう

「 HTML タグリファレンス」など、詳しく説明があります

HTML って何？
調べてみると HTML とか XHTML とか HTML5 とか出てきて、どれ
を見ればいいの？となるかと思います。
簡単に言うと、

XHTML 　　　　従来の言語
HTML5 　　　　新しい言語

スマホサイトは基本的に HTML5 で記述しますが、 PC サイ
トでは古いブラウザのまま更新していない人でも見れるよう
に、従来の XHTML で書かれていることが多いです。

HTML で WEB ページを作成するには？

 ではさっそく、 WEB ページをつくるとしたら、何から始
めればいいでしょう？

一番最初は、デザインですね！
自分の他にデザイナーさんがいたらデザインをつくっても
らったり、
紙に簡単に描くのでもいいので、完成図を決めましょう！

サンプルとして、このようなページを作るとします。

まず、テキストエディタを用意します。

• サクラエディタ
• NetBeans

• TeraPad
etc…

など無料で使えるものや、 DreamWeaver など有償のものもあ
ります。私たちは、業務で WebStorm という IDE( エディタ、
デバッカ、コンパイラなどをまとめたアプリケーション ) を利
用しています。（有償）

エディタを開いて、下記のソースを書きます。
　※これは、決まり文句のようなものです。
<!DOCTYPE 　 html>
<html lang=“ja”>
<head>
<meta charset=“utf-8”>
<title> サイト名 </title>
</head>
<body>
ここに自分で HTML ソースを書いていきます
</body>
</html>

「 HTML5 　宣言」などでググれば OK ！

先ほどの <body></body> の間に文章を書いていきます。
<body>
TestSITE

　

HOME
BLOG
COMPANY
CONTACT
大見出し
テキストテキストテキストテキスト…
小見出し
小見出し
(C)copyright
</body>

デスクトップや任意の場所に新しくフォルダを用意し、
その中に作成したファイルを、拡張子 (. の後ろ ) を html にし
て、保存します。

先ほどの文章を、それぞれ相応しいタグで囲っていきます　
<header>
<h1>TestSITE</h1>
<nav>
<ul>
<li>HOME</li>
<li>BLOG</li>
<li>COMPANY</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
<section>
<h1> 大見出し </h1>
<p> テキストテキストテキストテキスト…
<p>
　　　　…略…
</section>
<footer>
<small>(C)copyright</small>
</footer>

ここで <></> で囲った一つ一つを、
「要素」と言います。

20

このように、 HTML タグで文書の構造を明記することを
「マークアップ」といいます。
ここでマークアップをした html ファイルを、クリックしてブ
ラウザで表示してみましょう。

ブラウザは Google Chrome がおすすめ！


TestSITE
•HOME
•BLOG
•COMPANY
•CONTACT

大見出し


小見出し


小見出し

(C)copyright

あれ？
これではデザインと
全然違うぞ？

HTML とは、 WEB ページの文章構造を明確にするためのも
のであって、デザインをするためのものではないのです。

じゃあデザインを入れるにはどうすればいいの？

CSS( スタイルシート ) を使います
。


CSS とは、 HTML で書いた WEB ページの見た目を定
義する為の言語です。
最近は HTML で WEB ページを作成するときには、ほぼセ
ットで使用します。

どうやって書けばいいの？
まず、 CSS ファイルを作成します。
テキストエディタで新しいファイルを作成し、拡張子を .css
にして、先ほど HTML ファイルを保存したフォルダに保存し
ます。

次に、先ほどの HTML ファイルの、 <head></head> の間に、一行
追加します。

<!DOCTYPE 　 html>
<html lang=“ja”>
<head>
<meta charset=“utf-8”>
<title> サイト名 </title>
<link rel=“stylesheet” type=“text/css” href=“style.css”>
</head>

…

<body>

これで、 CSS ファイルを HTML ファイルに関連付けました。
※ 作成した CSS ファイルと、 HTML で記述したファイル名が
一致していないと、関連付けられません。

CSS の書き方は、 HTML とは違います。
h1 {
color:white;
}

このように書くと、 HTML で <h1> でマークアップした文章の、
文字色が白になります。
p{
font-size:14px;
}

このように書くと、 HTML で <p> でマークアップした文章の、
文字サイズが 14px になります。

セレクタ
スタイルを適用したい HTML
を指定

の要素

h1 {
color:white;
}
プロパティ

どのスタイルを適用するかを決める

値

どのようなスタイルにするかを決める

CSS プロパティは、 HTML タグよりさらにたくさん
あります。（よく使うスタイルはそんなに多くありません
）

詳しくは Google 検索で見てみましょう。

個別にデザインを反映したいとき
p{
font-size:14px;
}
このように書くと、 <p> でマークアップした段落、全ての文字サイズが 14px に
なります。でも、ある特定の段落にだけこのスタイルを適用したい…。

そんな時は

id ・ class を使います


id とは、要素を識別するための固有の名前。

　一つの HTML ファイルで、一つしか使えません。

class とは、スタイルを適用する為につける名前。

　一つの HTML ファイル内で複数利用でき、一つの要素
　にも複数付けられる。　

デザインの為に付けるのは、 class を推奨！

HTML タグの後ろに、 id 、又は class を付けることで、その要素に名前を
付けることができます。
<p class=“largeText”> テキストテキストテキストテキ
スト… <p>

largeText という、名前を付けました
class をつけたら、 CSS でもこの class( 名前 ) に対してだけ、スタイル
を適用させることができます。
.largeText {
font-size:14px;
}
class は頭に . をつけ、 id は頭に # をつけて、 p の代わりに書きます。

CSS を使えば、最初に考えた通りのデザインを反映させることがで
きるようになります！

TestSITE
•HOME
•BLOG
•COMPANY
•CONTACT

大見出し


小見出し


小見出し

(C)copyright

完成図をきめる

HTML でマークアップして WEB ページにする

CSS で見た目を完成させる

さいごに
これで、 HTML で基本的な WEB ページが、
できるようになりました！
ここで紹介した事は、まだまだ基礎で、お仕事で使うにはまだまだ
たくさんの情報が必要ですが、
基礎がわかると楽しく覚えられると思います。
ぜひ本日の就業体験、楽しみながら学んでください！

Html講習会資料

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Html講習会資料

Similar to Html講習会資料 (20)

Recently uploaded

Recently uploaded (6)

Html講習会資料

Editor's Notes