【Web 入門講座】HTMLとCSSを学習するための準備

[Web 入門講座]HTMLとCSSを学習するための準備

目次

1. Webサイトを作るために必要な知識
2. Webサイトを作成する手順
3. Webブラウザに文字を表示する

当講座は「Web 入門講座」である。 主にWebサイトを作る技術をご紹介する。 学習内容はそれほど深くない。浅い。 当講座のコンセプトは、 「JavaScriptを学習する前に、理解しておきたいWeb技術」である。 基礎的な内容を学習するが、高度な内容は省いている。 当講座でWebサイト製作の基礎を学習して頂ければと考える。

Webサイトを作るために必要な知識

今みなさまがご覧頂いているものは、 IORIが提供しているWebサイトである。 Webサイトはネットワーク上に存在するファイル群で構成されている。 IORIがファイルをテキストエディタで作成して、 そのファイルをネットワーク上に置いた。 いま、みなさまはWebブラウザを利用して、 IORIが作ったファイルにアクセスしている。 当講座では、 このWebサイトを製作する技術を学習する。

Webサイトを作成する前に、 Webサイトを作成するために必要な技術を解説する。

1. HTMLの知識
2. CSSの知識

Webサイトを製作するには、少なくとも2つの知識が必要である。 それは、「HTML」と「CSS」である。 本講座は、HTMLとCSSの基礎を学習する。

では講義に入る。難しい話になるので、注意が必要である。 まず、HTMLから解説する。

HTMLとは 一定のルールに従った文書である。

Webサイトを製作する場合、 やみくもにテキストエディタに文章を入力するわけではない。 一定のルールに従って記述する。 ルールに従わないと、想定していた画面がWebブラウザに表示しない。 Webサイト製作者はルールに従ってWebサイトを作る。 そのルールに従って書かれたものをHTML文書と言う。

HTMLを簡単に言うと Webサイトを作る時は、ルールに従って作ってね。 ルールに従って作ったものをHTML文書と言うよ、という事である。

一定のルールに従ってHTML文書を製作する事が、 Webサイト製作の第一歩である。 そして、HTMLを学習するという事は、 HTMLのルールを学習する事である。

つぎに、CSSについて解説する。

CSSとは HTML文書の表示方法を指定するルールである。

HTMLは文書を記述するルールである。 CSSは「見栄え」を指定するルールである。 例えば、文字の色を青色へ変更したり、 文字のサイズを調整したり、 表示する画像の大きさを調整したりする。

1. HTMLはWebサイトの文書のルール
2. CSSは見栄えを設定するルール

当講座でHTMLとCSSのルールを学習する。

Webサイトを作成する手順

1. Webブラウザ
2. テキストエディタ
3. 気合と根性

Webサイトを製作するために必要なものを確認する。 まず、Webブラウザが必要である。 Webブラウザがなければ始まらない。 つぎに、テキストエディタが必要である。 テキストエディタはなんでも良い。 PCに付属しているテキストエディタを利用すると良いだろう。

つぎに、具体的な学習手順を述べる。

1. テキストファイルにHTML文書を記述する
2. テキストファイルをWebブラウザで開く

まず、テキストファイルでHTML文書を作成する。 そして、そのテキストファイルをWebブラウザで開く。 WebブラウザでHTML文書を開いて、 想定した画面が表示するか確認する。 画面が想定通り表示したら、 HTML文書はルールに従って、正しく記述されたという事である。 想定外の画面が表示の場合、HTML文書は間違っていた事になる。 その場合は、HTML文書を修正する。 このような手順で学習を進める。

Webブラウザに文字を表示する

Webブラウザに文字を表示するところまで学習しよう。 まず、デスクトップに「IORI」という名前で新規フォルダを作成してほしい。 この「IORI」フォルダを学習用フォルダとする。 すでにデスクトップ上に「IORI」というフォルダがある方は、 別のフォルダを新規で作成しよう。

次に、テキストエディタを開いて、次のように記述する。

001<p>IORI</p>

この1行を記述して、ファイルを保存する。 左端の「001」という部分は記述しない。 これは学習用の行番号である。

<p>IORI</p>

実際は、このように記述する。 今後は左端に行番号を表示するが、それは気にしないでほしい。

1. 文字コードをUTF-8に指定する
2. ファイル名の拡張子は「.html」

ファイルの保存方法を解説する。重要である。 ファイルを保存する時、ファイル保存ダイアログを開く。 そのダイアログに文字コードを指定する場所があると思う。 そこで文字コードを「UTF-8」に指定する。 これは文字化けを防ぐ処理である。

つぎにファイル名について解説する。 ファイルの拡張子は「.html」を推奨する。 「このファイルは、HTML文書です」という事をOSに伝える処理である。 ファイル名は「sample.html」で良いだろう。

以上で、ファイルの準備は完了である。

次にテキストファイルをWebブラウザで開く。 テキストファイルを保存した後、Webブラウザを開いてほしい。 そして、Webブラウザのアドレス欄にテキストファイルのパスを記述して エンターキーを押下してほしい。 これでWebブラウザでテキストファイルを閲覧できる。

IORI

Webブラウザ上にこのように表示すると思う。 今後「Webブラウザ上」という言葉を「画面上」と表記する。

本講座は以上とする。