はげちゃんの世界

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

中級講座1

HTML5のWebページ

初級講座をマスターされた方は、最新のHTML5とCSS3でWebページづくりに挑戦しましょう。初級講座より若干複雑な構造ですが、何度も失敗を繰り返しながら可能な限り簡単な作成方法を考えましたので、最新の技術を一緒に勉強していきましょう。

中級講座は、初級講座を学び終えてから挑戦してください。初級講座で説明したことは可能な限り省略していますが、初級講座で説明している内容とダブルこともあります。それだけ重要なことと考えてください。

1 最新の技術

 1-1 HTML5とは

HTML5は、2022年には完成するだろうとされているWebのルールです。次世代の規格として生まれ、現在も開発が続いています。しかし、完成するまで使えないわけではありません。本当に使いものになるかどうかは使ってみなければわからないのです。

いち早くHTML5に対応したウエブブラウザは、アップルの「サファリ(Safari)」、モジラ財団の「ファイアフォックス(Firefox)」、グーグルの「クローム(Chrome)」、オペラソフトウエアの「オペラ(Opera)」などです。マイクロソフトは2010年にIE6のサポートを終了して、HTML5対応の「IE9」を発表しました。

世界中の人々はHTML5を自由に使えますが、移行が面倒と思い込んでいる人も多いようです。また、HTML5へ移行しても、はげちゃんのように新機能をほとんど導入していないサイトもあります。基本的な機能で十分と考える人もいるからです。

トップへ戻る

 1-2 CSS3とは

CSS3はCSS2.1の次世代規格で、CSS2.1の機能はそのままCSS3でも利用することができます。CSS2.1ではJaveScriptなどを利用して表現するしかなかったデザインを、スタイルシートで表現できるようになりました。

膨大な新機能が採用されたため、標準規格もフォントやリスト、テーブル、背景という機能別に策定が続けられています。また、HTMLとCSSの組み合わせに関する規定はないので、HTML5でCSS1の機能を利用することもできます。

まだまだ未完成の状態ですから、HTML5とCSS3の規格が変更される可能性もあります。規格が変わった時には対処できるようにしておくことが求められます。

トップへ戻る

 1-3 HTML5の特徴

HTML5は、HTML4と異なる言語ではありません。従来のHTMLやXHTMLに、便利な機能を加えた言語で、時代に合わないものは変更されたり廃止されました。HTML5の書き方は、従来のHTMLやXHTMLとほぼ同じです。

HTML5で新たに追加された仕様は膨大な量になります。一例をあげると、video要素やaudio要素を使えば、動画や音声を簡単に再生できます。canvas要素を使えば、JavaScriptを使って図形を抽画したり動かすこともできます。

主なブラウザはどれもHTML5への対応をどんどん進めています。ブラウザの進化に合わせて、HTML5の便利な部分・興味のある部分を中心に、少しずつ試してみることをお勧めいたします。なお、IE8(Internet Explorer8)は対応していません。

HTML4の後に登場したXHTMLでは、「こう書かねばならない」といった規則が多く、覚えるのが大変でした。HTML5ではよりシンプルに書けるようになり、HTML4やXHTML双方の従来の書き方が使えます。基本的な書き方を覚え直す必要はないということです。

HTML5の仕様はまだ確定していませんし、ブラウザの対応も完全ではありません。ブラウザによって機能への対応度合いが異なります。お使いのブラウザがすべての機能に対応し、すべてを閲覧できるとは限りませんのでご注意下さい。

トップへ戻る

 1-4 CSS3の特徴

CSS3は新しい言語というわけではなく、従来のCSSと互換性があります。これまでのCSSに、新しく便利な仕様を加えたのがCSS3です。基本的な文法(記述方法)に変化はほぼなく、従来のCSSで使えた記述方法はそのままCSS3としても使えると考えて問題ありません。

1つのCSSソースの中で、新旧のCSSが混在していても問題ありません。CSS3の記述とCSS2・1の記述を一緒に記述していても書き換える必要はありません。なぜなら、CSSソースには、バージョンを示す記述が存在しないからです。

CSS3に対応していないブラウザで上記のCSSを表示させた場合でも、全部のCSSソースが無視されることはありません。CSS3部分の記述が無視されるだけで、それ以外は正しく表示されます。

トップへ戻る

2 基本技術の利用

 2-1 HTML5の基本

HTML5は下位互換性を持っていますが、HTML4.01とXHTML1.0のすべての機能を引き継いでいるわけではありません。そのため、HTML5で廃止されたタグや属性を修正しなければ考えている結果にはなりません。

しかし、HTML4.01やXHTML1.0の文法に従い、非推奨とされた機能を利用していないWebページの多くは、コンテンツのマークアップを変更しなくてもHTML5に移行することが可能です。

Web頁作成法の初級講座1~6までを一通り学ばれ、例題通りにウエブページを完成されていれば難しいことはありません。中級講座ではHTML5の基本技術を使ってWebページを作成します。

トップへ戻る

 2-2 Webページのソース

Webページはどのページにも共通する約束事があります。あなたが使いこなすW3Cの「文法」や、表示順序などを示す「ダグ」などがこれに該当します。共通している部分は「コピー&ペースト」でテキストファイルを作成するので、毎回スペル(アルファベットの綴り)で悩むことはありません。

あなたが使用するHTML5の文法で作成した「ソースの原版」をつくりました。初級講座2で使用したHTML4の「ソース原版」と、比較してご覧になると違いが分かります。

HTML5のソースはすべて小文字で表記しています。作業が必要な個所に「◆」の記号を入れてありますが、少々手を加えないと使いずらい状態です。

トップへ戻る

<!doctype html>
<html lang="ja">
<head>
<meta name="keywords" content="◆">
<meta name="description" content="◆">
<meta charset="utf-8">
<title>◆</title>
<link rel="stylesheet" href="styles.css" >
<!--[if Lt IE 9 ]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
<![endif]-->
</head>
<body>
<header>
<h1>◆</h1>
<h2>◆</h2>
</header>
<nav>
<div class="menu">
<ul>
<li><a href="◆">◆</a></li>
</ul>
</div>
</nav>
<div id="main">
<article id="content">
<section>
<h1 id="site01">◆</h1>
<h2 id="site02">はじめに</h2>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>
</article>
<aside>
<section id="sidebar">
<h3><strong>目次</strong></h3>
<ul>
<li><a href="#site01">◆</a></li>
</ul>
<h3><strong>推薦情報</strong></h3>
<ul>
<li><a href="◆">◆</a></li>
</ul>
</section>
</aside>
<footer>
<div class="footer">
<p class="foot">Copyright 2017 ◆. All rights reserved.</p>
</div>
</footer>
</div>
</body>
</html>

トップへ戻る

3 ソースの説明

HTML5のソースの内容を詳しく見ていきましょう。

 3-1 ドキュメント宣言

最初の一行目はソースがどのような文法で書かれているかを示す「ドキュメント宣言」といいます。HTML4用のドキュメント宣言とHTML5のドキュメント宣言は大幅に簡略化されました。

HTML4では、「<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01// EN"
"http://www.w3.org/TR/html4/strict.dtd">」と記入していました。

HTML5では文章型定義が不要になったので下記のように短くなりました。

<!doctype html>

トップへ戻る

 3-2 HTML要素

HTML要素の開始タグではlang属性でそのページで使用する言語を指定することになります。作成するWebページは日本語を使用するためJapaneseの略字「ja」を入力します。

HTML要素の開始タグは「<html lang="ja">」で、終了タグは「</html>」となります。タグの多くは開始タグと終了タグが対になっています。「<html lang="ja">」の終了タグはソースの最終位置に表示します。

<html lang="ja">

トップへ戻る

 3-3 head領域のソース

headの情報は、主にブラウザや検索サイト向けの情報です。インターネットに接続して、検索窓に入力すると調べたいものが順に表示されます。世界中のウェブサイトの中から、キーワードが合致したサイトや関連性の高いサイト、人気があるサイトなどを総合的に評価して順に表示させているのが検索エンジンと呼ばれるものです。

主要な検索エンジンを保有している会社は「Google、Yahoo、Microsoft」の三社で、他は三社から借りているようです。一般的に検索エンジンはロボット型検索エンジンを指し、クローラーといわれるプログラムがホームページのリンクを辿り巡回しています。

head領域を示す「<head>と</head>」の間には、データに関する情報「meta情報」を入力します。

トップへ戻る

  3-3-1 クローラー用の情報

クローラーに情報を収集してもらうため、作成したWebページを検索するためのキーワードを10種類程度記入します。記入する箇所は「◆」の位置です。複数のキーワードは半角の「,」で区切ります。

<meta name="keywords" content="◆">

クローラーに収集してもらうために、作成したWebページを検索するための紹介文章は、日本語で100文字程度を記入します。記入する箇所は「◆」の位置です。

<meta name="description" content="◆">

トップへ戻る

  3-3-2 ブラウザ用の情報

ブラウザへの情報として、HTML文書はテキスト「text/html」で表記しています。文字列へ変換する方法とする方法は「Unicode(ユニコード)」を使って16ビット文字セットを8ビットのバイト列に変換するよう指示しています。

HTML4では「Shift_JIS」を使っていましたが、従来の処理システムとの親和性を高めるためにHTML5では「utf-8」を使うことにしました。「Shift_JIS」を使えないわけではありません。

<meta charset="utf-8">

Webページのタイトル(表題)を「◆」の位置に記入します。私のWebページでは「<title>はげちゃんの世界</title>」となっています。

<title>◆</title>

外部スタイルシートを利用する場合は、属性などを指定しなくても利用できるようになりました。「stylesheet」を略して「styles」としています。

<link rel="stylesheet" href="styles.css">

スタイルシートの保存位置は、index.htmlファイルと同一位置にあるので位置情報は記入せずに、ファイルの名前「styles.css」のみを記入しています。

IE8以下は、HTML5の新要素には対応していないのでスタイルシートが適用されません。そこで、IE9未満にもスタイルシートを読み込ませるためのスクリプトを用意しておきます。但し、JavaScriptをオフにしているIE8以下には適用されません。

<!--[if Lt IE 9 ]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
<![endif]-->

以上が、head領域に記述する最低限の情報です。

トップへ戻る

 3-4 bodyのソース

HTML5では「セマンティック・マークアップ」という考え方が導入されました。HTML4のソースで「div」は、特定の意味を持たない自由度を持たせるための汎用的なタグとして使われていましたが、タグそのものに意味を持たせて論理構造を明確に表すことになったのです。

この理由はページやセクションの中で、そのコンテンツの中に記述された内容が何を意味するかを表す情報(メタデータ)を一定の規則に従って付加することで、コンピュータが効率よく情報を収集・解釈できるようにする考え方です。

 3-4-1 header領域

body領域の始まりは「<header>と</header>」情報です。bodyに記述する情報のタイトル(表題)を「<h1>◆</h1>」の◆に入力します。

サブタイトル(副標題)が必要な場合は、「<h2>◆</h2>」の◆にサブタイトル文字を入力します。不要な場合は「<h2>◆</h2>」を削除します。

<body>
<header>
<h1>◆</h1>
<h2>◆</h2>
</header>

このページの表題は「はげちゃんの世界」で、サブタイトルは「人々の役に立とうと夢をいだき、夢を追いかけてきた日々」となっています。

トップへ戻る

 3-4-2 ナビゲーション領域

このページの上段には「ホーム・減災と防災・MS管理体験・町内会運営体験・Web頁作成法・・・」など、それぞれのサイトへ導くためのナビゲーションバーがあります。文字をクリックすると、そのペ-ジへ移動することができます。

ナビゲーションバーは「<nav>と</nav>」の間に領域を確保して、その中にリスト形式で作成します。どのような名称にするかは作成者が決めますが、ここでは「<div class="menu">」という名前を付けて領域を作っておきました。

「<ul>と</ul>」はリストを表示する領域で、「<li><a href="◆">◆</a></li>」には、リンク先のサイトの「URL」と「サイト名」を入力します。URLの入力は実際にWebページを作成するときに説明します。

リストは「<li><a href="◆">◆</a></li>」をコピー&ペーストすることで必要な件数を増やすことができます。リストの終了部分は終了タグ「</div>」で閉じ、領域は「</nav>」で閉じます。

<nav>
<div class="menu">
<ul>
<li><a href="◆"></a></li>
</ul>
</div>
</nav>

トップへ戻る

 3-4-3 メイン領域のソース

公開する情報は、「<div id="main">と</div>」の間に入力します。開始タグには他と区別するため独自の名前を付けますが、あらかじめ「main」という名前をつけておきました。

「<div id="main">」の領域内に「<article id="content">と</article>」の領域をつくり、「<article>」の領域内に文章の「節」となる「<section>と</section>」の領域をつくります。

「<div id="main">」は公開する情報の範囲、「<article>」は記事を入れる範囲という意味です。「<section>」はまとまった内容という意味になります。

情報の表題を「<h1 id="site01">◆</h1>」の「◆」に入れます。ここでは、サイドバーに作る目次からリンクさせるための記号を「site01」と入力しておきました。情報の開始部分の表題に目次からリンクさせるための記号「site02」と「<h2 id="site02">はじめに</h2>」と「はじめに」という名前をつけてあります。

「<h2 id="site02">はじめに</h2>」と「<p>◆</p>」はコピーアンドペーストで必要なだけ増やすことができます。表題を増やした時は、「site02」「site03」と数字を積算し、表題も内容に相当するものを付けます。「<p>◆</p>」に情報の本文を入力します。

説の本文である記事を入力し終わったら「そのページの最初の部分に戻る」ためのリンクを張ります。リンクの名前を「top」として「<p class="top"><a href="◆">トップへ戻る</a></p>」となります。リンク先の◆にはそのページのURAを入力します。

本文の入力がすべて完了したら「</section>」で閉じます。続いて「<section>」を設けることもできます。すべての入力が終わった時点で「</article>」の終了タグを入力します。「<div id="main">」の領域を閉じる「</div>」はまだ出てきません。

<div id="main">
<article id="content">
<section>
<h1 id="site01"></h1>
<h2 id="site02">はじめに</h2>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>
</article>

トップへ戻る

 3-5 サイドバーの領域

このページの右端には、「目次」「推薦情報」「プロスポーツ」「製作者の横顔」「写真館」「W3C評価」などという情報が並んでいます。このような情報はWebページで発信する情報の補助的なものですからサイドバーを作って表示しています。

サイドバーは「<aside>と</aside>」の中に「<section id="sidebar">と</section>」の領域を作って入力します。開始タグの asideは「かたわらに」という意味で、「section」には分かりやすいように「sidebar」という名前をつけました。

トップへ戻る

 3-5-1 目次のソース

「<h3><strong>目次</strong></h3>」は見出しになります。「目次」の文字を太文字にするため「<strong>と</strong>」タグで囲んであります。

「<ul>」から「</ul>」はリスト表示を意味します。「<li><a href="#site01">◆
</a></li>」までをコピーし、エンターキで行を入れてペーストすることで、表示する情報量を増やすことができます。

<aside">
<section id="sidebar">
<h3><strong>目次</strong></h3>
<ul>
<li><a href="#site01">◆</a></li>
</ul>

トップへ戻る

 3-5-2 推薦情報のソース

「<h3><strong>推薦情報</strong></h3>」は見出しになります。「推薦情報」の文字を太文字にするため「<strong>と</strong>」タグで囲んであります。

「<ul>」から「</ul>」はリスト表示を意味します。「<li><a href="#site01">◆
</a></li>」までをコピーし、エンターキで行を入れてペーストすることで、表示する情報量を増やすことができます。

<h3><strong>推薦情報</strong></h3>
<ul>
<li><a href="#site01">◆</a></li>
</ul>
</section>
</aside>

目次と推薦情報を作るための「<section id="sidebar">」と「<aside">」の領域を「</section>」と「</aside>」で閉じます。

トップへ戻る

 3-6 フッタの領域

フッタはページの下端部のことです。「<footer>と</footer>」には、一般的に著作権を表示します。開始タグには他と区別するため独自の名前を付けますが、あらかじめ「footer」という名前をつけてあります。

「<p class="foot">と</p>」には、表示する文字を本文とは異なる文字種や大きさをスタイルシートで指定するために「foot」という名称を付けて他と区別できるようにしています。

日本では、著作物を発表した時点で自動的に著作権が発生することになっています。著作権表示がなくても、他の人の著作物を勝手にコピーして利用すると違法になります。日本が加盟している「ベルヌ条約」では、「著作物は発表した時点で自動的に著作権が発生するので特に何もしなくていい」ということになっているからです。

著作権表示は現在慣習として残っているだけで、「著作者を明示できる・著作物の消滅の時期などを知ることができる・善意の著作権侵害を予防できる」といった程度の目的で使われているようです。

フッタの「<div class="footer">と</div>」には、慣習に従うと「Copyright 2017 ◆. All rights reserved.」という文字列が入ります。著作権が発生したのは「2017年」で、著作権者の氏名は「◆」、そして「All rights reserved.=権利を留保します」という意味になります。

<footer>
<div class="foot">
<p class="foot">Copyright 2017 ◆. All rights reserved.</p>
</div>
</footer>

トップへ戻る

 3-7 最終処理

公開情報の最終部には「<div id="main">」の領域を閉じる「</div>」の終了タグを入力します。更に、「<body>」の領域を「</body>」で閉じ、最後に「<html lang=
"ja">」の領域を「</html>」で閉じます。

</div>
</body>
</html>

ここまでが、HTML5で作成するWebページの基本的な最小限のソースです。

トップへ戻る

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

HTML5の概略が分かったところで、あなたと一緒に作るウエブページを作る準備を始めましょう。基本的なHTML5の文法とタグを使って一緒に作成作業をしていくと、あなたのパソコンにウエブページができあがります。

あなたと一緒につくるウエブページは、日本史の謎を推理する本です。日本史は日本人の先祖である人々の成功と失敗の記録集です。歴史を学ぶというのは年号や事項を記憶するのではなく、なぜそのようなことが起き、その結果はどうなり、それは後にどのような影響を与えたか、という日本人の考えや行いの流れを学ぶことです。

何事にも、原因があるから結果が生まれます。結果は新たな原因を生み出し再び結果をつくります。歴史は大きな流れとして捉えなければ理由が分かりません。しかし、学校で学ぶ歴史は年代と事象の記憶のみですから分からないことばかりです。

倭人の発音を伝え聞いた陳寿は、魏志倭人伝に「邪馬台国」や「卑弥呼」と漢字で表記しました。私たちは「やまたいこく」や「ひみこ」と学びましたが、当時の倭人の言葉は正確に伝わっていたのでしょうか。また、魏志倭人伝は正確な歴史書なのでしょうか。

1274年に世界最強とされたモンゴル軍3万の兵が博多湾に攻め寄せ、1282年には14万もの大群で再び押し寄せましたが、二度とも暴風雨で壊滅しました。蒙古軍を撃退したのは神風と呼ばれた暴風雨が撃退したのでしょうか。

北海道は北緯42度以上の亜寒帯に属し、江戸時代までは日本一の長さだった石狩川が蛇行しながら湿地帯を作り、石狩平野には農耕不適な泥炭層が広がっていました。弥生時代のない北海道で、食味ランキング「特A」を獲得した米が誕生したのはなぜでしょう。

歴史という大河に沿って日本を眺めていくと様々な疑問が浮かび上がり、前後の事象から必然性を推理すると歴史は面白くなります。あなたと作るウエブページでは、3つの歴史的な疑問を推理してみましょう。

トップへ戻る

 4-1 ウエブページの名

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

トップへ戻る

 4-2 全体の姿

表紙となるホームページには導入となる「奇跡の列島と民族」を掲載し、つづいて「卑弥呼の謎」「蒙古軍撃退の謎」「北海道米の謎」というページを作成します。それぞれに「はげちゃんの推理」と「推理の根拠となった資料」を掲載し、「あなたの推理」も加えていただきます。

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

トップへ戻る

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

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

トップへ戻る

 4-4 配慮すること

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

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

トップへ戻る

 4-5 楽しもう

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

トップへ戻る

5 作成環境を整えよう

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

トップへ戻る

 5-1 プロバイダの指示

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

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

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

トップへ戻る

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

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

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

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

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

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

トップへ戻る

 5-3 ブラウザの扱い

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

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

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

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

a.作業中は、ブラウザに「はげちゃんの世界(の中級講座)」とあなたが作成してい
  る「日本史の謎」のページを時々切り替えて表示します。

b.まず「はげちゃんの世界(の中級講座)」の説明を読みながら、ブラウザの空いて
  いる場所に開いた エディタで作業を行い、その結果はブラウザを「日本史の謎」に切
  り替えて確認します。

c.次の作業を始める時は、「はげちゃんの世界(の中級講座)」に切り替えて説明を
  読みます。

トップへ戻る

 5-4 エディタについて

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

ウエブページを作成するには専用の「エディタ」があると便利です。高機能のものは必要ありませんが、あなたが使いこなしているエディタがあればそれをお使いください。エディタでの作業は、一区切りつくたびに「上書き保存」をします。これを忘れるとそれまでの努力はすべて無駄になります。エディタの使い方や保存の仕方、作成した作業の確認方法は必要なときにそのつど説明します。

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

  作者のWebページ右のダウンロードをクリックします⇒ 「Crescent Eve

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

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

トップへ戻る

 5-5 レタッチソフトについて

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

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

トップへ戻る

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