自宅でwebサーバーを立ち上げ，ポチポチと情報を発信しています．これが結構楽しい．文章を書き，画像を置き，リンクを張り，少しずつ形を整えていくと，自分の考えや覚え書きがwebページとして残っていきます．ここでは，HTMLやCSSの基本から，JavaScript，PHP，画像や表の扱いまで，webページを作成するときに役立つテクニックを紹介します．

もともと，私の web ページはウェッジウッド・ブルーを基調とした色合いを考えていました．そのブルーは薄いので，後ろの白文字を際だたせるために，少し濃くしています．そのため，ほとんど紫になってしまいました．私の web ページの本文の背景は，薄い黄色です．これにはちょっと失敗したと思っています．今であれば，白を選択します．初めて web ページを作成した当時，「白色は目に厳しい」という迷信があり，淡い色を付けてしまいました．これから，web ページを作成する場合，背景は白が望ましいと思います．白色だと，その上の色を選ばないからです．

私がWWWを使って情報発信をする理由

私が WWW を使って情報発信をする一番の理由は，自分のための記録を残したいからです．コンピューターの設定，プログラムの作成，LaTeX やグラフ作成の手順などは，その時は分かったつもりでも，しばらくすると細かいところを忘れてしまいます．そこで，調べたこと，試したこと，失敗したことを web ページとして整理しておくと，後で自分自身が同じ作業をするときの助けになります．

もうひとつの理由は，同じことを知りたい人の役に立つかもしれないからです．私のページは，専門家が書いた完全な解説ではありません．しかし，実際に手を動かして分かったことや，つまずいたところを書いておくと，あとから同じ道を通る人には案外役に立つことがあります．特に，コンピューターの仕組みを理解したい人や，自分で試しながら学ぼうとする人のための手がかりになればよいと思っています．

WWW は，このような情報発信にとても向いています．文章だけでなく，図，写真，表，プログラムのソース，数式などをひとつのページにまとめることができます．また，関連するページへリンクを張ることで，ばらばらの情報をつないで整理できます．一度公開しておけば，必要なときにどこからでも読むことができ，間違いに気づいたときには後から修正することもできます．

SNS やブログは気軽ですが，情報が時間の流れの中に埋もれやすいと感じます．それに対して，普通の web ページは，内容を章立てで整理し，長い時間をかけて少しずつ育てることができます．自宅サーバーで運用しているので手間はかかりますが，サーバーの管理，HTML や CSS の記述，PHP や JavaScript の利用など，その作業自体も勉強になります．そして何より，自分の考えや経験を自分の手で形にして公開できるところが面白いのです．

WWWの歴史と利点

歴史

写真: 最初の Web サーバーとして使われた NeXT コンピューター
出典: Wikimedia Commons, Coolcaesar, CC BY-SA 3.0. 画像は縮小．

WWW (World Wide Web) は，インターネットそのものではなく，インターネット上で文書を公開し，リンクで相互にたどれるようにした仕組みです．電子メールやファイル転送もインターネットの機能ですが，WWW はその中で「ページを見る」ための仕組みとして発展しました．現在では，インターネットを使うと言うと，ほとんど WWW を使うことを意味するほど身近になっています．

WWW は，1989年に CERN の Tim Berners-Lee により考案されました．もともとの目的は，世界中の研究者が実験装置や計算機，論文，メモなどに関する情報を簡単に共有できるようにすることでした．研究所には多くのコンピューターがあり，それぞれに異なる形式で情報が保存されていました．それらを，機種や場所に依存せず，ハイパーテキストで結び付けようとしたのが WWW の始まりです．

1990年には，最初の Web サーバーと Web ブラウザーが CERN で動き始めました．そのサーバーとして使われたのが，右の写真の NeXT コンピューターです．このコンピューターには，誤って電源を切られないように「This machine is a server. DO NOT POWER IT DOWN!!」というラベルが貼られていました．最初の Web サイトのアドレスは info.cern.ch で，WWW とは何か，Web サーバーの作り方，関連するサーバーへのリンクなどが掲載されていました．

1991年になると，WWW のソフトウェアーは CERN の外にも知られるようになり，インターネット上のニュースグループを通じて世界へ広がり始めました．

日本での WWW の始まりも，高エネルギー物理の研究現場である KEK でした．当時の KEK は文部省高エネルギー物理学研究所で，現在の高エネルギー加速器研究機構です．1992年9月30日，当時 KEK 計算科学センターの森田洋平氏が CERN から KEK のサーバーに HTML ファイルを置き，CERN のリンク集に KEK のアドレスを加えてもらいました．これが，日本から世界に向けて公開された最初の Web ページとされています．最初は HTTP ではなく FTP サーバー上に置かれたページでしたが，1993年2月10日には一井信吾氏により httpd 0.9 を使った WWW サーバーも立ち上げられました．

ちょうどそのころ，私は学生として KEK にいました．当時は WWW という言葉も，まだごく限られた人たちのものでした．世界の Web サーバーが十数か所程度しかなかった時期に，日本で最初の WWW が自分の身近な研究所から動き始めていたと思うと，今になってみればなかなか感慨深いものがあります．高エネルギー物理の研究では，国や研究所を越えた共同研究が当たり前です．そのため，研究者同士が実験の情報，文書，図面，ソフトウェアーを共有する必要があり，WWW のような仕組みを早くから必要としていたのでしょう．

1993年4月30日に CERN が WWW のソフトウェアーをパブリックドメインとして公開したことは，大きな転機でした．誰でも自由に実装し，改良し，利用できるようになったため，WWW は急速に普及しました．

同じ1993年には，NCSA Mosaic というグラフィカルなブラウザーが登場しました．Mosaic は，文章と画像を同じ画面に表示でき，インストールも比較的簡単だったため，研究者だけでなく一般の利用者にも WWW の魅力を伝えました．1994年には Tim Berners-Lee が W3C (World Wide Web Consortium) を設立し，HTML，URI，HTTP などの標準化が進められるようになりました．このようにして WWW は，研究者の情報共有システムから，世界中の人が使う情報空間へと成長しました．

利点

WWW の最大の利点は，情報をリンクで結び付けられることです．紙の本は先頭から順番に読むことが基本ですが，WWW では必要なところへ直接移動できます．説明の途中で関連するページへリンクを張れば，詳しい説明，参考資料，プログラムのソース，画像などを無理なくつなげることができます．これは，知識を整理する道具として非常に便利です．

次の利点は，特別な配布手段を用意しなくても，情報を広く公開できることです．Web サーバーにファイルを置けば，読者はブラウザーでアクセスできます．OS や機種が違っても，HTML，CSS，画像などの標準的な形式で書いておけば，だいたい同じように読むことができます．間違いを見つけたときに修正しやすいことも，紙の文書にはない大きな利点です．

また，WWW では文字だけでなく，写真，図，表，数式，動画，プログラムの実行結果などを一つのページにまとめられます．技術的な説明では，文章だけでは分かりにくいことがたくさんあります．画面の写真や設定ファイルの例，実際に動かした結果を一緒に示すことで，読む人は手順を追いやすくなります．

個人が情報を発信する立場から見ると，WWW は長く残るノートとしても役に立ちます．ブログや SNS は気軽ですが，古い情報が流れてしまいやすいです．一方，普通の Web ページは，目次を作り，章立てを整え，必要に応じて内容を追加しながら育てることができます．検索エンジンから見つけてもらえるので，自分では思いもよらない人に読まれることもあります．

もちろん，公開する以上は，内容の正確さや著作権には注意が必要です．間違ったことを書けば，あとから読む人を迷わせます．他人の文章や画像を使う場合には，出典とライセンスを確認しなければなりません．それでも，調べたことを整理し，自分の言葉で説明し，必要なら修正していけるという点で，WWW はとても優れた情報発信の仕組みだと思います．

WEBページ作成で気を付けること

web ページを作るときに最初に考えるべきことは，見た目ではなく内容です．何を説明したいのか，誰に読んでもらいたいのか，どの順番で読めば分かりやすいのかを決めてから，見出しを付け，段落に分けます．見出しの構造がきちんとしていると，あとで CSS を変更してもページ全体が崩れにくくなります．

HTML は文書の構造を表し，CSS は見た目を整えるために使います．この二つを混ぜすぎると，最初は簡単に見えても，後で修正するときに面倒になります．本文，見出し，リスト，表，図などの役割を HTML で表し，余白，色，文字の大きさ，配置などは CSS に任せるのが基本です．

画像やプログラムのソースを掲載するときには，後で見ても分かるようにファイル名と置き場所を整理します．画像には説明文を付け，出典がある場合は必ず明記します．ソースコードや設定ファイルは，どの環境で動かしたものか，どの部分を変更すればよいのかを書いておくと，読む人にも将来の自分にも親切です．

また，web ページは公開した後も直せます．むしろ，公開してから少しずつ直すものだと考えた方がよいでしょう．間違いに気づいたら修正し，古くなった情報には注記を入れ，関連するページが増えたらリンクを追加します．このように手入れを続けることで，web ページは単なる一回きりの文書ではなく，長く使える知識の置き場になります．

このページで扱う内容

この WEB 作成のページ群では，単に HTML タグの書き方だけでなく，私のサイトを実際に作りながら覚えたことをまとめています．必要なところから読めるように，内容をいくつかのページに分けています．

基本では，ブラウザーと Web サーバーの関係，リクエストとレスポンスなど，Web の仕組みを説明します．
ページ作成の基本，文字，作成基準では，HTML 文書の構造，文字コード，ページ全体の作成ルールを扱います．
CSS の基本，CSS の書き方，FlexBox，gridでは，見た目やレイアウトの調整方法を説明します．
JavaScript，jQuery，HTML5，MathJaxでは，ページに動きや数式などを加える方法を扱います．
PHP，データの取得，クッキーでは，サーバー側での処理やフォームからの入力を扱います．
PHP ソースの表示，Google Code Prettify，テクニック，作成ツールでは，ページ作成を楽にするための部品や道具をまとめています．

それぞれのページは，完成された教科書というよりも，私自身の作業メモです．ただし，実際に作業したときの手順や失敗も含めて書いているので，同じようなことを試す人には役に立つことがあると思います．

ページ作成情報

参考資料

更新履歴

2026年05月

ページ全体の本文を整理し，WWW の歴史と KEK における日本最初の WWW について追記．