株式会社HUBFACTORY - 新たなつながりを作るサービス・アプリ・WEB制作会社 -
CREATE A NEW HUB
IN THE WEB SEARVICE...
PICK UP

web

WEBサイト制作講座 | HTML基礎 その1

2017.10.27

CATEGORY - web

今回からWEBサイト制作の講座みたいなものをやっていこうと思います。

第一回の今回は、「HTML基礎」です。

名前は聞いたことがある人も多いと思いますが、じゃあ、HTMLってなに?なんのためのもの?なにができるの?っていう部分まで詳しく知っている人って少ないと思うので、そこらへんについて説明していこうと思います^^

HTML基礎

1. HTMLとは?

HTMLの正式名は、Hyper Text Markup Language です。
まあ覚えなくていいですw 聞かれることもまずないですしw

じゃあ、なにをするものなのか?

“WEBページを作るための基本的なマークアップ言語”

って感じです。マークアップ言語とは、文章を構造化して、コンピュータに認識させるための言語って思っていただければいいと思います。
ふーーん。って感じだと思いますが、まあ、ふーーーんって感じです。

じゃあ、どうやってコンピュータに認識させるのか?

これは、「ここが段落でー、ここが画像でー、ここは文章でー、」とかそういうのをタグと呼ばれるもの「”<“と”>”でくくられたもの」を用いて認識させます。

2. HTML最小構成

HTMLを書いていく上で、最小限の枠組みがこちらです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>タイトルが入ります</title>
    <meta name="description" content="ページの説明が入ります">
    <meta name="keywords" content="ページのキーワードが入ります">
  </head>
  <body>
    WEBページに表示される領域です
  </body>
</html>

DOCTYPE宣言

<!DOCTYPE html>

これはHTML文書ですよー っていう宣言です。

HTML内部の構造

head と body に分かれています。
head にはページの情報など、WEBページ自体には表示されない部分を記載します。
body に記述された部分が、WEBページに表示されます。

metaタグ

メタデータ(文書に付随する情報って感じですかね。。)を扱うタグです。
主なものに下記があります。

– 文字コード
<meta charset="utf-8">

文字コードを指定します。以前は、Shift-JISとかよく指定していましたが、最近は、UTF-8しかほぼ使いません。
なので、99.9%、UTF-8 で問題ないはずですw

– ビューポート
<meta name="viewport" content="width=device-width, initial-scale=1">

なくてもいいのですが、最近はスマホでもちゃんと表示するようにしたいと思うので、これをつけとおきましょう。

– ディスクリプション
<meta name="description" content="ページの説明が入ります">

そのページの説明が入ります。

– キーワード
<meta name="keywords" content="ページのキーワードが入ります">

そのページに指定したいキーワードを指定します。この記事だったら、”HTML, 基礎, 講座”って感じでしょうか。
基本的には、SEO用で指定するメタデータですが、最近は、googleがこのキーワードを重要視してないので、あまり考慮しなくてもいいかもしれません。

タイトルタグ

<title>タイトルが入ります</title>

文字通り、そのページのタイトルが入ります。

以上が、head 内に入る最小要素です。で、body には、実際にWEBページに表示したい部分を書いていくことになります。

3. WEBページの構造について

どういうページにしたいのか、どういう機能が必要なのか、ページを見る人がどういった世代や性別なのかでデザインもだいぶ変わりますが、WEBサイトを作っていく上で、まずは構造を考えるところから始まります。

ここでは、ごく一般的で基本的な構造で説明していきたいと思います。

HTMLの構造

基本的にはこんな感じですかね。
それでは、部分ごとに説明していきましょう。

ヘッダー

ロゴやメニューなどがはいる部分です。

メイン

ここがメインコンテンツエリアです。サイドバーがあるサイトもよく見ますよね。

フッター

コピーライトとか、サブ的なコンテンツのリンクがあったりする部分です。
最近だと、ここに、各SNSへのリンクボタンを置いているサイトもよく見ます^^

こんな感じで、WEBページの構造を決めてから、コーディング作業(HTMLを記述していくこと)に移る感じになります。

4. 構造を元にHTMLでコーディング

10年以上前ですと、テーブルレイアウトというのが流行っていて、テーブルタグを使って、HTMLでデザインのレイアウトもしていた時代がありました。
現在は、レイアウトのデザインはCSSという言語で書いていくので、HTMLは構造化のみを行うというのが主流になっています^^
(※というか、それが本来のHTMLの使い方なんですけどね^^;)

では、さきほどの構造を元に基本的なHTMLを書いていきましょう!
先ほどの最小限の枠組みのbody部分に書いていきます^^

<!-- ヘッダー -->
<header>
  <h1>
    <img src="img/logo.png" alt="ロゴ">
  </h1>
  <ul>
    <li>メニュー1</li>
    <li>メニュー2</li>
    <li>メニュー3</li>
  </ul>
</header>

<!-- メイン -->
<main>
  <!-- メインコンテンツ -->
  <div>
    メインコンテンツが入ります
  </div>
  <!-- サイドバー -->
  <div>
    サイドバーが入ります
  </div>
</main>

<!-- フッター -->
<footer>
  <p>コピーライト</p>
</footer>

タグとかの説明はちょっと後にして、この文書を、拡張子 .html で保存して、

あ。ちなみに、コードをテキストエディタに書いて保存します。
(※僕は、最近だと、Visual Studio Code とか使ってます。ちょっと前までは Sublime Text でした^^ でも、最初の段階だとほんと、なんでもいいです。Windowsだと、メモ帳とかになるんですかね。今もあるのかな。)

で、ブラウザに直接ドラッグアンドドロップしてみます。
(※ブラウザはGoogle Chrome が一番よいですが、今の段階ですと、Internet Explorer とかなんでも構いませんw)

HTMLをブラウザで表示

とりあえず表示されました(^^)

HTMLは構造化の言語なので、だいたいこんな感じですw

長くなってきたので、タグの説明とかは次の記事にまわしたいと思います。

今回のポイント!

  1. HTMLはWEBページを表示させるためのマークアップ言語
  2. HTMLはWEBページ(およびその文章)を構造化させるだけ

とりあえず、こんな感じに思っておいてもらえれば大丈夫だと思います。

 

株式会社HUBFACTORY(ハブファクトリー) - 新たなつながりを作るサービス・アプリ・WEB制作会社 -

© 2014-2015 HUBFACTORY.INC

PAGE TOP