無料CMSのWordPressというソフトでブログやホームページを作るケースが増えています。
ホームページを表示するための「html＆css」の知識が無くてもホームページの運用ができますが、従来のhtml＆cssを直接入力してホームページを作成する知識はWordPressのカスタマイズなどの際に役に立ちますので、次にhtml&cssを使ったホームページ作成の簡単な手順を紹介します。

ホームページ作成に必要なツール
事前準備
ホームページ作成
タグによる装飾（マークアップ）
スタイルの導入
スタイルシートの導入
idセレクタ、classセレクタの導入
他の主なタグの例
オーサリングソフト

ホームページ作成に必要なツール

・テキストエディター
Windowsにある「メモ帳」でテキスト編集ができますが、使い勝手や文字コードなどの点から、無料のテキストエディターソフト「TeraPad」がお勧めです。
ブラウザーで「TeraPad」を検索し、窓の杜ライブラリなどからダウンロードしてインストールしてください。起動のショートカットがデスクトップに表示されます。
・ブラウザーソフト
パソコンにインストールされているブラウザーソフトなら何でもよいです。
・FTPソフト
自分のパソコン上で作成したWebサイトをインターネット上に公開するためには、契約プロバイダやレンタルサーバーへ全てのデータを転送する必要があり、その時に使います。無料のFTPソフト「FFFTP」がお勧めです。

事前準備

ホームページ関係のhtmlファイルなどを入れるためのフォルダーを作ります。名前はなんでもよいですが、わかりやすいように「Web」フォルダーとします。
デスクトップを右クリックしてコンテキストメニューから「新規作成」-「フォルダー」を選ぶとデスクトップに「新しいフォルダー」が作成されますので、名前を「Web」に変更します。
TeraPadを起動し、「表示」タブの「オプション」を選択、「文字コード」タブから「初期文字コード」をUTF-8Nにします。
WordPressでは、文字コードをUTF-8N（N ：BOMなし) にすることになっているのでそれに合わせています。

ホームページ作成

TeraPadで次のように入力して、「index.html」というファイル名で「Web」フォルダーに保存します。空白は全て半角です。
保存したら、TeraPadを閉じないままこのファイルをダブルクリックしてください。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>HTMLの練習</title>
</head>
<body>
スキルアップ
初めてのWebページ作成。
</body>
</html>

「HTMLの練習」
というタイトルのホームページが開き、
「スキルアップ初めてのWebページ作成。」と表示されます。
これでホームページが作成できました。

TeraPadのツールバーには、

が表示され、次回以降は内容を変更してクリックするだけでデータが保存され、ブラウザーが起動してホームページが開きます。
自分のパソコンにあるだけでは誰も見ることができないので、このファイルをFTPソフトでプロバイダなどの指定のサーバーに転送すると、世界中のだれからもURLを入力することで見ることができます。
なお、index.html というファイルはトップページ用のファイルで、ブラウザーはサーバーにアクセスすると最初にこのファイルを自動的に読み込むという決まりになっています。
これが最も簡単なホームページの例で、簡単ですが、最低必要な機能は備わっています。

<!DOCTYPE html> は、宣言文です。html5であることを示します。
<html>は、最も外側に記述し、htmlファイルであることを示します。
<head>は、文書の情報を記述する部分で、この間に記述される内容はブラウザーには表示されません。
<meta>は、文字コードを指定する定例文です。他のmete情報も入ります。
<title></title>は、Webのタイトルで、ブラウザーの上部に表示されます。
<body>は、文書そのもので、ブラウザーにはこの部分が表示されます。
<〇〇>・・</〇〇 >のように、< >で囲まれたものを「タブ」といいます。<〇〇 >は開始タブ、</〇〇>は終了タブであり、一部を除いて必ず開始タブと終了タブをセットにして使います。

タグによる装飾（マークアップ）

TeraPad上では「スキルアップ」の後は改行されていますが、ブラウザーは認識しないので、「スキルアップ初めてのWebページ作成」と改行なしで表示されます。これでは原文イメージと異なるため困ります。
ブラウザー上で改行させるためには<br>タグが必要です。下記の赤字を追加、変更してください。

スキルアップ<br>
初めてのWebページ作成。

変更して上書き保存し、index.htmlファイルをダブルクリックして改行されることを確認してください（以下、上書き保存しないでもTeraPadのツールバーのブラウザーアイコンをクリックしても同じ）。
今度は、

<h1>スキルアップ</h1>
<p>初めてのWebページ作成。

として上書き保存し、index.htmlファイルをダブルクリックして表示を確認してください。

スキルアップ

の部分が大きく表示されたと思います。
<h1>・・</h1>
は、見出しタグといい、h1～h6があります。h1タグで最も大きな文字が設定されましたが、h2にすると少し小さい文字に表示が変わります。

タグは、段落を示すもので、htmlでは文章は何らかのタグで囲まれ、意味を持つことになります。

スタイルの導入

<p>タグを下記の赤字のように変更してください。スタイルを設定することでフォントの色、大きさ指定することができます。

<p style=”color:#ff0000;font-size:150%”>初めてのWebページ作成。

として上書き保存し、index.htmlファイルをダブルクリックして表示を確認してください。
Pタグで囲まれた部分が、赤文字、フォントサイズ1.5倍で表示されます。
このように、スタイルを指定することによって段落の色やフォントの大きさだけでなく、背景色、周囲の余白などを変えることができます。

スタイルシートの導入

htmlは効率的に情報交換を行えるよう、文書の「構造」を記述することを目的にしていますが、そこに上の例のように文字の色や形などの情報が混じってくると、せっかくの情報が不明確になってしまいます。

そこで、レイアウトを別の場所に定義しておき、それを構造に対して適用するという考え方のCSS（Cascading Style Sheet：スタイルシート）が導入されました。一旦定義したスタイルは、複数の文書で共有できますから、全体のデザインに一貫性を持たせることができ、しかもメンテナンスがずっと容易になります。

次の例では、html文書ファイルとは別に、装飾・レイアウトを施すためのcssファイルを作成して文章と表示を分けてみます。

TeraPad で「ファイル」-「新規作成」で新しいページを開き、次の赤字のとおりTeraPadで入力してください。 cssファイル名は任意ですが、ここではstyle.cssとして保存してください。

〇 cssファイル(ファイル名：style.css)

@charset “UTF-8”;
p{
　color:green;
　font-size:150%;
}

index.htmlファイルは、今保存したスタイルシートを呼び込むために、次の赤字のような文をタグ内に記述します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>HTMLの練習</title>
<link rel=”stylesheet”　href=”style.css” type=”text/css”>
</head>
<body>
<h1>スキルアップ</h1>
<p>初めてのWebページ作成。</p>
</body>
</html>

2つのファイルを同じフォルダに保存し、index.htmlファイルをダブルクリックして表示を確認してください。cssは自動で組み込まれて表示されるため特別な操作は必要ありません。

idセレクタ、classセレクタの導入

上の例だと、pタグの全てに同じスタイルが適用されますが、違うスタイルを適用したい段落もある場合に困ります。そこで、それを区別するために、セレクタを使います。セレクタにはidセレクタ、classセレクタがあり、用途がやや違います。
inde.htmlファイルに、次の赤字の部分を追加してください。

<p>初めてのWebページ作成</p>
<p class=”WP”>WordPress の勉強 </p>

style.cssファイルに、次の赤字の部分を追加してください。

p{
　　color:green;
　　font-size:150%;
}
p.wp{
　　color:red;
　　font-size:200%;
　　background-color:#888888;
}

上書き保存し、ファイルをダブルクリックして表示を確認してください。
<p>タグとclass=”wp”を指定した<p> タグでは表示が異なることが確認できると思います。

他の主なタグの例

<div> ・・ </div> :段落
これ自体に意味はありませんが、段落等をグループ化してスタイルシートを適用し、ヘッダー、サイドバーなどのレイアウト変更に使われます。

<img> ・・ </img> ：画像の表示
<img alt=”富士山” scr=”fujisan.jpg” width=”350″ height=”250″>
画像「fujisan.jpg」をページに表示します。

<a href=”・・・”>リンク先のURL</a>：文字や画像にリンク指定
<a href=”https://www.yahoo.co.jp/>ヤフーのホームページ</a>
のように使い、「ヤフーのホームページ」が選択可能状態になり、クリックすると「ヤフーのホームページ」が開きます。
“　”の間には、呼び出したいURL、ファイル名が入ります。リンクといい、他のページを開いたり、同じ文書の他の部分にジャンプする場合にも使います。

オーサリングソフト

簡単なホームページなら今まで説明したテキストエディターだけでhtml&cssを編集して作成できますが、デザインが複雑だったり、ページ数やリンクが多くなりページ間の相互関係が出てくると維持管理が急激に難しくなり、編集支援ソフト（オーサリングソフト）の力を借りる必要がでてきます。

上級者・プロが使用しているのが、Adobe社の「Dreamweaver（ドリームウィーバー）」、一般向けはジャストシステム社の「ホームページビルダー」などです。「ホームページビルダー」の最新バージョンは21で、従来の作成方法の「クラシック」と「WordPress」の2本立てになっており、どちらかを選択して使用するようになっていて互換性はありません。

マイクロソフト社からは、かつて「Microsoft Expression Web (旧FrontPage)」というソフトが販売されていました。 html&cssを直接入力してWebを作成するのを補助する中・上級者向けでしたが、開発環境の変化から今は単独ソフトとしての販売を中止し、最後のVER4を無料で公開しました。
実際に表示される画面イメージで編集できる「デザインモード」、htmlを直接編集する「コードモード」が有り、画面を上下に分割して両方のモードを比較しながら編集する「分割モード」では比較しながら作業できるので便利です。
適用するcssスタイルも同じ画面に表示されるメニューから選択できます。
現在も無料で公開しているので、html&cssを直接編集してホームページを作成してみたい方にはお勧めです。

有料ソフトは機能が豊富ですが、例えば「ホームページビルダー」は毎年バージョンアップされるため数年おきに更新しても経費も掛かり、その有料ソフトを使い続けなければなりません。また、使っていると機能の制約等が気になることがあり、使いこなすためには結局html&css、javascriptなどの知識が必要です。