基礎htmlについて
基礎htmlは手に入れましたか？ しかしあなたは記述の意味がよく理解できていないかも知れません。HTMLは構造記述のための文法なので、意味は明白です。HTMLの基本的なところを少しと、基礎htmlの各部位の説明をします。基礎htmlはメモ帳などのテキストエディタもしくはHTMLエディタでひらいて編集することが出来ます。
(一)基本
(二)基礎HTML解説
(三)本文マークアップ実践
(四)注意点や最終確認
基本
論理的な考え方
もしかしたら、今まであなたは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>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を利用する等、モバイルフレンドリーなサイトにしたい場合はコメントアウトを削除して有効にしてください。︵16-04-03に追加︶
<meta http-equiv="X-UA-Compatible" content="IE=edge">
IEを最新の標準モードでレンダリングさせる指定。古いIEにのみ対応しているCSSを使う場合は、よりバージョンが上のIEで崩れる可能性があり、IE=edgeを変更することで対応できる場合もありますが、そのCSSの使用自体をお勧めしません。︵16-04-03に追加︶
<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>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>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 id="FOOTER">
フッター情報に関する唯一のグループを開始します。
<h2>連絡先</h2>
FOOTER見出し。
<ul>
FOOTERリスト開始。
<li id="FOOTER01"><a href="#PAGETOP">TOP</a></li>
ページの一番上へ戻るためリンク。
フッターにはひとつひとつ名前︵ID︶が付けられ、順にFOOTER01、FOOTER02、FOOTER03……となります。項目を増やす場合は、FOOTER04、FOOTER05…と続きます。
以下フッター項目を増やした場合のサンプル
<li id="FOOTER01"><a href="#PAGETOP">TOP</a></li>
<li id="FOOTER02"><address><a href="mailto:mail@address.com">mail</a></address></li>
<li id="FOOTER03"><address><a href="http://css-designplate.info/">CSS Designplate</a></address></li>
<li id="FOOTER04">追加1</li>
<li id="FOOTER05">追加2</li><li>から</li>までの一行ずつを削除します。
<li id="FOOTER02"><address><a href="mailto:mail@address.com">mail</a></address></li>
<address>はそのHTML文書の内容に対する連絡先を表します。ページの責任者への連絡先の存在はそのページの有用性の一つの証明になりますし、閲覧者とサイト作成者が連絡をとりあうことでサイトをよりよいものにできるかもしれません。
﹃mail@address.com﹄の部分をあなたのメールアドレスに書き換えるか︵ただしこの方法はスパムの被害にあう可能性を高める場合があります︶、スパム等の心配がある場合はメールアドレスが記述してあるページやメールフォームが存在するページまたは掲示板などへのリンクをはってください。
<li id="FOOTER03"><address><a href="http://css-designplate.info/">CSS Designplate</a></address></li>
この企画へのリンク。
</ul>
FOOTERリスト終了。
</div>
フッター情報のグループ終了。
文末
</div>
サイト内容全体のグループ終了。忘れないようにしてください。
</body>
body終了。
</html>
html終了。
本文マークアップ実践
必要なのは、見出しとその内容です。CDPを使うにあたってとりあえずそこを意識してください。実践
(一)<div id="KIZI">以降から、記事ブロック終了の</div>のあいだにある記述を消します。
(二)以下のコードを書き込みます。
<h2></h2>
<div class="text">
<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><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>
(六)マークアップします。記事全体の見出しがh2 なので、見出しはh3からです。<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>
<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><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>