表紙 ＞ 目次 ＞ 情報・コンピュータ・・・ ＞ HTMLガイド ＞
作成：2020年5月13日　

HTML5 覚え書き
HTML4.01tranditional から HTML5 へ移行のためのメモ

0　始めに

　インターネットを見るためのブラウザーは、さまざまなソフトウエアメーカーが作成して、自社製品をアピールしています。ホームページを作る側とすれば、どのブラウザーでも同じように見えてほしいものです。
　1994年にW3C（World Wide Web Consortium*）が設立され、Web規格の標準化を進めています。2007年にHTML5が発表され、この規約（案）に従ってHTML文書を作成すると、どのブラウザーでも同じように表示されるようになりました。なお、現在発表されているブラウザーは、以前のバージョンで作成したファイルも表示するように作られています。
　このページは、「舞子の浜」の新しいページをHTML5で書くためのメモとして作成しました。また、2013年に作成した「HTML ガイド」を補完するものです。

* W3Cは、インターネットで使用される各種技術の標準化を推進するために設立された非営利団体

1　HTML

　HTML(Hypertext Markup Language)はハイパーテキスト形式のファイルを表示するための言語です。

  1. ハイパーテキスト（hypertext）とは、文書や画像を有機的に関連づけして、相互に参照できるように作られた、コンピューターを利用した文書システム。インターネット上のウェブページや、MacOS用のソフトHyperCard(ハイパーカード)が代表例。（小学館 デジタル大辞泉）
  2. markup（マークアップ）とは、目印(タグ)をつけること。目印(タグ)によって文書の各部分が、どのような役割を持っているのかを示す。 例えば、見出し・段落・表・リストなど、文書の中で各部分の役割が分かるようにする。

　HTMLとCSS の解説はネット上でいろいろ公開されています。その中の一つ Dave Raggett さんの Getting started with HTML に倣ってHTMLの書き方を整理しました。

  1. Getting started with HTMLは、2005年に HTML4.01で書かれたものですが、基本的な考え方はHTML5にも当てはまります。元の文書は英文ですが、Microsoft Edge や Google Chrome では、日本語に翻訳して表示できます。(機械翻訳のため、少々ぎこちない箇所もありますが)

2　HEAD部

　下の < と > で囲まれたコードは、このページを記述した HTML ファイルの先頭部分です。
説明の便宜上、行に番号を付けています。

  1　<!DOCTYPE html>
  2　<html lang="ja">
  3　<head>
  4　<meta charset="utf-8">
  5　<meta name="viewport" content="width=device-width, initial-scale=1">
  6　<meta name="description" content="HTML5を使ったコーディング">
  7　<meta name="keywords" content="HTML5,CSS,JavaScript,タグ,リファレンス">
  8　<meta name="author" content="小田桐一良">
  9　<link rel="stylesheet" href="parts/css/base.css" type="text/css">
10　<link rel="shortcut icon" href="parts/bottun/matu.ico">
11　<title>HTML5 覚え書き</title>
12　</head>

  1行目　ファイルの先頭で「doctype」を宣言し、HTML5 で記述する事を宣言します。
  2行目　htmlの始まり　言語はja(日本語)であることを明示します。
 htmlの終りは、body部が終わったあとに </html>で示します。
  3行目　head部の始まり　終りは12行目の </head>。
  4行目　HTMLで使用している文字セットを表示します。このファイルは utf-8を使用しています。
  5行目　パソコン向けサイトをスマートフォンで表示すると、文字などが小さすぎて閲覧しづらくなるので、ビューポートを指定することで回避します。
　　　　　● ここまでのタグは、HTMLを書く上で不可欠です。（以下は、なくてもページは表示できます）
  6行目　このページの概要を記述します。
  7行目　キーワードを列挙します。
  8行目　作者。　6～8行は検索エンジン向け。
  9行目　外部スタイルシート（base.css）を使用することを宣言します。
10行目　ショートカットアイコンを貼り付けています。ブラウザーの一番上、タイトルの前にアイコン(松のイラスト)が表示されます。
11行目　ブラウザのタイトルバーに表示される文字列。なければ、アドレスが表示されます。
12行目　head部ここまで。

3　BODY部

●　body部に書いてある文や画像がブラウザーに表示されます。書いてあることが何であるかが分かるように、タグで整理をします。たくさんのタグが用意されているます、よく使うものを示します。
<h1>～<h6>　見出し（header）
<p>　段落（paragraph）
<br>　改行 （forced line break）
<ol>　番号つき（順序付）箇条書き（ordered list）
<ul>　番号無し（順不同）箇条書き（unorderd list）
<dl>　定義リスト（define list）
<table>　表（テーブル）
<img>　画像を貼り付ける　
<a>　リンク （anchor）
<blockquote>　引用
<hr>　区切り線（横線）（horizontal rule）

● HTML5で、文の構造を明確にするためにつぎのようなタグが加えられました。
<section>　節・項（文章などの）
<nav>　　  案内（navigation）
<article>　 記事・条項
<aside>　　余談・補足
<header>　文頭の文書名・小見出し
<footer>　 文末の定型文

  1. 文書内の改行は無視され、半角の空白として扱われます。
    2個以上の半角の空白が続いても、1個として表示さます。
  2. 画面上で改行したいときは<br>をつけます。
  3. タグ内に書く文字は、大文字、小文字どちらでもかまいません。混在も可能です。

4　CSS

　CSS は Cascading Style Sheets の略で、cascadeを省略して「スタイルシート」と呼ぶことが多いようです。CSSはWebページの見栄え・スタイルを効率的に表示するための技術です。HTMLで文書を作成し、CSSで見栄えを整えることによって、意味と見栄えを分離することができます。
　年賀状に例えますと、「文書」の部分（言いたいこと）は「明けましておめでとうございます。（誰が送ったかが分かるように）作成者の氏名など」です。はがきに書くときには文字の大きさや配置を決め、イラストを入れたりします。これが「見栄え」の部分です。

 カスケードを確かめる 

　上記の『●カスケード（cascade）は階段滝の意で、･･･　･･･ 引き継がれることを示しています。
　　　　　･･･　･･･ 。中国語で、･･･　･･･ 。cascadeを含めた訳になっています。』は、
　htmlファイルで下のようにコーディングしています。この部分で段階的スタイリングを見ていきます。

<aside class="note"><span style="color:coral;">●</span>カスケード（cascade）は階段滝の意で、･･･　･･･ 段階的に引き継がれることを示しています。<br>
･･･　･･･ 。中国語で、･･･　･･･ 。cascadeを含めた訳になってます。 </aside>

● body と .note は、外部ファイル base.css の中に記述したものを使用している
第1段階　<body> 説明
body { background-color: #ffffff;
　　　　margin: 0.5em 1em;
　　　　color: #000000;
　　　　line-height: 1.4em;　} 		bodyタグでページ全体に対して 背景色＝白、
画面に対して上下半文字、左右1文字分を開けて表示、
文字色＝黒、
行間隔（line-height）＝1.4文字　を指定
第2段階　<aside class="note">
.note{ padding-left:16em;
　　　　font-size:0.8em;
　　　　line-height:1.4em;
　　　　margin-top:-1em; }		 左端（padding-left）を（半角で）16文字空け、
文字の大きさを0.8倍に、
行間隔（line-height）を1.4文字に指定。
margin-top:-1em;で上の行間を詰める。
第3段階　<span>
<span style="color:coral;">
　　　　●</span>		 ●に対して、色を真珠色（coral）に設定。

 CSSで見栄えを整える 

　CSSは「見栄え」を調整する役割を持っていますが、その対象は 文字、テキスト、ひとまとまりの文とさまざまであり、背景やページのレイアウトにまで及んでいます。
　当サイト内の スタイルシートでできること に、基本的なプロパティをまとめています。

●2013年に作成したものですが、現在も通用します。現在（2020年5月）のCSSは、今まで使ってきた機能に加えて便利な機能が追加されています。

 CSS の便利な機能 

　現在使われているCSSは上記「スタイルシートでできること」に記載したほかに、下記のようなさまざまな機能が加わっています。

1 文字（文字列）や文章に対して
文字の大きさ、行間を調整し、文字・背景に枠を作り色を付けて表示にアクセントを付ける
2 図形を描く
画面をキャンバスに見立てて「お絵かきソフト」のように図形を書き、重ね会わせ、回転、透過率を変えて表示する
3 マルチメディアに対応
文字・画像のほかに、YouTubeなど映像・音声を表示する
4 大小さまざまなデバイスに対応
パソコン用の広い画面から、タブレット・スマートフォンの狭い画面まで一つのページを対応させることも可能

参考サイト

  1. 「参考サイト」は1996年からコツコツと書き溜められたサイト（とほほのWWW入門）から、新しいサイトまでいろいろ。このページを作成するに際し、参考にしたサイトです
  2. 「構文チェック」は、コーディングの点検に使用
  3. 「道具箱」は文字どおり

とほほのWWW入門
HTML5 クイックレ レファレンス
w3schools サンプルで学ぶ HTML CSS JavaScript
ウェブ開発を学ぶ MDN web docs 日本語版
WEBページ作成 リファレンス cman
ホームページ作成 AllAbout
HTML+CSSまとめページ 武蔵野美術大学 通信教育課程
HEAD A free guide to HTML 5<head> elements
head内に記述するmeta要素の総まとめ

構文チェック
Another HTML Gateway Lint5 Another HTML Gateway
W3C Html Checker W3C Html Checker
CSS Validation Service CSS Validation Service
道具箱
色見本 とほほの色入門
HTMLの特殊記号変換ツール　& < > などを一括変換
記号・特殊文字の文字コード表 ／ Web道 便利なcssサンプルを掲載
モバイル フレンドリー テスト モバイル端末で表示したときの様子を調べる（Google）

先頭に戻る