Webサイトを作ろう! 【 7 】HTMLソースコードの解説①

   2014/12/18   icon-clock-o読了時間:約14分26秒

前回記事 【 6 】トップページの一例 のソースコード記述例を元に、それぞれのタグを解説いたします。
※ご覧いただきやすいよう、複数行に渡るコードは合間に改行で隙間を空けている場合があります。
 実際には特に改行する必要はありませんのでご注意ください。

 目次 

基本のタグ構造

一番最初のお約束
  ∟DOCTYPE宣言
  ∟使用言語の指定 html要素 lang属性

ヘッダ情報の記述 headタグ

本文(メインコンテンツ) bodyタグ
  ∟ヘッダー headerタグ
  ∟フッター footerタグ

METAタグとtitleタグ
  ∟文字コード宣言 charset属性
  ∟スタイルシート言語の宣言
  ∟サイトの名前 titleタグ
  ∟サイトキーワード meta keywords
  ∟サイトの概要説明=スニペット meta description

CSSでスタイル装飾する

画像と大見出し
  ∟画像を設置 imgタグ
   画像にリンクを貼る imgタグとhrefタグ
   画像のalt属性
  ∟タイトル見出し hタグ

基本のタグ構造

タグの構成
どんなページでも基本的にこのような構造になっています。
また逆に、最低限この記述さえあればサイトとしての体裁が整うということでもあります。

一番最初のお約束

ブラウザ(Webページを表示しているInternet ExplorerとかGoogle ChromeとかFirefoxとか)に対して行う
「 こういうつもりで作ってるんで、そっちもそのつもりで頼みます 」という事前説明。
最初はよく分からないままでもコピーして使っていただければ大丈夫ですヾ(=・ω・=)

DOCTYPE宣言

ドキュメントタイプを宣言します。この場合は
「 HTMLという言語を使って表示命令を出します、4.01というバージョンの規則に従います 」という宣言。

使用言語の指定 html要素 lang属性

ここに書かれているhtml文書の言語は ja(japanese) 、つまり日本語のテキストですよーという宣言。
サイトを自動翻訳する機能をもつブラウザなどに言語を判断してもらうために記述します。
ページ全体にこの宣言を有効にするため、記述の一番最後に 閉じタグ</html> を記述します。
 ※【 6 】トップページの一例 ソースコード例の最後の行を参照。
 DOCTYPE宣言、METAタグ、HRタグなどの例外を除き、
 ほぼ全てのタグは開始タグと閉じタグがセットで記述されて初めて動作します。
 記述の際には閉じタグを忘れないように気をつけましょう。

ヘッダ情報の記述 headタグ

ヘッダ情報には『 必ず記述しておくべきもの 』と『 記述しておいたほうが良いもの 』を書きます。
たくさんのコードを記述するサイトでは『 必ず記述しておくべきもの 』も色々と出てきますが、
今回のような簡単なコードであれば『 記述しておいたほうが良いもの 』くらいなので、
最悪の場合は何も書かなくてもページは表示されます。
なのでここでは簡単な説明のみとして、ちょっとした呪文だと思って唱えておいてください。
もちろん記述に慣れてきたらガンガンこだわって書いてみてくださいね d(・∀・*)
今回使ったヘッダ情報については METAタグとtitleタグ 、CSSでスタイル装飾する をご覧ください。

本文(メインコンテンツ) bodyタグ

bodyタグの中に文章や画像といったサイトの主となる内容を記述していきます。
ここに記述したものが実際にWeb上に表示されて皆さんの目に触れることになります。

ヘッダー headerタグ

トップ画像や最上部のメニュー(グローバルメニューなど)を記述することが多いです。
ヘッダ情報 head とは別なので間違えないようにご注意。

フッター footerタグ

ヘッダーと反対にページの一番下の部分に当たります。
基本的にはコピーライト表記を記述しています。
ここに会社概要や特定商取引法表示などの最下部メニューを置いているサイトもありますね。

METAタグとtitleタグ

METAタグはそのページの仕様や挙動を宣言・指定するもので、様々な種類があります。
titleタグはそのまま、サイトのタイトル(名前)を記述するものです。
これらは 開始タグ<head>と 閉じタグ</head> の間に記述します。

文字コード宣言 charset属性

 Shift_JIS(シフトジス)という文字コードを使うという宣言。文字化けを防ぎます。
 文字コードには上記の Shift_JIS の他に EUC-JP や UTF-8 などがあります。

スタイルシート言語の宣言

 CSS(カスケーディングスタイルシート) というスタイルシート言語を使いますという宣言。
 色変更、枠線の表示、文字のサイズや配置といった装飾を行うためにスタイルシートを使います。
 この宣言が無くても最近のブラウザは賢く判断してくれるのですが、念のために記述が推奨されています。

サイトの名前 titleタグ

ヘッダ情報 (head)の中で唯一、目に見える文字を表示させるタグです。
検索結果やタブに表示されるサイト(ページ)の名称や説明を記述します。
お気に入り(ブックマーク)登録の際のタイトルにもなります。

【 例 】サイトマップのページ
  サイトタイトル-検索結果
  サイトタイトル-タブ

サイトキーワード meta keywords

Google検索やyahoo検索などの検索エンジンに向けて
羽を広げる孔雀のごとくアピールするための手段を SEO対策 といいます。
せっかくサイトを作るのだから多くのひとに見に来てほしい、出来るだけ検索結果の上位に表示されたい、
そんな時には数多のサイトの中からちょっとでも浮き上がるためにSEO対策をがんばってみましょう。

 Googleやyahooといった検索エンジンに出来る限り気にしてもらえるように
 サイトの内容に関連したキーワードを 『 , (カンマ)』 で区切って記述します。
 最近では検索エンジンへのアピールとしてあまり意味が無いとも言われていますが、
 やってもやらなくてもいいならやっておいた方がいいような気がするのでご紹介しておきます。
 多すぎると逆効果なので10個以下でやめておきましょう。

サイトの概要説明=スニペット meta description

これもSEO対策の一環で、検索結果に自分のサイトが表示された時に
サイトタイトルとURLの下に出てくる説明文を記述します。
上の【 サイトマップのページ 】の例で見ていただくと
『 格安パソコン修理・見積無料~ 』の部分がスニペットです。
サイト、もしくはそのページの内容について、関連する単語や情報を入れて出来るだけ簡潔に書くのがポイントです。

 全角110文字以下であればGoogleやyahooなどの検索エンジンの検索結果で
省略されること無く全ての説明文が表示されます。

CSSで装飾する

上で 『 CSS(カスケーディングスタイルシート) という
スタイルシート言語を使いますという宣言 』 を行いました。
ここで実際にCSSを記述します。

ご注意

CSSは、今回のようにhtmlファイルの中に一緒に記述するも良し、
CSSを独立したファイルとして『 index.css 』のように別に作っても良し。
今回はCSSスタイルをひとつしか適用させていないので同ファイルに記述していますが、
複数のスタイルを使用する場合には独立したCSSファイルを作ることが推奨されています。
同じCSSファイルを複数のページに適用することもできるので、複数ページを作る場合には
独立したCSSファイルを作っておくと楽ができるし、記述もすっきりします。
  ⇒【 9 】複数ページを作る

今回のようにCSSをhtmlファイルに一緒に記述する場合は<head>と</head>の間に記述します。
記述する場所を間違えると上手く適用しないのでお気をつけください。

これを実際の表示で見るとこうなります。
CSS
スタイルの名称が 『 blue 』 、背景色が 『 #0000ff(青) 』、
文字の色が 『 #ffffff(白) 』 という指定を行い、
スタイルを適用させたい場所に呼び出すことで表示が変わります。
カラーコードについては 過去記事 【 4 】テーマカラーを決める をご覧ください。

CSSはこのように予めスタイルを記述しておき、htmlの中で指定・呼び出しを行うことで適用されます。
色の変更だけではなく、背景色の幅や高さ、文字の大きさ、行の上下の空白など
様々な要素を指定することができます。
詳しくは スタイルシート(CSS)の解説 にて。

画像と大見出し

見出し
この部分をhtmlで見るとこんな感じ。

それぞれのタグを順に説明していきます。

画像を設置 imgタグ

最初の img src= で画像の在り処を指定し、次のalt属性で画像のタイトルを書きます。

画像の在り処の指定方法は2種類あります。
(1) URLをそのまま記述( http://www.website.com/image/top.gif )
 画像の在り処をURLで記述します。

(2) ディレクトリを記述( image/top.gif )
 今作っている index.html を基本階層として、そこから見て画像がどこにあるか記述します。
 何かでサーバーのお引越しやドメインの変更をするとURLが変わってしまい、
 全ての画像リンクも書き直す羽目になって、使っている画像が多いほど大変なことになります。
 ディレクトリの記述であればURLよりも記述が短くて済みますし、
 階層が変わらなければ指定先が変わることもないので
 できるだけこちらで記述しておくと良いと言われています。

 当然ですが階層を間違えると画像は表示されません。
 また、アップロードされていない(自分のPCの中にあるだけの状態の)画像を指定しても表示されません。
 新しい画像を準備したらFFTPソフトによるアップロードを忘れないように気をつけましょう。

画像にリンクを貼る imgタグとhrefタグ

ついでに画像をクリックするとリンク先に移動するタグもご紹介します。

リンクタグの中に画像タグを入れているだけですね。
各ページからトップページへ戻るためにトップ画像やバナーにリンクを貼っているサイトも多いです。

画像のalt属性

alt=”トップ画像” のように、画像のタイトルや説明を記載するのがalt属性です。
スクリーンリーダー (画面読み上げソフト)を使用している目の不自由な方や、
テキストのみを表示させるブラウザを使用している方、画像を非表示設定にしている方に向けて
画像が見えなくても、そこに何を置いているのかを伝えるために設定します。

タイトル見出し hタグ

h1からh6までが見出しタグとして存在します。
h1 がフォントサイズの大きな大見出し。
h2~h6 が小見出しで、順にフォントサイズが小さくなります。

見出しに記述された単語や文章は、検索エンジンからも「見出しにしてるってことは大事なところなのかな?」と
気にしてもらえることがあるので、出来るだけ重要度の高いキーワードを入れて見出しを記述しましょう。
また、h2の後ろにh1、といったような順序が逆の記述はしないようにご注意ください。

hタグにはフォントサイズ指定などがデフォルトで適用されます。
これをお好みのサイズや色にするためにはCSSを指定する必要があります。
このブログで言えば、h2が水色の大見出し、
左に黄緑や緑のバーが付いているものや、右サイドメニュー内のメニューバーが小見出しです。

 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket