ホームページ制作の基本であるHTMLを短期間で効率的に習得するコツは『必要なことだけ覚える』ことです。
試験を受ける訳ではないのでHTMLに関する全てを理解し、覚える必要はありません。
最低限のことだけ理解し、あとは制作しながらその都度必要なことを調べながら進めて行けば大丈夫です。
そのためにまずはホームページの中身がどうなっているか、基本的な構造を理解することが重要です。
HTMLって何？
PCでホームページを見ている時、ページ上の何もないところで右クリックをして『ページのソースを表示』をクリックしてみてください。
< >で囲まれたアルファベッドがたくさん並んだページが表示されます。
例えば、誰もが一度は利用したことがあると思いますが、検索、オークション、ニュース他多数のサービスを提供している超メジャーな超巨大サイト、『Yahoo! Japan』さんのソースを覗かせてもらうと、下の画像のような文字列が出てきます。
これがHTMLで書かれた文書です。
< >で囲まれた文字をHTMLタグと言います。
ブラウザからホームページ見る際には< >で囲まれた文字は表示されません。
上の画像のような文字列が書かれたファイルをブラウザから見ると、普段目にするようなホームページになります。
このように、皆さんが普段目にしているホームページは全てHTMLと言う言語で書かれています。
HTMLとは、ブラウザに「ここにこの文字を表示して、ここにこの画像を表示する」等の命令をするための言語と考えておいてください。
一般的なホームページにおけるHTMLの基本形
上にあるYahoo! Japanさんのような巨大なサイトのソースには膨大な量の文字列が書いてあり、これからHTMLを勉強する人には何が書いてあるかサッパリわからないと思います。
ですが、ホームページを構成するHTMLには基本の形があり、全てのホームページがHTMLの基本形に従って作られています。
以下がホームページを作る際のHTMLの基本の形です。
<!DOCTYPE html>
<html lang="ja">
<head>
（タイトル、ページの説明、スタイルシート等を書く）
</head>
<body>
（ブラウザから見られる部分、ページ内容を書く）
</body>
</html>大きなサイトの膨大な量のコードもこの形に従って書かれています。
HTMLタグは、< >で始め、</ >で括り、その中に内容を書きます。
一番上に書かれている、<!DOCTYPE html>は「これはHTMLのファイルですよ」と言う意味程度に考えてください。
その下の行から始まる<html lang=”ja”>～</html>の中に具体的なホームページの内容を書きます。
この辺は深く考えずに毎回コピペしていれば大丈夫です。
全体をざっくり見てみると、<html>～</html>の中には<head>と<body>があるだけです。
<head>~</head>内に書かれた文字はブラウザから見ることはできません。
ホームページとしてブラウザに表示される部分は<body>～</body>の中になります。
それでは、<head>、<body>それぞれの中身について簡単に説明します。
<head>タグの中身の基本形
まずは<head>タグの中身について説明します。
上に、<head>タグの中身はブラウザからは見えないと書きましたが、それでは何が書かれているのでしょう？
簡単に言うと<head>タグの中には『ホームページの情報』が書かれています。
文字コード、タイトル、サイトの説明、スタイルシートの指定等を<head>タグ内に書きます。
最低限書いておいた方が良い<head>タグ内の基本の形が以下です。
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ホームページのタイトル</title>
<meta name="description" content="ページ内容の説明">
<link rel="stylesheet" href="スタイルシート">
</head>色々書かれていて難しそうに感じるかもしれませんが、内容を理解すれば難しくありません。
一つ一つ簡単に説明します。
<meta charset="utf-8">
文字コードの指定です。
上の例では「このホームページはUTF-8と言う文字コードで書かれています」と言う意味になります。
日本語が表示できる文字コードには『Shift-JIS』、『UTF-8』、『EUC-JP』がありますが、ホームページを作る場合は『UTF-8』を使用しておけば間違いありません。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
訪問者がマイクロソフト社の『Internet Explorer』と言うブラウザを使用している場合の表示崩れを防止するために書きます。
深く考えずにコピペで常に書いておいてください。
<meta name="viewport" content="width=device-width,initial-scale=1">
ホームページの横幅や表示倍率の指定が書かれています。
スマホ、タブレット、PCとホームページを見るためのデバイスは色々ありますが、画面サイズの異なるどのデバイスから見ても適切に表示されるように記入します。
画面サイズに応じて一つのHTMLファイルの表示を自動的に変える『レスポンシブデザイン』を利用する際にも必要になるので、これも深く考えずにコピペで書いておいてください。
『レスポンシブデザイン』については別の機会に説明します。
<title>ホームページのタイトル</title>
<title> </title>の中にはホームページのタイトルを書きます。
<title>内に書いたタイトルは、Google等の検索エンジンの検索結果やブラウザのタブ等に表示されます。
<title>内に書いたタイトルは上の画像の赤丸で書かれた部分に表示されます。
<meta name="description" content="ページ内容の説明">
ここには一目見て何のページかわかるようにページ内容の説明を書きます。
ここに書いた内容がGoogle等検索エンジンの検索結果に表示されるので、なるべく正確な内容を、訪問者の興味を引くように書くことが重要になります。
<link rel="stylesheet" href="スタイルシート">
スタイルシートについては別の機会に説明しますが、外部にあるスタイルシートを読み込む際に記述します。
htmlファイルと同じディレクトリにある「style.css」と言うスタイルシートを読み込む場合、
<link rel=”stylesheet” href=”style.css”>となります。
常に書いておいた方が良い、基本的な<head>タグの中身は以上です。
<body>タグの中身の基本形
次に、<body></body>の内側について説明します。
ホームページとしてブラウザから見える部分を<body></body>の中に書きます。
オーソドックスなページの場合、<body>タグの中身の基本形は以下のようになります。
<body>
<header>
<h1>サイトのタイトルやロゴ</h1>
<nav>
<ul>
<li>メニュー１</li>
<li>メニュー２</li>
<li>メニュー３</li>
</ul>
</nav>
</header>
<main>
<h1>ページタイトル</h1>
<article>
<h2>サブタイトル</h2>
<p>文章文章・・・・</p>
</article>
</main>
<fotter>
フッターの内容
</fotter>
</body>上のコードをブラウザで表示すると位置関係は下の画像のようになります。
普段目にする機会が多いオーソドックスな形のホームページです。
<header>の中にタイトル、ロゴとメニュー、<main>の中にページ内容、<footer>の中にはコピーライト表記等を書きます。
位置関係、幅や文字の大きさ、色、並び順等はスタイルシートで調整しますが、<body>タグの中身の基本はこんな感じです。
メニューを左右どちらかに配置したりページ一面に画像を配置したり、ホームページのレイアウトは色々ありますが、パターンはそんなに多くありません。
どのような形のホームページでも基本的には<body>の中の構造は似たようなものです。
<body>の中のタグの順序やスタイルシートによる装飾で見た目が変わるだけです。
レイアウトのパターン毎にいくつか自分用のHTMLファイルの基本テンプレートを用意しておけば、どんなレイアウトのホームページ制作もスムーズに出来るようになります。
まとめ（HTMLファイルの基本形）
それでは、以上を踏まえてホームページ全体の基本的なコードを書いてみたいと思います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ホームページのタイトル</title>
<meta name="description" content="ページ内容の説明">
<link rel="stylesheet" href="スタイルシート">
</head>
<body>
<header>
<h1>サイトのタイトルやロゴ</h1>
<nav>
<ul>
<li>メニュー１</li>
<li>メニュー２</li>
<li>メニュー３</li>
</ul>
</nav>
</header>
<main>
<h1>ページタイトル</h1>
<article>
<h2>サブタイトル</h2>
<p>文章文章・・・・</p>
</article>
</main>
<fotter>
フッターの内容
</fotter>
</body>
</html>これだけです。
コンテンツのたくさんある大きなページの場合にはたくさんのコードが書かれていてわかりにくい気がしますが、コードの基本的な形は全て同じです。
<head>と<body>が並んでいるだけです。
これに内容をつけたしたりスタイルシートで装飾していくことでホームページが作れます。
このように、内容を書き換えるだけでホームページが作れる自分なりの基本テンプレートを作っておき、コピペして内容を変更していくことでスムーズにホームページが制作できます。
<body>タグの説明の際にも書きましたが、新しいレイアウトのホームページを作るときには常に基本の状態を保存しておき、テンプレートとして蓄積して行くことで色々なレイアウトのホームページ制作に対応できるようになります。
コメント