はげちゃんの世界

人々の役に立とうと夢をいだき、夢を追いかけてきた日々

初級講座1

Webページの予備知識

あなたもWebページをつくりましょう。決められたタグと簡単な文法で文章や画像を表示させ、レイアウトはスタイルシートで整えます。多くの失敗を基にして、可能な限り簡単な方法を考えました。「へ~え、そうやるの。」ぐらいの気持ちで読んでください。

1 夢を追いかけよう

Webページの作成方法はいろいろありますが、使い方を覚えるまで時間がかかるホームページ作成ソフトではなく、決められたタグと文法で作成して画像を表示させ、レイアウトにスタイルシートを使います。アクセシビリティやバリアフリーなどに配慮したWebページ完成までの道筋を一緒に楽しみませんか。

はげちゃんは、2000年12月にオーサリング・ソフト(ホームページ作成ソフト)でWebページをつくりました。ソースが少しわかるようになると、不要なタグを削除して単純なタグのみで手作りし、失敗の連続から2005年にはほぼ満足なものができあがりました。

2007年の春、大学時代の同期が属している団体よりWebページの全面リニューアルを頼まれました。帰りに立ち寄った書店で、西村文宏さんの労作「HTML&スタイルシート プロ顔負けのホームページ作成術(成美堂出版)」を購入しました。これほどわかりやすく、必要なことはすべて網羅されている書籍は他にありません。何度も読み返してWebページのリニューアルに反映させました。書籍が再版されたので購入をお勧めします。

ボランティアの役職をすべておりた2013年6月から準備を始め、これまでの経験をまとめてWebページを訪れた方々のお役に立とうと考えました。更新不能状態になったWebページを削除し、西村文宏さんの労作を教科書に新たな気持ちでWebページを作り始めました。この初級講座で説明するのは、「2016年3月末までのはげちゃんの世界」です。

73歳のはげちゃんが作成するWebページは単純構造です。でも、W3Cが推奨する最も厳格なハイパーテキスト・マークアップ・ランゲージ(HTML)とカスケード・スタイル・シート(CSS)を採用し、ユニヴァーサル・デザインを基本として、アクセシビリティやバリアフリーなどのユーザビリティに配慮したリキッドレイアウトを採用しています。

W3Cの勧告に従って制作されたWebページは世界Web標準とされ、その高い基準をクリアしたホームページは全体のわずか6.5%といわれています。「はげちゃんの世界」は、W3Cより世界Web標準の認証を得てホームページに認証バナーを張る許可をいただきました。

説明通りに作業を進めると、あなたのパソコンにウエブページが出来上がります。時間の短縮と英語のスペルなどで悩まないよう、可能な限り「コピー&ペースト」できるように配慮しました。はげちゃん推奨のつくり方を覚えると、いままで悩んでいたことがちゃんちゃらおかしくなります。もしよろしかったら、おじいちゃんになれなかった73歳のはげちゃんと一緒に夢を追いかけましょう。

トップへ戻る

2 用語の意味を知ろう

 2-1 ウエブ(Web)ページ

この「はげちゃんの世界」は一冊の本のような情報のかたまりです。インターネットの世界では、「一冊の本のような情報のかたまり」を「Webページ」と呼んでいます。書店で販売されている本には表紙がついています。Webページの表紙にあたるのが「ホームページ」です

書店には「ホームページの作り方」という本が並んでいます。インターネットの世界にも「ホームページの作り方」を説明しているサイトがたくさんあります。表紙の作り方を説明していますが、表紙も中身もつくるという欲張った内容は見かけません。この講座では、情報のかたまりである一冊の本になるWebページを作ります。

トップへ戻る

 2-2 URL

「はげちゃんの世界」という情報のかたまりの保管場所は、インターネット接続業者であるプロバイダのサーバーで、情報の保管場所をWebサイトといいます。Webサイトには様々な人が作成したWebページが保管されているので、情報のかたまりの表紙にあたる「ホームページ」に住所がつけられています

この住所を「URL(Uniform Resourcu Locator)」といいます。本の保管場所(ウエブサイトのURL)が分かれば、だれでも「はげちゃんの世界」という本を読むことができます。ブラウザでお気に入りに登録すると、ブラウザが「はげちゃんの世界」のURLを記憶していつでもアクセスできるようになります。

トップへ戻る

 2-3 ハイパーテキスト

複数の文書(テキスト)を相互に関連付け、結びつける仕組みをさします。本に例えると、目次から読みたいページをさがすことができる仕組みです。また、本文の中に専門用語や資料用語がでてくる場合、その場で説明すると文章の流れが止まってしまいます。専門用語に記号を付して余白で意味を説明することがあります。資料用語に番号を付して巻末で資料についての説明をすることもあります。

本の場合は、説明文があるところへ記号や番号で誘導します。インターネットの世界では、テキストとテキストを結びつけるリンクという仕組みを使います。この段落の左下に薄黒い「トップへ戻る」という文字が表示されています。この文字をクリックするとページの最上段(出発点)へ戻ります。これがリンクです。また、外部のホームページへ移動できるようにすることも「リンク」といいます。

トップへ戻る

 2-4 HTML

HTMLは Hyper Text Markup Language の略で、Markup Languageは「しるしをつけるための用語」という意味です。ウエブページの文章を「タグ」と呼ばれる「特別な文字列」で囲うことで、ディスプレィ(画面)への表示の仕方をブラウザに指示します

「タグ」を使うと、表題や項目、段落の区切りなどを指定したり、箇条書きの項目を列挙したり、画像や音声や動画などを埋め込んだり、他の文書へのハイパーリンクを設定することができます。

トップへ戻る

 2-5 WWW

WWW(World Wide Web)は世界中に広がったクモの巣という意味です。図書館では索引カードに整理し、読みたい本をだれもが探し出せるようシステム化されています。インターネット上ではURLやハイパーリンクを使って、ハイパーテキストの情報を共有するためのシステムを指します。

トップへ戻る

 2-6 W3C

W3C(World Wide Web Consortium)は、WWW(World Wide Web)で使用される各種技術の標準化を推進するために設立された非営利団体の名称です。W3Cの勧告に従って制作されたWebページは世界Web標準となりますが、その高い基準をクリアしたホームページは全体のわずか6.5%といわれています。

HTMLとスタイルシートの文法チェックで、W3C推奨の正しい記述であることが認証されると、自分のウエブページに「世界標準認証バナー」を張る許可が得られます。

Web頁作成講座では、あなたのパソコンにW3CのHTML4.01とスタイルシートの文法チェックに合格できるウエブページをつくります

トップへ戻る

 2-7 CSS

CSS(Cascading Stylr Sheets)はスタイルシートと略し、HTMLのタグで指定したテキストをどのようにディスプレィ(画面)へ表示させるかを記入します。デザインやレイアウトのみを担当するスタイルシートの書き方は三通りの方法があります。

・ HTMLファイルの「スタイル要素」にまとめて記入する。
・ HTMLファイルの中で、「スタイルを適用したい」部分にのみ記入する。
・ 独立したスタイルシートファイルにまとめて記入する。

あなたのパソコン上には、あなたが再利用しやすいように独立したスタイルシートファイルにまとめて記入する方法を取ります

トップへ戻る

 2-8 リキッドレイアウト

ディスプレィの解像度の多くはディスクトップ型パソコンの場合「1024×768」で、ノート型のパソコンは「800×600」と言われてきました。最近のノート型パソコンは解像度がかなり高くなってきています。

どちらの解像度でも同様に見えるよう、長さの単位を相対単位で指定するレイアウトをリキッドレイアウト(Liquid Layout)といいます。低解像度のパソコンであっても、文章を読むときに横へのスクロールが不要となるのでストレスを軽減でき、高解像度の環境では作者の考えたレイアウトを表示させることができます。

「はげちゃんの世界」を例にとると、右の写真のように上段にある風景写真の全景を表示させ、ブラウザの下段に「横スクロールバー」が表示されないように調節すると、はげちゃんが考えたレイアウトで表示したことになります。

トップへ戻る

3 ソースを知ろう

 3-1 Webページのソース

パソコンの画面に映し出される「情報」は専用の「ソース」ファイルに記入します。ブラウザは、ソースに記入されている情報「文章・イラスト・写真」を決められた順序で読み込み、スタイルシートで指定されたとおりに表示します。

ソースの書き方には約束事があります。使用する「文法」や「言語」などの指定と、情報処理を指定する「タグ」などの使い方です。まず、下記の基本となるソースをご覧ください。

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta name="keywords" content="">
<meta name="description" content="">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="">
</head>
<body>
<h1></h1>
<p></p>
</body>
</html>

このような文字を見ると、できるだろうかと不安になりますね。心配いりません。そんなことは考えるだけ無駄です。どんなことが書かれているのか簡単に説明しましょう。

トップへ戻る

 3-2 基本ソースの解説

  3-2-1 DOCTYPE宣言

ソースの最初は、文法のバージョン宣言です

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Webページ作成に使うHTMLの文法バージョンを宣言しています。文法のバージョンは複数あり、ここでは「HTML 4.01// EN」というバージョンを使うと宣言しました。「HTML 4.01// EN」の文法はもっとも厳しいとされますが、逆に言うと型にはまっているほうが楽なのです。

パソコンが高解像度であれば一行で表示されますが、はげちゃんの世界は画面の最大表示幅999px(ピクセル) に固定したリキッドレイアウトのため、二行で表示されています。

トップへ戻る

  3-2-2 日本語のページ

3行目の <html lang="ja"> から最終行の </html> までは、「日本語で書かれた情報が入ります」という意味になります。「ja」は「Japanese=日本語」の略語です。

 <html lang="ja">
 <head>
 <meta name="keywords" content="">
 <meta name="description" content="">
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
 <meta http-equiv="Content-Script-Type" content="text/javascript">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <link rel="stylesheet" type="text/css" href="">
 </head>
 <body>
 <h1></h1>
 <p></p>
 </body>
 </html>

トップへ戻る

  3-2-3 文書情報

<head> から </head> の間に書かれているのは「作成するページに関する情報」で「付加情報(meta)」といいます。1行目と2行目は文書に関する付加情報で、ここでは最低必要な情報だけを指定しています。

・ 文章情報の1行目
    ロボット検索用の keywords を「"」と「"」の間に日本語で複数記入します。
 ・ 文章情報の2行目
    ページの紹介文 description を「"」と「"」の間に日本語で最大限 100字で記
   入します。

 <head>
 <meta name="keywords" content="">
 <meta name="description" content="">
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
 <meta http-equiv="Content-Script-Type" content="text/javascript">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <link rel="stylesheet" type="text/css" href="">
 </head>

文章情報の3行目にウエブページの「タイトル」名を <title></title>の間に記入します。あなたがいま見ているウエブページは、「<title>はげちゃんの世界</title>」と記入されています。

トップへ戻る

  3-2-4 初期情報

タイトルに続いて書かれている「付加情報(meta)」は「ブラウザのための情報」です

 <head>
 <meta name="keywords" content="">
 <meta name="description" content="">
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
 <meta http-equiv="Content-Script-Type" content="text/javascript">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <link rel="stylesheet" type="text/css" href="">
 </head>

・ ブラウザのための情報の1行目
    使用する日本語は「Shift_JIS」であると宣言しています。
 ・ ブラウザのための情報の2行目
    このページで「javascript」を使用することを宣言しています。
 ・ ブラウザのための情報の3行目
    スタイルシートはテキストで書かれていると宣言しています。
 ・ ブラウザのための情報の4行目
    スタイルシートの保管場所を「"」と「"」の間に記入します。

トップへ戻る

  3-2-5 見出し

<body> から </body> 範囲内に入力するのは「本編となる情報」です。ウエブページで提供する文章やイメージは「<body>」から「</body>」の範囲内に入力します

文章の見出しを指定するタグは「<h1></h1>」から「<h6></h6>」まで六種類あり、数字が小さくなると文字の大きさも小さくなります。

 <body>
 <h1></h1>
 <p></p>
 </body>

一般的に、大項目は「h1」、中項目は「h2」、小項目は「h3」を指定します。

トップへ戻る

  3-2-6 本文

本編となる文章は「<p>」から「</p>」の間に入力すると、ひとまとまり(段落)で表示されます。文章が長いときは、「<p></p>」を何度もコピー&ペーストして使います。

 <body>
 <h1></h1>
 <p></p>
 </body>

トップへ戻る

4 タグと属性を知ろう

 4-1 タグ

HTMLのソースで使う「タグ」は、原則として「開始タグ」と「終了タグ」が一組になっています。この段落のソースは次のように書かれています。

<p>HTMLのソースで使う「タグ」は、原則として「開始タグ」と「終了タグ」が一組になっています。この段落のソースは次のように書かれています。</p>

「<p>」は「ここから文章が始まる」という「開始タグ」で、「</p>」は「ここで段落が終了する」という「終了タグ」です。「<p></p>」の場合は、終了タグの後に「スペースが1行」入ります。見出しに使用する「<h1>」と「</h1>」も「 h1開始タグ」と「h1終了タグ」といいます。

情報は「開始タグ」で始まり、「内容」が入力されて、最終部分に「終了タグ」がきます。このような「開始タグ・内容・終了タグ」のまとまりを「要素」と読んでいます。

HTML 4.01// EN では68種類のタグが推奨され、この中から必要なタグを使って文書などの表示順序などを決めます。

トップへ戻る

 4-2 例外のタグ

画像を呼び込むために使う「imgタグ」と改行を指示する「brタグ」は、「開始タグ」があっても「終了タグ」はありません。目的が決まっているので「終了タグ」は不要とされています。

トップへ戻る

 4-3 三種類の要素

HTMLの要素は、大きく分けると「ブロックレベル要素」と「インライン要素」の二種類があります。「ブロックレベル要素」は、ある大きな範囲(ブロック)に対して構造や意味を指定する要素で、タグの前後で改行されます。「インライン要素」は、文字単位で構造や意味を指定する要素で自動的に改行されません。

ブロックレベル要素の中でインライン要素を使用できます。インライン要素の中でもインライン要素を使用できます。インライン要素の中でブロックレベル要素は使用できません。また、様々な場面で使えるものを「汎用要素」と呼びます。

トップへ戻る

  4-3-1 ブロックレベル要素

<h1></h1>     見出しの大きさを「1から6」までの六段階で指定します。
 <p></p>       もっとも多く使われる「段落」の範囲を示します。
 <blockquote></blockquote>  「引用」している範囲を示します。

トップへ戻る

  4-3-2 インライン要素

<br>      文章を強制的に「改行」させる場合に使い、終了タグは不要です。
 <strong></strong>   文章の中で、文字や文字列を太文字にして強調します。
 <a></a>        「リンク」をつくります。
 <ul></ul>       「箇条書き」などの「リスト」をつくります。

トップへ戻る

  4-3-3 汎用要素

<div></div>     複数の要素をまとめてスタイルを指定します。
 <hr>         「区切り線」を挿入するために使い、終了タグは不要です。
 <span></span>   文章の中で、文字や文字列にスタイルを指定します。
 <img>        指定した「画像」を表示し、終了タグは不要です。

・ 汎用要素の中で「<div><div>」と「<hr>」はブロックレベル要素。
 ・ 「<span></span>」はスタイル適用タグで特別の意味がないインライン要素。
 ・ 「img」は、「データとしての画像」を挿入する位置を指定するタグで「src="画像
  ファイル名" with="画像の横幅" height="画像の縦幅" alt="代替えテキスト"」など
  の記入が必要です。

どのウエブページを開いても、本文中に使われているタグの多くは上記の「19種類」です。他のタグが不要というわけではありませんが、わずかなタグでもつくれるのです。

トップへ戻る

 4-4 化粧まえの姿

身だしなみを整えたり化粧をするのは不快感を与えないように配慮することですが、一流と言われる人々や良識のある方々は化粧をしている姿を見せることはありません。化粧している姿を人前にさらすのは不快感を与え、不快感を与えるのは恥ずかしいことというのがマナーです。

いまご覧になっているページは、7種類のタグを使ってスタイルシートで化粧を施しています。スタイルシートを適用させない(化粧を洗い流す)とどうなるでしょう。下のリンクボタン「化粧をする前の顔」をクリックすると、スタイルシートを適用しない状態が表示されます。

化粧前の顔を確認し終えたら、最終下段にある「Web頁作成講座1,4) 化粧まえの姿へ戻る」ボタンをクリックしてください。現在あなたが見ている場所へ戻ります。なお、「化粧をする前の顔」では、外部へのリンクと他セクションへのリンクは削除してあります。

  スタイルシートを適用しない姿をクリックで表示します⇒ 化粧をする前の顔

化粧前の顔はいかがでしたか。スタイルシートのレイアウトが適用されないと無表情ですね。

トップへ戻る

5 あなたと作るウエブページ

概略が分かったところで、あなたと一緒にウエブページを作る準備を始めましょう。高価なソフトを使わなくても説明通りに作業を進めると、あなたのパソコンにウエブページができあがります。HTMLの文法も、HTMLのタグの意味や使い方も、スタイルシートで使う用語も、すべては「百聞は一見にしかず」。いっしょに作成作業をしていくうちに、そのような使い方をするのかと意味が理解でき、面白さがわかります。

あなたと一緒につくるウエブページは、島崎藤村の魅力を紹介する本です。島崎藤村は明治時代の詩人で小説家です。若菜集に収められた「初戀(恋)」、落梅集に収められた「椰子の實(実)」や「小諸なる古城のほとり」という詩は多くの人々に親しまれています。この三編の詩を紹介するページを作りましょう

トップへ戻る

 5-1 ウエブページの名前

あなたと一緒につくる一冊の本は「島崎藤村の魅力」という名前のウエブページとしました。一冊の本ですから、ホームページという表紙だけではなく、複数のページを作成してハイパーリンクで閲覧できるようにします。インターネットで目にするウエブページのミニ版となり、これをつくることでウエブページ全体の仕組みが理解できます

トップへ戻る

 5-2 全体の姿

表紙となるホームページには「椰子の實」を掲載し、「初戀」のページと「千曲川旅情の歌」のページも作成します。三作品のページには「原文」と「はげちゃんの現代訳と思い出」を掲載します。また、「あなたの思い出」も掲載できるようにします。

後日、あなたの情報を発信するためのウエブページをつくるときは、練習用に作成したこのウエブページをベースにすることができます。土台を作っておけばいくらでも応用ができるのです

トップへ戻る

 5-3 レイアウトは二段組み

レイアウトは「はげちゃんの世界」と同じ、もっともよく使われる「二段組み」にします。上段は「タイトル」と「ロゴマーク(らしきもの)」、中段には「ナビゲーション・ボタン」、その下の左側に「メニューと外部リンク」、右側に「本編」、下段には「著作権表示」をします。

トップへ戻る

 5-4 配慮すること

ユニヴァーサルデザインは「できる限り多くの人々が利用可能にする」ことが目的で、アクセシビリティは「ハンディを持つ人々も受け入れやすい」ことを願い、バリアフリーは「すべての障壁を除去する」ことです。

ユーザビリティは「使いやすさの重視」ですから、表現が違うだけで内容は同じようなことです。私たちも「誰もが使いやすいページ」を目指します

トップへ戻る

 5-5 楽しもう

あなたと共に、だれもが使いやすいウエブページを「Simple is Best」でつくります。73歳のはげちゃんにできたのですから、あなたにできないはずがありません。完成までの道筋をいっしょに楽しみましょう。

トップへ戻る

6 作成環境を整えよう

やる気がでてきましたね。ウエブページの作成作業に入るための環境を整えましょう。ここで説明する5つは大切なことですから、しっかり確認してください

 6-1 プロバイダの指示

あなたが契約しているインターネット接続業者(プロバイダ)の説明書を開き、「ホームページ作成上の注意事項」の説明を読んでください。重要なのはファイルに付ける拡張子で、「.htm」または「.html」のどちらを使用すべきか指示があります。

拡張子「.htm」と「.html」はファイルの種類を識別するためのものです。プロバイダが「.htm」を指定したら、ファイルの拡張子をすべて「.htm」に統一します。「.html」を指定した場合はファイルの拡張子をすべて「.html」に統一します。

「.htm」と「.html」は「l」がついているかどうかの差ですが、一文字違うとまったく別の意味になってしまい、苦労して作成したウエブページでも受け付けてもらえません。この講座では「.html」を付けた場合で説明しますが、あなたのウエブページを作るときはかならずプロバイダの指定した拡張子を使ってください。拡張子が異なっても、ウエブページの作り方は同じです

トップへ戻る

 6-2 ディスクトップの整理

パソコンのディスプレィに表示されている画面を「ディスクトップ」と呼びます。作業をするための「机の上」という意味です。ディスクトップにあるのは「ごみ箱」だけですか。それとも、テキストを保存しているフォルダーのアイコンや写真を保存しているフォルダーのアイコン、ソフトのアイコンやゲームのアイコンなどが数列も表示されていませんか。

ディスクトップは作業をするところですから、いろいろなものがゴチャゴチャしていると作業に支障をきたします。間違ってクリックしてしまったり、ディスプレィに表示されているデータを、何度もCPUが読み込みを行うので処理スピードが落ちます。これらを片づける方法をお知らせします。

ディスクトップの何もないところで右クリックし、「新規作成」で「フォルダー」をつくります。「新しいフォルダー」をポイントして右クリックし、「名前の変更」を選んで「アイコン集」と名前を付けます。「アイコン集」のフォルダーを開いて最小化し、「ごみ箱」以外のアイコンをドラッグ&ドロップしましょう。

ドラッグ&ドロップは、画面上で別の場所へ移動させたいアイコンやファイル、写真やイラストなどの上にマウスのポインタを重ね、マウスの左ボタンを押したままで引きずるように移動させ、目的の場所(アイコン集のフォルダー)でマウスのボタンを放すことです。ディスクトップには「ごみ箱」と開いた状態の「アイコン集」だけになります。「アイコン集」を閉じましょう。

「アイコン集」をクリックで開くと、以前と同様の配列でアイコンが並んでいます。作業をするときは「アイコン集」を閉じておくと、ディスクトップに様々なファイルを開いたままで作業ができます(アイコン塁はドラッグ&ドロップで、元通りにディスクトップへ戻すことができます)。

トップへ戻る

 6-3 ブラウザの扱い

現在起動しているブラウザはどのように開かれていますか。画面いっぱいに広がっていると作業がしずらくなります。ブラウザの表示方法は二通りあります。どちらか、適している方法を選択してください

まず、ブラウザの横幅を「はげちゃんの世界」の上段、「タイトル背景写真」が完全に表示されるように「横幅を調整」してください。「はげちゃんの世界」の「タイトル背景写真」が表示された状態で、ブラウザの上部余白をクリックしたままで、ズルズルズルとディスクトップの左端へ移動します。右側に空いている部分ができれば、そこが作業を行うところなります。

右側に空いている部分がない場合は、ブラウザをディスクトップの左上から5mm下までズルズルズルと移動します。ブラウザの下をポイントすると中央部に上下の矢印が出るので、矢印をクリックした状態でディスクトップ画面の上下の中間まで押し上げます。すると、ディスクトップの下半分に空ができるのでそこが作業を行うところになります。

ブラウザの位置を決めたら、タイトルバー右上側にある「最小化」ボタンをクリックすると画面は消え、ディスクトップ左下のタスクバーに表示されている「ブラウザ」のアイコンをクリックすると元の位置にブラウザが表示されます。何度か練習してください

a.作業中は、ブラウザに「はげちゃんの世界(のWeb頁作成講座)」とあなたが作成
  している「島崎藤村の魅力」のページを時々切り替えて表示します。

b.まず「Web頁作成講座」の説明を読みながら、ブラウザの空いている場所に開いた
  エディタで作業を行い、その結果はブラウザを「島崎藤村の魅力」に切り替えて確認
  します。

c.次の作業を始める時は、「Web頁作成講座」に切り替えて説明を読みます。

トップへ戻る

 6-4 エディタの入手

エディタは、文字情報のみのファイル(テキストファイル)を作成し、編集し、保存させるためのソフトウエアです。Windws のメモ帳や Macintosh のシンプルテキストなども代用できますが、ウエブページの作成にはちょっと不便です。

ウエブページを作成するには専用の「エディタ」があると便利です。高機能のものは必要ありませんが、あなたが使いこなしているエディタがあればそれをお使いください。

エデイタを知らない方に、私が愛用しているフリーソフトの「Crescent Eve」をご紹介します。対応OSは Windows 2000/XP/Vista/7で、「窓の杜」よりダウンロードすることができます。私の過去6台のパソコンでは何ら問題なく使えましたが、あなたのパソコンでの動作を補償するものではありません。インストールするのはご自分の責任でお願いいたします。

  窓の杜のダウンロード画面をクリックで表示します⇒ 「Crescent Eve

ご自分の責任でインストールを決めた方へインストール方法を説明します。ダウンロードのボタンをクリックすると、Windows7の場合は「ダウンロードファイル」にファイル「Crescent Eve(例:EVE089.exe)」がダウンロードされます。このファイルをディスクトップへドラッグ&ドロップします。

圧縮されていtる「Crescent Eve(例:EVE086.exe)」のファイルをダブルクリックすると、ユーザーアカウント制御「次の不明な発行元からのプログラムにこのコンピュータへの変更を許可しますか」が表示される場合があります。「はい」をクリックすると「インストールするフォルダを指定してください。」と表示され、最善のインストール先が表示されています。「次へ」をクリックすると、「オプションを選択出来ます。」と表示されます。

「デスクトップにショートカットを作成」以外をチェックして「次へ」をクリックします。「インストールを開始します。」で「次へ」をクリックし一呼吸置くと「インストールが完了しました。」と表示されます。「閉じる」をクリックします。

エディタでの作業は、一区切りつくたびに「上書き保存」をします。これを忘れるとそれまでの努力はすべて無駄になります。エディタの使い方や保存の仕方、作成した作業の確認方法は必要なときにそのつど説明します。

Crescent Eve で作業をすると感激する場面が何度も出てきます。このようなすばらしいソフトウエアを無料で提供してくれるエディタの作者「kashim.com氏」に心から感謝いたします。

注意:「Crescent Eve」はWindows10に未対応ですが、テキストの作成や編集には使えます。

トップへ戻る

 6-5 レタッチソフトも必要

ウエブページに表示する写真などは、読み込みに時間がかかるのでサイズを縮小して使います。デジカメで撮影した写真やフリーのイラストを利用するときに、画像などの修正や縮小を簡単な操作で行えるレタッチソフトが必要になります。写真やイラストを縮小することができるソフトを購入され、何度も修正や縮小操作をされたことがあればそのソフトを使ってください。

講座では Windows7に付属している、改良された「ペイント」ソフトを使用します。「スタート」メニューから「すべてのプログラム」を選択し、「アクセサリ」のファイル内に「ペイント」ソフトがあります。保管している場所を確認しておきましょう。

トップへ戻る

          初級講座1 → 「 初級講座2 」へ