基礎htmlについて

基礎htmlは手に入れましたか？　しかしあなたは記述の意味がよく理解できていないかも知れません。HTMLは構造記述のための文法なので、意味は明白です。HTMLの基本的なところを少しと、基礎htmlの各部位の説明をします。基礎htmlはメモ帳などのテキストエディタもしくはHTMLエディタでひらいて編集することが出来ます。

  1. 基本
  2. 基礎HTML解説
  3. 本文マークアップ実践
  4. 注意点や最終確認

基本

論理的な考え方

もしかしたら、今まであなたはHTMLを描く段階で既に「センタリングしたい」とか「ここの文字を太字にしたい」とか「ここの文字色を変えたい」と考えて、その方法を探して、一番最初に見つけたやり方をまる写しして、HTMLにペーストして、ブラウザで表示してそう見えれば成功、次の行を書く……というやり方をしてきたかもしれません。

しかしHTMLは、「意味」を伝えるための文法なので、「中央寄せ」とか「太文字」とか「赤い色」という物理的で視覚に依存した考え方はそぐいません。マークアップをしていく際は見栄えの実現については忘れてください。

「他の部分と見栄えを変えたいのは何故か？」という目的の部分がHTMLにとっては重要です。センタリングしたいのはそれが「見出しだから」であったり、文字を太字にしたいのはその部分を「強調したい」からだったり、文字色を変えたいのはそれが「他の人の言葉（引用文）だから」だったりするはずです。デザイン性は後の問題で、HTMLを作成するの段階ではブラウザでいちいち表示する必要さえありません。単にテキストを書いてるのだ、と思ってください。

コメント

<!--内容-->

<!--から-->までの内容はコメントです。ソースを参照しないと内容は見えません。<!や>と--の間にスペースや改行があったり、内容にハイフンが二つ並んだりすると、環境によってはコメントが正しく認識されず、コメントが見えてしまったり、後続の内容が見えなくなったりすることがあります。書き換えたり書き足す際は注意してください。

開始タグと終了タグ

<と>でくくったものをタグといいます。 

<em>内容</em>
em
要素名（要素型名）
<em>
開始タグ
内容
要素の内容
</em>
終了タグ
<em>内容</em>
em要素

上記の例で開始タグの<em>と終了タグの</em>で囲われている内容という文字は強調された内容であると示されています。（emは強調を表します）

HTML 4.01では、要素の存在と要素の内容の範囲（はじまりや終わり）が自明である場合に限って、タグを省略可能です（ブラウザが補ってくれます）。

省略できないはずのタグが書かれていないと、構造がちぐはぐになって、レイアウトが崩れることもあります。また、省略可能であっても、ブラウザによっては処理が異なる場合があります。覚えていないうちは、全てのタグを省略せず必ずつけるようにしたほうが、間違いがなく簡単で安全ですし、構造を考える癖をつける練習になるかと思います。

入れ子・親要素と子要素

多くの要素は複数の要素を入れ子にして使うことができます。

<p>文章の中で<em>強調する中で<strong>更に強調</strong></em></p>

ですが、なんでもかんでもいいというわけではなく、いくつか決まりがあります。

入れ子構造にする
例えば以下は間違いです 
<p>
文章の中で
   <em>強調する中で
        <strong>更に強調
</p>
        </strong>
   </em>
インライン要素の中にブロック要素は含めない
例えば以下は間違いです
<a href="/"><h1>タイトル</h1></a>
見出し要素（h1～6）・p・pre・dt・addressの中にブロック要素は含めない
例えば以下は間違いです
<p>
<ul>
 <li>リスト</li>
</ul>
</p>

<dl>
 <dt><h1>見出し</h1></dt>
  <dd>内容</dd>
</dl>
liはulかolの直下、dt・ddはdlの直下にしか登場できない
例えば以下は間違いです
<p>以下リスト</p>
<li>リスト</li>
<li>リスト</li>
ulとolの直下にはli、dlの直下にはdtとddしか登場できない
例えば以下は間違いです
<ol><p>文章</p></ol>

<ul>
 <li>リスト</li><br>
 <li>リスト</li><br>
</ul>

<dl>文章</dl>

IDとclass

基礎HTML中に、id="××"やclass="××"という部分が複数出てきますが、××の部分が要素を識別するための名前です。それによってそれぞれをデザインをしますので、不用意に書き換えないでください。

classは要素の種類や分類を現せます。同一文書内（一ページ内）で複数登場できます。（ex.一ページ内にあるグローバルナビゲーションとサブメニューとパンくずリストにnavigationというclassをつける）

IDは一意的な識別子で、同一文書内（一ページ内）で一度しか登場できません。一度しか登場しないようがないものにIDをつけます。（ex.一ページ内に複数あるナビゲーションの内、唯一のグローバルナビゲーションにGLOBAL_NAVIGATIONというIDをつける）

基礎HTMLで使われているclass
何回でも使えますが、CDPの基礎HTMLと関係ない部分で使うとデザインが克ちあう場合があり、注意が必要です
  • text
  • modori
基礎HTMLで使われているID
一切新たに登場してはいけません
  • PAGETOP
  • HEADER
  • PAN
  • MENU
  • MENU01～
  • KIZI
  • FOOTER
  • FOOTER01～

まとめ

決まりごとや覚えることが多くて大変そうに感じるかもしれません。

上で「間違いです」と指摘しているような、またはそれ以外でHTMLの不正があったとしても、ブラウザはミスを補ったり無視をして内容を表示してくれることが多いです。

けれど、ブラウザがどう補ったり無視するかの統一した決まりはありません。不正に対しエラーを返すブラウザがないとも限りませんし、CSSと組み合わせることで結果として表示がされなかったりレイアウトが崩れるなど閲覧に支障が出る可能性もあります。

日本語でも、誤字脱字があったり文法に間違いがあれば、なんとなく文脈を読みとれたとしても、読みづらいし、もしかしたら意図したこととは違う意味で伝わってしまうかもしれません。HTMLでもそれは同じです。

いきなり全て覚えるのは大変ですが、リファレンスを確認したり、できたHTMLをチェッカーで構文チェックしたりして、確認してください。

基礎HTML解説

文頭

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
このhtmlがどのような決まりにしたがって記述されているかを示しています。あなたはこれからHTML4.01 Transitionalの規則に従ってHTMLを作成します。基本的にはこの文に手を加えないでください。HTML4.01では冒頭で必ず書かなければなりません。
<html lang="ja">
html開始。<html>から</html>までの内容がHTML文書だというマークアップです。lang="ja"で、内容が日本語（ja）で書かれてあるあることを意味します。もしも日本語以外をメインに使う場合は、一文中のjaを該当する言語コードに変更してください。
<head>
head開始。<head>から</head>までの内容が、ページのタイトルや特徴など、ヘッダ情報であるというマークアップです。
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
文字コードの指定。さまざまある文字コードのなかのShift_JISを使用するという宣言です。違う文字コードを利用する場合は、一文中のShift_JISを該当する文字コードに変更してください。
<meta http-equiv="content-style-type" content="text/css">
スタイルシート言語指定。そのページ内でstyle要素かstyle属性を使わないなら削除しても構いません。
<mmeta name="viewport" content="width=device-width">
表示領域の幅をデヴァイスの幅に合わせる指定。スマートフォンなどPCより表示領域が狭い環境への対応のために用いられますが、現状配布されているCDP用のCSSの多くがそれに対応していないため、最初はコメントアウトされています。スマートフォンに対応したCSSを利用する等、モバイルフレンドリーなサイトにしたい場合はコメントアウトを削除して有効にしてください。（に追加）
<meta http-equiv="X-UA-Compatible" content="IE=edge">
IEを最新の標準モードでレンダリングさせる指定。古いIEにのみ対応しているCSSを使う場合は、よりバージョンが上のIEで崩れる可能性があり、IE=edgeを変更することで対応できる場合もありますが、そのCSSの使用自体をお勧めしません。（に追加）
<title>サイトの名前</title>
サイトの題名。必ずあなたのサイトの名前やページの題名に書き換えてください。HTML4.01では省略不可で必ず書かなければなりません。ブラウザの上部やタブに表示されたり、ブックマーク（お気に入り）に登録する際の名前などにも用いられます。分かりやすく簡潔な指定が好ましく思われるでしょう。
<link rel="stylesheet" type="text/css" href="csstemplate/style.css">
該当のhtmlファイルから見て、同じ階層にあるcsstemplateフォルダに入っているstyle.cssを呼び出す指定です。あなたが新しくフォルダを作成したなど階層によっては変更する必要があります。
他の<link>や<meta>など
必要に応じて、<link>（RSSやFaviconの導入など）や<meta>（概要やキーワードの指定や検索ロボットのクロール制限など）を追記したり、JavaScriptの読み込みなど行ってください。
</head>
head終了。
<body>
body開始。<body>から</body>までの内容は、実際に表示される部分です。index.html(あるいはそれに準ずるファイル）のみ、<body id="INDEX">にします。
<div id="PAGETOP">
サイト内容全体に関する唯一のグループを開始します。ちなみにTOPへの戻りリンク先はここを指しています。
<div>から</div>までの内容はグループ化されます。同名のIDを持ったグループは一つの文書内（一ページ内）に複数登場できません。

ヘッダーブロック

<div id="HEADER">
ヘッダー情報に関する唯一のグループを開始します。
<h1>Your site title</h1>
サイトの題名。<h1>から</h1>までの文言はHTML文章中で最も重要で大きな見出しであることを意味します。必ずあなたのサイトの名前に書き換えてください。
以下ロゴ画像にする場合のサンプル 
<h1><img src="logo.gif" alt="サイト名"></h1>
logo.gifには画像パス（URL)、サイト名には貴サイトのサイト名を代入してください。alt属性の値は画像が表示されないときや非グラフィカルブラウザでの閲覧時に参照され、HTML4.01では必須属性のため、省略不可です。
<ul id="PAN">
パンくずリスト。今サイト内のどこにいるかをツリー構造で示します。
<li>index</li>
あなたのサイトの最初のページ（index）から編集中のページ（htmlファイル）までに辿るページを羅列してリンクしていきます。パンくずリストはページごとに異なります。あなたのサイトにあわせて変更する必要があります。
</ul>
パンくずリスト終了
</div>
ヘッダー情報のグループ終了
<hr>
<hr>は、罫線（水平線）を引きます。HTML4.01では特に論理的に区切りであるというような意味を持ちませんが、人間の視覚的に一区切りつけられます。

メニューブロック

<div id="MENU">
サイトメニューに関する唯一のグループを開始します。
<h2>menu</h2>
MENUの題名。<h2>から</h2>までの文言はHTML文章中で<h1>に次いで2番目に重要な見出しであることを意味します。
<ul>
menuリスト開始。
<li id="MENU01" class="menu-on"><a href="index.html">index</a></li>
メニューにはひとつひとつ名前（ID）が付けられ、順にMENU01、MENU02、MENU03……となります。項目を増やす場合は、MENU05、MENU06…と続きます。また、編集中のページ（htmlファイル）のメニューには、class="menu-on"を記述します。メニューはサイトにより異なりますので、あなたのサイトにあわせて内容を変更したり項目を増減する必要があります。
以下メニュー項目を画像にする場合のサンプル 
<li id="MENU01"><a href="index.html"><img src="index.gif" alt="インデックス"></a></li>
index.gifには画像パス（URL)、インデックスにはメニュー名を代入してください。alt属性の値は画像が表示されないときや非グラフィカルブラウザでの閲覧時に参照され、HTML4.01では必須属性です。
以下メニュー項目を増やした場合のサンプル 
<li id="MENU01" class="menu-on"><a href="index.html">index</a></li>
<li id="MENU02"><a href="sample.html">sample</a></li>
<li id="MENU03"><a href="sample.html">sample</a></li>
<li id="MENU04"><a href="sample.html">sample</a></li>
<li id="MENU05"><a href="tuika1.html">追加1</a></li>
<li id="MENU06"><a href="tuika2.html">追加2</a></li>
メニュー項目を減らす場合は<li>から</li>までの一行ずつを削除します。
</ul>
menuリスト終了
</div>
サイトメニューのグループを終了
<hr>
罫線

記事ブロック

<div id="KIZI">
各ページのメイン内容（記事）全体に関する唯一のグループを開始します。
<h2>このテンプレートについて</h2>
メイン内容の個々の記事のタイトル。
<div class="text">
メイン内容の個々の記事のグループです。このdivはh2要素の直下から開始し、次のh2要素まで続きます。
記事のタイトルに対応した記事内容
記事の文章（内容）を書きます。⇒詳細
<ul class="modori">
ページの一番上へ戻るリンクのリスト（modori）開始。この部分はdiv.textの末尾に位置し、ワンセットで記述してください。
<li><a href="#PAGETOP">TOP</a></li>
ページの一番上へ戻るためのリンク。
</ul>
modori終了
</div>
個々の記事のグループの終了。
<hr>
罫線
<h2>～<hr>
記事が複数ある場合は<h2>から<hr>までをリピートします。
</div>
メイン内容（記事）全体のグループ終了。忘れないようにしてください。

フッターブロック

文末

</div>
サイト内容全体のグループ終了。忘れないようにしてください。
</body>
body終了。
</html>
html終了。

本文マークアップ実践

必要なのは、見出しとその内容です。CDPを使うにあたってとりあえずそこを意識してください。

実践

  1. <div id="KIZI">以降から、記事ブロック終了の</div>のあいだにある記述を消します。
  2. 以下のコードを書き込みます。 
    <h2></h2>
<div class="text">

<ul class="modori">
 <li><a href="#PAGETOP">TOP</a></li>
</ul>
</div>
<hr>
  3. どんな記事を書くか、見出しを考えてください。思いついたら書き込みます。記事内容を書いてから考えても構いません、次の項目を見てください。 
    <h2>「○×」の映画を見た感想</h2>
<div class="text">

<ul class="modori">
 <li><a href="#PAGETOP">TOP</a></li>
</ul>
</div>
<hr>
  4. 記事に書きたい文章を考え、<div class="text">の直後から書きます。 
    <h2>「○×」の映画を見た感想</h2>
<div class="text">

▲月■日に友達と、先日放映開始した「○×」を見に行きました。
ネタバレしてるので、内容を知りたくない人は気をつけてください。

あらすじ
ある嵐の日に助けた王子に恋をした人魚姫
失恋すると泡になるという条件で、人魚姫は人間の足を手に入れる
しかし王子は隣国の姫との結婚が決まっていて、人魚姫は泡になって消える

原作との相違点
・AがBだった
・BがCじゃなかった

感想
私はAがBだったことにびっくりしました。帰り道で読んだ「雑誌名」には
『AがBなのはCの演出において失敗だった』って書いてあったけど、私は面白いと思います。

<ul class="modori">
 <li><a href="#PAGETOP">TOP</a></li>
</ul>
</div>
<hr>
  5. 文章の構造を考え、その文字列が文中においてどんな要素であるか考えます。 
    <h2>「○×」の映画を見た感想</h2>
<div class="text">

<段落> ▲月■日に友達と、先日放映開始した「<話題> ○× </話題>」を見に行きました。 </段落>
<段落> <強調> ネタバレしてる </強調> ので、内容を知りたくない人は気をつけてください。 </段落>

<見出し> あらすじ </見出し>
<順番1> ある嵐の日に助けた王子に恋をした人魚姫 </順番1>
<順番2> 失恋すると泡になるという条件で、人魚姫は人間の足を手に入れる </順番2>
<順番3> しかし王子は隣国の姫との結婚が決まっていて、人魚姫は泡になって消える </順番3>

<見出し> 原作との相違点 </見出し>
<項目1> AがBだった </項目1>
<項目2> BがCじゃなかった </項目2>

<見出し> 感想 </見出し>
<段落> 私はAがBだったことにびっくりしました。</段落>
<段落> 帰り道で読んだ<出典>「雑誌名」</出典>には
『<引用> AがBなのはCの演出において失敗だった </引用>』って
書いてあったけど、私はいいと思います。 </段落>

<ul class="modori">
 <li><a href="#PAGETOP">TOP</a></li>
</ul>
</div>
<hr>
  6. マークアップします。記事全体の見出しがh2 なので、見出しはh3からです。 
    <h2> 「○×」の感想 </h2>
<div class="text">

<p>▲月■日に友達と、先日放映開始した「<dfn>○×</dfn>」を見に行きました。</p>
<p><em>ネタバレしてる</em>ので、内容を知りたくない人は気をつけてください。</p>

<h3>あらすじ</h3>
<ol>
 <li>ある嵐の日に助けた王子に恋をした人魚姫<li>
 <li>失恋すると泡になるという条件で、人魚姫は人間の足を手に入れる</li>
 <li>しかし王子は隣国の姫との結婚が決まっていて、人魚姫は泡になって消える</li>
</ol>

<h3>原作との相違点</h3>
<ul>
 <li>AがBだった</li>
 <li>BがCじゃなかった</li>
</ul>

<h3>感想</h3>
<p>私はAがBだったことにびっくりしました。</p>
<p>帰り道で読んだ<cite>雑誌名</cite>には
『<q>AがBなのはCの演出において失敗だった</q>』って
書いてあったけど、私は面白いと思います。 </p>

<ul class="modori">
 <li><a href="#PAGETOP">TOP</a></li>
</ul>
</div>
<hr>
  7. もう一つ記事を書く場合は、2項目目からリピートします。挿入箇所は<hr>の直後です。 
    って書いてあったけど、私はいいと思います。 </p>

<ul class="modori">
 <li><a href="#PAGETOP">TOP</a></li>
</ul>
</div>
<hr>

<h2></h2>
<div class="text">

<ul class="modori">
 <li><a href="#PAGETOP">TOP</a></li>
</ul>
</div>
<hr>

注意点や最終確認

編集・作成し終わったら、HTMLチェッカー等タイプミスや入れ子に間違いがないか一度確認してみてください。『100点満点でなければならない』という意味ではなく単純なケアレスミスの防止ですので、細かい点数はさほど気にしなくて大丈夫です。

一度に多くのことを覚えるのは難しいです。わかっているつもりでも、案外勘違いで覚えて間違ったままになってしまっていることもあります。無理に多くのことを覚える（或いは覚えたつもりになる）必要はありません。一つ一つ、確認してください。不明点があれば、検索サイトで検索するか、FAQやサポートを確認してください。