シニアのためのHTML教室

メルマガ再開しました

事後報告ですが、「シニアのためのHTML教室」メールマガジンを再開しました。

長らくおやすみしてしまい購読いただいている方には、ご迷惑をかけてしまい済みませんでした。
内容も一新して月2回の配信ペースで頑張りますのでよろしくお願いします。

]]> 今回より、「ウェブ標準」を目指して解説しています。

「ウェブ標準」で作成することにより、検索エンジンでの上位表示もしやすくなり、また、ソース自体も見やすくなります。

まだ、メルマガを購読されていない方は、ぜひこの機会にお読みください。

テーブル（表）の作成 [1]

テーブルは、いわゆる「表」の事です。
ホームページの作成では、レイアウトをするときによく利用されます。
　　
　　使用するタグ
　　

・・・・・・・・・・・・・・・・テーブル開始タグ(枠線を表示しない場合)
　　

・・・・・・・テーブル開始タグ(枠線を表示する場合)
　　　　　　　　　　　　　　　　　　　　　　　　　　「☆」には、任意の数字を入れる。
　　・・・・・・・・・・・・・・・・・・・行開始タグ
　　・・・・・・・・・・・・・・・・・・データーセル終了タグ
　　・・・・・・・・・・・・・・・・・・行終了タグ
　　

・・・・・・・・・・・・・・・・・・・データーセル開始タグ
　　

・・・・・・・・・・・・・・・・テーブル終了タグ

]]> 【練習】
　　エディターで次のように記述してください。
　－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

テーブル（表）の作成

テーブルの作成

枠線無しのテーブル

1行1列目	1行2列目	1行3列目
2行1列目	2行2列目	2行3列目
3行1列目	3行2列目	3行3列目

枠線太さ２ピクセルのテーブル

1行1列目	1行2列目	1行3列目
2行1列目	2行2列目	2行3列目
3行1列目	3行2列目	3行3列目

　－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
ブラウザで見ると下のように表示されます。

特殊な文字を表示する

特殊な文字とは、何でしょう？
実は、htmlで使用するタグをホームページでそのまま表示することが、出来ません。

「<」や「>」などをそのまま記述するとうまく表示されません。
これらを表示させるには、キーワードや番号で指定してやります。

]]> 例えば

見出しを指定するには、

見出し

と書きます。

と記述すると

見出しを指定するには、

見出し

と書きます。

のように表示されてしまいます。

次のように指定すると

見出しを指定するには、 <h2>見出し </h2>と書きます。

見出しを指定するには、

見出し

と書きます。

正しく表示されます。

次のようにエディターに記述してください。
　－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

特殊な文字を表示させる

特殊な文字の表示

記号で指定

[ < ]は、[ < ]で指定します。

[ > ]は、[ > ]で指定します。

[ & ]は、[ & ]で指定します。

[ © ]は、[ © ]で指定します。

番号で指定

[ < ]は、[ < ]で指定します。

[ > ]は、[ > ]で指定します。

[ & ]は、[ & ]で指定します。

[ © ]は、[ © ]で指定します。

　－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
出来たら、保存してブラウザーで確認してください。

フォントの種類を指定する

フォントの種類とは、「明朝」「MSゴシック」等の表示させる文字の種類のことです。（ご存じのかたもいらっしゃると思いますが）

フォントの種類の指定は、少々やっかいなところが、あります。
例えば「ＭＳゴシック」を「MS　ゴシック」と記述したり、間のスペースが「全角」・「半角」の違いでもちゃんと表示されません。（注意してください！）

]]> ■タグの記述

　　＜font face="☆"＞～＜/font＞

「☆」には、「フォントの種類」を入れます。

次のようにエディターに記述してください。
-------------------------------------------------------------------------

＜html＞
＜head＞
＜title＞フォントの種類を指定する＜/title＞
＜/head＞
＜body＞
＜font color="blue"＞＜h1＞フォントの種類を指定する＜/h1＞＜/font＞
＜p>＜font face="ＭＳゴシック,ＭＳ明朝" size="5"＞MSゴシックで表示してます。＜/font＞＜/p＞
＜p＞＜font face="ＭＳ明朝,ＭＳゴシック" size="5"＞MS明朝で表示しています。＜/font＞＜/p＞
＜p>＜font face="HGS創英角ﾎﾟｯﾌﾟ体" size="6"＞創英角ポップ体で表示しています。＜/font＞＜/p＞
＜br＞
＜/body＞
＜/html＞

-------------------------------------------------------------------------
出来たら、保存してブラウザーで確認してください。

文字のサイズを指定する

文字のサイズを指定しましょう。

サイズは、「１～７」の数字で指定します。
見出しタグも「１～6」の数字で大きさを指定しましたが、表示されるサイズは、逆になります。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
見出しタグ・・・数字が小さい方が、文字が大きくなる

文字サイズ・・・数字が小さいほど文字も小さくなる
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－]]> ■タグの記述

＜font size="☆"＞～＜/font＞ 「☆」には、「１～７」の数字が入る

例）

＜font size="1"＞サイズ１＜/font＞

＜font size="2"＞サイズ２＜/font＞

＜font size="3"＞サイズ３(これが、基準のサイズ)＜/font＞

＜font size="4"＞サイズ４＜/font＞

＜font size="5"＞サイズ５＜/font＞

＜font size="6"＞サイズ６＜/font＞

＜font size="7"＞サイズ７＜/font＞

色について

ホームページの作成で使う「色」（Web　Color）について書きます。
基本は、16色の色を使用します。

]]> 基本の16色 Black
#000000 Gray
#808080 Silver
#c0c0c0 White
#ffffff Green
#008000 Lime
#00ff00 Olive
#808000 Yellow
#ffff00 Navy
#000080 Blue
#0000ff Aqua
#00ffff Teal
#008080 Red
#ff0000 Fuchsia
#ff00ff Purple
#800080 Maroon
#800000

指定の仕方は、「色の名前（英文字）」または、「16進数（＃で始まる6桁の英数字）」で指定します。

例）　bgcolor="yellow" または、　bgcolor="#ffff00"　というふうに記述します。

基本色を使用する場合は、「色の名前」で指定します。
中間色を使用する場合は、「16進数」で指定します。

補足：16進数について
　　　　16進数は、「０」～「F」迄の英数字を6桁組み合わせて使用します。
　　　　「０.１.２.３.４.５.６.７.８.９.A.B.C.D.E.F」
　　　　
　　　　色指定の場合、先頭に必ず「#」をつけなければいけません。

■記述してみましょう。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

＜html＞
＜head＞
＜title＞色について＜/title＞
＜/head＞
＜body bgcolor="#ffffff"＞
＜h3＞＜font color="#000000"＞色を色々変えてみよう＜/font＞＜/h3＞
＜/body＞
＜/html＞

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
ブラウザーで確認すると下のように表示します。

ソースの赤文字部分の色指定数値を変えて試してみてください。

文字に色を着けてみる

今回は、見出しタグと段落タグで少しホームページらしいものを作成して文字に色を指定しましょう。

今回新しく使用するタグは、次のタグです。

＜font color="★"＞～＜/font＞
「★」は、色を指定します。

色に関する説明は、次回にします。

]]> まず、次のようにエディターに記述してください。

-------------------------------------------------------------------------------

＜html＞
＜head＞
＜title＞私のホームページ＜/title＞
＜/head＞
＜body＞
＜h1＞ホームページの練習開始＜/h1＞
＜h2＞タグ打ち＜/h2＞
＜p＞
今日から、ホームページを作る練習を始めた。＜br＞
エディターでタグを打ち込むのは、意外と楽しい。＜br＞
打ち間違いが、あって上手く表示しないときは、少し悩んでしまう。＜br＞
でも、間違ったところを発見して上手く表示したときは、「ヤッター！」と＜br＞
思ってしまう。
＜/p＞
＜h2＞見出しタグと段落タグ＜/h2＞
＜p＞
まだ、見出しタグと段落タグしか覚えていないけれど＜br＞
この二つだけで作ってみた。＜br＞
なんか、少しホームページらしくなったような気がする。＜br＞
少し、うれしい。次のタグが、どんなのか楽しみだ。
＜/p＞
＜/body＞
＜/html＞

-------------------------------------------------------------------------------

出来たら、保存してブラウザーで確認してください。

このように表示していればオッケーです。

次にこのページに背景の色と文字の色を指定していきます。
今、記述したソースに次の「赤色」で表示しているタグを追加してください。

-------------------------------------------------------------------------------

＜html＞
＜head＞
＜title＞私のホームページ＜/title＞
＜/head＞
＜body bgcolor="yellow"＞
＜h1＞＜font color="red"＞ホームページの練習開始＜/font＞＜/h1＞
＜h2＞＜font color="blue"＞タグ打ち＜/font＞＜/h2＞
＜p＞＜font color="teal"＞
今日から、ホームページを作る練習を始めた。＜br＞
エディターでタグを打ち込むのは、意外と楽しい。＜br＞
打ち間違いが、あって上手く表示しないときは、少し悩んでしまう。＜br＞
でも、間違ったところを発見して上手く表示したときは、「ヤッター！」と＜br＞
思ってしまう。
＜/font＞＜/p＞
＜h2＞＜font color="blue"＞見出しタグと段落タグ＜/font＞＜/h2＞
＜p＞＜font color="teal"＞
まだ、見出しタグと段落タグしか覚えていないけれど＜br＞
この二つだけで作ってみた。＜br＞
なんか、少しホームページらしくなったような気がする。＜br＞
少し、うれしい。次のタグが、どんなのか楽しみだ。
＜/font＞＜/p＞
＜/body＞
＜/html＞

--------------------------------------------------------------------------------

追記できたら、保存してブラウザーで確認してください。
保存は、見比べたい場合は、最初に保存したものと違うファイル名で保存してください。

このように表示していればオッケーです。

【説明】

＜body bgcolor="yellow"＞
これは、ページの背景色を指定しています。
bgcolor="★" 　「bgclor」は、background　color(バックグラウンドカラー)のことです。

＜h1＞＜font color="red"＞ホームページの練習開始＜/font＞＜/h1＞
文字の色を指定しています。
＜font color="★"＞～＜/font＞の開始タグと終了タグで構成されます。

段落を作ろう

本文を書き込む時に普通に書き込むと非常に読みにくい文章になってしまいます。
そこで長い文章を段落で区切って読みやすくします。
また、文章内で改行を入れることでさらに読みやすい文章になります。

使用するタグは、次の2種類です。
段落用タグ　＜p＞～＜/p＞
改行用タグ　＜br＞

]]> 記述してみましょう。

-------------------------------------------------------------------------------

＜html＞
＜head＞
＜title＞段落の作成＜/title＞
＜/head＞
＜body＞
＜h1＞段落の作成＜/h1＞
＜p＞
長くだらだらとした切れ目のない文章ほど読みづらいものは、ありません。＜br＞
段落を作ると文章が、読みやすくなります。＜br＞
段落同士は、適当なスペースが出来ます。
＜/p＞
＜p＞長くだらだらとした切れ目のない文章ほど読みづらいものは、ありません。＜br＞
段落を作ると文章が、読みやすくなります。＜br＞
段落同士は、適当なスペースが出来ます。
＜/p＞
＜/body＞
＜/html＞

--------------------------------------------------------------------------------

記述したら、保存してブラウザーで確認してみましょう。

このように表示されていればオッケーです。

見出しタグの説明

見出しタグは、大見出し・中見出し・小見出しというふうに文字の大きさを変えて表示します。

見出しタグは、検索エンジン対策としても重要なタグです。

]]> 使用するタグは、＜h＊＞～＜/h＊＞と記述します。

「＊」には、１～６の数字を入れて文字のサイズを指定します。最大が、「１」で最小が、「６」です。
「～」には、タイトル文字を入れます。

記述してみましょう。

＜html＞
＜head＞
＜title＞見出しを作る＜/title＞
＜/head＞
＜body＞
＜h1＞HTMLにチャレンジしよう！＜/h1＞
＜h2＞HTMLにチャレンジしよう！＜/h2＞
＜h3＞HTMLにチャレンジしよう！＜/h3＞
＜h4＞HTMLにチャレンジしよう！＜/h4＞
＜h5＞HTMLにチャレンジしよう！＜/h5＞
＜h6＞HTMLにチャレンジしよう！＜/h6＞
＜/body＞
＜/html＞

表示サンプル

HTMLの基本

まず、HTMLの書き方の基本を説明します。
htmlのタグの記述は、半角の英数字で行います。
ここでは、都合で「<」と「>」を全角で記述していますが、皆さんが記述するときは、
半角英数字で記述してください。

]]>
＜html＞
＜head＞
＜title＞タイトル＜/title＞
＜/head＞
＜body＞
本文
＜/body＞
＜/html＞

このようなテキストをご覧になったことが、あると思います。
これが、ｈｔｍｌの記述です。ソースといいます。

この3つの部分が、基本です。

１．＜html＞～＜/html＞
２．＜head＞～＜/head＞
３．＜body＞～＜/body＞

１．＜html＞～＜/html＞
これは、htmlで記述されている事を宣言しています。

＜ｈｔｍｌ＞これが、開始タグです。ここからhtmlが、始まっていますよということです。

＜/html＞これが、終了タグです。ここでｈｔｍｌが、終了ですよということです。

２．＜head＞～＜/head＞
これは、ヘッドタグといいます。ここには、文書情報やタイトルなどの情報を記述します。

＜head＞これが、開始タグです。ここからheadタグが、始まっていますよということです。

＜/head＞これが、終了タグです。ここでheadタグが、終了ですよということです。

３．＜body＞～＜/body＞
これは、ボディータグといいます。この間に表示したい内容を記述します。

＜body＞これが、開始タグです。ここから本文が、始まっていますよということです。

＜/body＞これが、終了タグです。ここで本文が、終了ですよということです。

この記述と順番は、基本ですので覚えておいてください。

ちなみに＜title＞タイトル＜/title＞は、タイトルタグといいます。
＜head＞と＜/head＞の間に記述します。
ブラウザーのタイトルバーに表示されます。

実際に記述してみましょう。
内容は、何でも結構ですが、ここでは、次のように書きます。

「HTMLにチャレンジしよう！」

それでは、エディターに次のように記述してください。

＜html＞
＜head＞
＜title＞練習＜/title＞
＜/head＞
＜body＞
HTMLにチャレンジしよう！
＜/body＞
＜/html＞

記述が、終わったら解りやすいところに保存してください。
ファイルの名前は、「test.html」という言う感じでいいでしょう。
名前の後ろに「.html」を忘れずに付けてください。

保存が、終わったら保存したファイルをクリックしてみましょう。
ブラウザーが、立ち上がって今、入力した内容が表示されていればオッケーです。

表示サンプル

どうですか、上手く表示されましたか？
上手く表示しない場合は、記述内容をチェックしてください。
「＜」や「＞」や「/」などは、ちゃんと記述されていますか。
日本語の文字以外は、すべて半角英数字で記述されていますか。

「FFFTP」の設定

インストールは、うまく出来ましたか？

「FFFTP」の設定を行いましょう。

プロバイダーまたは、サーバーのFTP接続設定の案内を用意してください。

]]> ■設定

・メイン画面を開きましょう。

・次にツールバーの「オプション」をクリックして「環境設定」を開けます。

・「オプション」ウインドウが、開きました。

・「操作」タブを開ける。

「同じ名前のファイルが、ある時」

ダウンロード/アップロード共に「確認ダイアログを表示」にチェックしてください。

「マウスのダブルクリックの動作」

「開く」にチェックをしてください。

・メイン画面左上の「赤いコンセントマーク」をクリックします。

・「ホスト一覧」という小さなウインドウが、開きました。

・右上の「新規ホスト」をクリックして「ホストの設定」ウインドウを開きます。

「基本」タブを表示してください。

「ホストの設定名」

ここは、自分で解りやすい名前を入れてください。

「ホスト名（アドレス）」

あなたのホームページのアドレスを入れてください。

「ユーザー名」

プロバイダーまたは、サーバー会社から送られているユーザーIDを入れてください。

「パスワード」

接続用のパスワードを入れてください。

「ローカルの初期ホルダー」

あなたのパソコンの「ｈｔｍｌファイル」が、入っているフォルダーを指定します。

「ホストの初期フォルダー」

サーバーで指定されたフォルダーをいれます。

「/public_html」などです。

「FFFTP」

ファイル転送ソフトの「FFFTP」のインストールと設定の方法を説明します。

「FFFTP」は、曽田さんが作成されました。
曽田さんのサイト
こちらからインストーラー付のファイルが、ダウンロードできます。

]]> これが、「FFFTP」です。

このファイル転送ソフトは、利用されているかたが、非常に多いです。
それだけ、扱いやすいソフトだと言えます。

制作者の曽田さんに感謝！

ファイル転送ソフトのインストール

ファイル転送ソフト「FFFTP」のインストールについて説明します。
圧縮ファイルをダウンロードされた方は、解凍作業を済ませておいてください。
インストーラー付をダウンロードされた方は、そのままで結構です。

説明は、インストーラー付を基準に説明しています。

]]> インストーラー付ファイルのアイコン

インストール初期画面

規約等説明文画面

インストールするフォルダーの確認

確認画面

インストール中画面

インストールとオプション設定

おすすめテキストエディター「TeraPad」のインストールについてご説明します。
「TeraPad」は、インストーラー付のものをダウンロードされた方が、楽ちんです。

]]> ■インストール

インストラー付のファイルのアイコン

クリックするとインストーラーが立ち上がりますので内容を良く読んで指示通りに進めてください。

インストール後、デスクトップに追加されたアイコン。

無事にインストールが、終了するとこのアイコンが、デスクトップに追加されます。
クリックして確認してください。

テラパッドを立ち上げた画面です。

■オプションの設定

テラパッドを立ち上げてオプションウインドウを開いてください。

１．[表示]のボタンを押した状態です。

オプションは、表示ボタンを押して出たプルダウンメニューの一番下にあります。
ここをクリックしてください。

２．[オプション]設定ウインドウです。

このようにオプション設定ウインドウが、開きます。

３．基本設定

ここでは、編集領域のタブやアンドゥーの回数などを設定します。下段の行の折り返しは、お使いのディスプレイに合わせて設定してください。

４．ルーラーと行番号の設定

編集画面にルーラーと行番号の設定をします。どちらも表示しておいた方が、編集作業が、楽です。

５．編集用フォルダーの設定

基本となるフォルダーを設定します。HMLファイルを入れるフォルダーを指定してください。

６．文字コードの設定

ここは、デフォルトのままでいいと思います。常に同じ文字コードで作業する場合は、指定してください。

「TeraPad」の説明

ここでは、フリーソフトのテキストエディター「TeraPad」のインストールとオプション設定ついて説明しています。
詳しい使用方法は、「TeraPad」のヘルプをご覧ください。

「TeraPad」は、寺尾　進さんが制作しフリーソフトとしてリリースされています。
寺尾さんのサイトは、こちらです。

]]> これが、「テラパッド」です。

扱えるファイルが、多数あります。
メールマガジンの作成から、htmlの作成やCGIの設定など、幅広く利用させていただいてます。

使い慣れるときっと手放せなくなりますよ。

寺尾進さんに感謝！