超基本・HTMLファイルの作り方
─ホームページはまず1枚から─

最終更新日＝2015-04-01

簡単な目次

・最も最低限のHTMLファイル作り
・HTMLファイルの構造・タイトルなど　（←head部分）
・HTMLファイルの構造・中身 　（←body部分）未完成
・色調別・色見本（軽量＆白背景版、 軽量＆黒背景版）
・3D色見本
・十進数対応・色見本
・名前で分類した色見本　New

前書き

ホームページ（以下、HP）作りはまず、 一枚のHTMLファイルを作る事から始まります。
この一枚だけでも、大変に重宝するものです。
また、HTMLファイルを複数作ってリンクでつなげば、
自分のパソコン内だけで見れる、『プライベートなHP』が出来上がります。 （←とっても便利よ♪）
それを、借りたスペースにサーバー転送用ソフトで送れば、
沢山の人に見てもらえる、『いわゆるHP』が出来上がります♪♪♪

HPは本来、お金をかけなくても、特別なソフトを使わなくても、十分に製作可能なものです。
ここで使うツールは基本的に、テキストエディタのみです。 （Windowsならメモ帳やワードパッド）
テキストエディタは文章を書くのに最も単純で基本的なツールなので、
どんなパソコンにも必ず備わっている事でしょう。　 Macではシンプルテキストと言うそうです。

• みんなの見るHPならば、他にも、サーバー転送用ソフトや、画像変換ソフトが必要でしょうが、
  どちらも、フリーソフトが多く出回っています。
  また、WindowsでInternet Explorerなら、ftpのアドレスにアクセスしてアップロード出来ます。
  （みんなの手の届く所（＝サーバー）にHPやファイルを転送するのがアップロード・通称アップ、
  サーバーから自分の所に持ってくるのがダウンロード）

「まずは一枚作る」、 そのために必要最低限な知識技術および、
私が実際の作業中に重宝した知識技術を、ここでは書いて行きます。

なお、文章中には、（身体または持っている装置に）特定のハンデのある方の事を
考慮したテクがあります。 いわゆるアクセシビリティ （アクセスしやすさ）の向上を目指すものです。
（HPのバリアフリーとも言えます）
しかしそれらのテクは、特にハンデのない方々にとっても、あると何かと便利なものです。
知っておくと大変有益です。

こんな方にお勧めします

• 普通のテキスト文書では物足りない、もっと便利な文書を作って使いたい。
• ネットオークションに出品する際に、商品の紹介ページで差を付けたい。
• 現在または近い将来、自分でHPを作りたい。
• HPを作りたいが、HP作成ソフトを持っていない。 （選択に迷っている或いは金がない）
• HP作成ソフトを使っているが、
  ページが不必要に重くなるのとソースの汚さに、小さな胸を痛めている。
• HP作成を業者に頼んでいるが、指示を出す時のためにも、
  自分で基本を知っておきたい。
• どんな人がどんな環境からでも見れる、 ユニバーサルデザインなHPを作るために、
  HPの基本を押さえておきたい。
  （ユニバーサルデザインには、 バリアフリーという意味も含まれます。）
• 自分のパソコンを持っていない （HP作成ソフトなどを勝手にインストール出来ない）が、HPを作りたい。
• 自分のブログを好みのデザインに変えたい、より便利に見やすくしたい。

注意

• タグは基本的に、 開始タグと終了タグ （大体は、開始タグの<の次に/を入れたもの）で挟んで使います。
• 以降の文章中、「abcタグで挟む」とは、 <abc> と </abc> で挟むという意味です。
• 要素、属性、値は、以下のような関係です。
  <要素 属性="値"></要素>
• タグに使う英数字や記号やスペースは、必ず半角にします。
  なお、大文字でも小文字でもどちらでも良いようです。
  ただ、HTML以外の他のファイル（XHTMLなど）では
  大文字と小文字を区別するものも多く、小文字で書く習慣を付ける事がお勧めされています。
• ちなみに、文書＝ファイルです。

2015年3月時点の主な変更　（というかザンゲ）

• 私は今まで、要素と属性をごっちゃにして書いていました。
  正しくは前述の通りです。
• 私は今まで、div要素とspan要素の区別が付いていませんでした。厳密に言うと、
  div要素はブロックレベル要素（一かたまり）で、タイトルのh*タグや段落のpタグなど
  他のブロックレベル要素と序列的には同等です。
  spanタグはインライン要素で、ブロックレベル要素の中に使うべきものです。
  （まあぶっちゃけ、どっちを使っても同じく表現される事が多いのですが）

• 2014年10月、W3C（JIS規格のホームページ版のワールドワイド版）から
  HTML5が正式に勧告されました。色々なブラウザで少しずつ導入されています。
  以前ここで書いた技法のいくつかが、現時点はともかく近い将来使えなくなります。
  その代わりとなるスタイルシートによる技法のうち、
  必要最低限のもの、あると便利で利用頻度の高いものを新たに載せました。

詳細な目次

・最も最低限のHTMLファイル作り　（←全てはここから始まります。）

作り方

後で内容を変える

後でファイル名を変える

複数のHTMLファイルをまとめる

サーバーにアップ（HPを更新）する

公共のパソコンからアップ（HPを更新）する

・HTMLファイルの構造・ タイトルなど　（←head部分）

タイトルを入れる

検索エンジンで検索されないようにする 　（一般非公開のページにする）

・HTMLファイルの構造・中身 　（←body部分）未完成

０．注意

１．見出し

２．段落と改行

３．文字

├３−１．色　（←古い方法）

├３−注a．スタイルシートを使った色表現　New

├３−注b．色は必ず表現されるとは限らない

├３−２．大きさ

├３−注c．スタイルシートを使った文字サイズ指定　New

├３−３．主な論理的文字修飾

├３−注d．物理的な（見た目の）文字修飾

├３−４．使用注意の文字　（機種依存文字と半角カナ）

└３−５．特殊な文字を実体表示で表現する

４．リンク

├４−１．同一フォルダ内（並列）のページへのリンク

├４−２．フォルダの中へ入って行くリンク

├４−３．フォルダを外へ出るリンク

├４−４．ページの途中へのリンク　New

├４−５．よそ様のHPへのリンク

└４−６．メールを送れるようにする

５．画像

├５−注a．画像は常に表示されるとは限らない

└５−注b．WC3勧告に物申す・画像のサイズとalt要素

６．ページの背景

├６−１．背景の色を変える　（←古い方法）

├６−２．背景に画像を使う　（←古い方法）

├６−注a．スタイルシートを使った背景指定　（ページ全体・部分）　New

├６−注b．背景色と文字色のコントラスト

├６−注c．背景に画像を使っていても背景色の指定を

└６−３．部分的に背景を変える　（セル一個のテーブル）

７．横の位置

８．横に罫線を引く

９．形を整える（整形済み要素）

10．使用厳重注意の表現

├10−１．スクロール＝流れる文字　（marqueeタグ）

└10−２．点滅　（blinkタグなど）

11．リスト　New

├11−１．順序のないリスト

├11−２．順序のあるリスト

├11−３．定義型リスト

└11−４．リストの中のリスト 　（入れ子）

12．コメントを入れる 　（表に出ない文章）　New

・色調別・色見本

RGB値の仕組み

好きな色を作りたい時

基本の16色

色名指定用の140色

├モノトーン

├赤タイプ

├オレンジタイプ

├黄色タイプ

├緑タイプ

├青緑タイプ

├青タイプ

├紫タイプ

└再掲・赤タイプ

・色調別・色見本　軽量＆白背景版

・色調別・色見本　軽量＆黒背景版

・3D色見本

・十進数対応・色見本

└十六進数⇔十進数・換算早見表

・名前で分類した色見本　New

・参考資料とリンク集 　まだない

あとがき

どういう基準で何を取り上げたか

ここで取り上げた技術は、必要最低限のもの、あると便利で利用頻度の高いものです。
実際には、スタイルシートを使えばもっと多種多様な表現が出来ます。
しかしながら、スタイルシートで出来る表現はあまりにも沢山あり過ぎて、
何をどこから手を付けて良いのか迷う場合も多いでしょう。
まずはこのページで関心を持たれてから、他のもっと専門的なサイトに進まれると良いでしょう。

逆引き形式

また、専門の方が書かれた専門的なサイトは、技術を一から順々に説明していく形が多いように思います。
「こういう理屈になっている」→「こういう技がある」→「表現はこうなる」という順です。
お立場としてはそうならざるを得ないのでしょう。
しかし、私を含め、そこまで専門性を求めない人たちにとって必要なのはその逆、
「まずは何をしたいか」→「そのためにどういう技を使うか」という順です。

HTML5ってそこまで重要？

10〜15年前ぐらいには、InternetExplorerやNetscapeNavigator（Macのかつての標準ブラウザ）など、
それぞれ独自のタグを開発したりと互換性に欠けていて、
サイトを作る側としては、各ブラウザそれぞれでどう表現されるか一々チェックする必要がありました。
しかし最近は、スタイルシートの導入等々で、各ブラウザでの表現の食い違いが格段に減りました。
これから先現れるであろう未知のブラウザにも、対応が容易でしょう。
統一規格の必要性は私も痛感します。

目次（トップ）に戻る