軟式HTML

 このコーナーでは、HTMLとCSSの初歩的なルールとウェブサイトの作り方、そしてウェブサイトを管理・維持していく上での心構えを解説していきます。

 本文中にサンプルは置いておきません。各自でHTMLを書く、もしくはサンプルをコピーして、実際にどうなるのかを試してみましょう。また、ここで紹介しているのは必要最小限の要素ですので、更に詳しく知りたい方は、HTMLの解説書で良書が出回っておりますので、そちらもご参照ください。

 初版を執筆した当時が2007年以前ですが、その後2016年にHTML5の勧告をもとに改訂しました。HTML5では見た目に関する要素・属性がほとんど削除されており、そういったものに関してはすべてスタイルシートによるということになりました。当初はHTMLのみでウェブサイトを書き上げるという目的でしたが、徐々に初歩のCSS(これまでHTMLで扱っていたものを中心にする)についても解説を加えていきます。

参考文献・ウェブサイト

大藤幹・半場方人 2001『詳解HTML&CSS&JavaScript辞典』 秀和システム
森史憲・藤本壱 2014『HTML5&CSS3 ポケットリファレンス』技術評論社

目次

HTML編

  1. はじめに
    1. HTMLってなんじゃらほい?!
    2. 要素と属性
  2. HTMLで最初に書くこと
    1. HTMLのバージョンを指定する<!DOCTYPE>
    2. HTMLの土台 <HTML>、<HEAD>、<TITLE>、<BODY>
    3. 細かい設定をする <META>、<LINK>
    4. <BODY>要素でページ全体の状態を設定する
    5. HTMLソースにコメントを入れる
  3. 文章の段落
    1. 見出しをつけよう
    2. 本文を書く
    3. 水平線を引く
    4. HTMLで特に範囲を指定しておきたい場合
    5. 連絡先を書く
    6. 打ち込んだテキストをそっくりそのまま表示させる
    7. 改行する
    8. 箇条書きのリストを作る・1
    9. 箇条書きのリストを作る・2
    10. 箇条書きのリストを作る・3
  4. 文字列を弄くってみよう
    1. 文字の大きさ、色を変える
    2. 強調する
    3. 引用する
    4. 追加・削除を表現する
    5. 定義される対象の用語であることを表す
    6. その他もろもろの表現
    7. 特殊な文字を表現する
  5. 表を作るのって?
    1. 表の基本的な構造
    2. 表の表示形式をアレンジする
    3. 表にタイトルをつける
    4. セルの表示指定
    5. セルとセルをくっつける
  6. HTML奥義 ―リンクと画像を導入する―
    1. URLって何なの?
    2. リンクを張る
    3. 画像を貼り付ける
    4. 画像とリンクの複合技
  7. 投稿フォームみたいなものも出来ちゃうぞ!
    1. 投稿フォームを作るときに、一番最初にすること
    2. ボタンを配置する
    3. 1行のテキスト入力エリアを作る
    4. 複数行のテキスト入力エリアを作る
    5. ラジオボタンを作る
    6. チェックボックスを作る
    7. メニューを作る
  8. フレームで画面を分割するには
    1. フレームを作成する
    2. フレームの表示方法を変える
    3. インラインフレーム

CSS編

  1. 文章の表示位置を変える(Hn要素・P要素のalign属性)
  2. フォントをいじる(FONT要素)
  3. 背景色・背景画像の設定(BODY要素のbgcolor・background属性)
  4. リンクの色(BODY要素のlink・alink・vlink属性)

ウェブサイトの作り方編

  1. ウェブサイト作りに必要なもの
  2. ある程度HTMLが出来た、さあどうするべ?

心構え編

  1. 公開し始めたら
  2. 掲示板を使う
  3. 更新しよう
  4. 更新の準備をする時間が取れない…
  5. コンテンツを増やすということ
  6. 参加型コンテンツを作る上での覚悟
  7. えっ、「●●というブラウザでご覧下さい?」
  8. 自分のサイトで揉め事が起こったら
  9. もうダメだ、閉鎖しよう…
  10. 移転のお話

 HTML関連のご質問は掲示板かメール(CHRIS_NK■NIFTY.COM(すべて半角英数字小文字、■は半角@に変えて)でお願いします。ただし私が答えられるのはHTMLタグとCSSだけです。JavaScriptやCGIのことに関してはドドド素人ですので、勘弁してください。