超初心者のための Web作成特別講座

第1回 はじめに

画像説明

 これから、簡単な方法で、きれいにレイアウトされたWebページを作成する方法を、実際に作業をしながら学びます。
 作業は、windowsで行い、ブラウザは、IEやChromeを利用することを前提にしています。
 まず、左のアイコンをクリックし、サーバから教材を自分のPCにダウンロードしてください。この作業は、スマホではなく、PCから行なってください。
 クリックすると、zipという方法でまとめられたファイル群が、皆さんのPCにダウンロードされます。  template1という名前のフォルダがPCの指定場所に出来上がりますので、これを複製してmyWebなどの名前をつけてください。 Web作成には、このフォルダのファイルを使います(実はこの解説書も、このフォルダの内容を利用して作成しています)。

内容は、
 index.html
 page1.html  page2.html  page3.html  page4.html
 imagesフォルダ
です。

 5つのhtmlファイル(拡張子が.html)は、名前は違いますが、実は中身はほとんど同じです。どれから(クリックして)実行しても相互に参照できます。
 また、imagesという写真の保存用フォルダには、page1-1.jpg など、それぞれのページで使っている写真がたくさん用意されています。初心者のうちは、どれがどのページの写真なのかわかりにくいので、このような名前を付けています。しかし、名前の付け方は自由です。ただ、日本語は、文字化けするので、必ず英数小文字(使っていい記号はマイナス(-)だけ)、途中に空白を含まないようにします。(this is a pen.jpg はダメ、This-is-a-pen.jpgのようにする)

page1.htmlを見る

画像説明

 では、まず、page1.htmlをダブルクリックしてください。デザインされたWebページが表示されるでしょう。説明内容や写真は、適当につけられていますので、皆さんが、自分のWebページになるように書き換えていきます。書き換えるのは、写真とそのサイズ、そして文章の内容です。

 1つのページを、わかりやすいように「章」と呼ぶことにします。1つの章は、いくつかの節で構成されています。書籍の「章」だと、順番に読んでいくことになりますが、Webページでは、どの章から読んでもかまわないので、順序性はありません。

 どのようにしたら、文章の内容を変更できるのでしょうか。

 簡単な方法は、メモ帳などのテキストエディタで修正することです。 メモ帳を立ち上げ(白紙が表示されるはず)、ここにpage1.htmlをドラッグしてみましょう。

 ソースリストがテキストエディタの画面に表示されましたか?

 メモ帳だと、各行の行番号がわからないので、もっと便利なテキストエディタがあればそれを使うといいでしょう。私は、mkeditor(手に入れたい人はこちら)というフリーソフトを愛用しています。

page1.htmlの中身

画像説明

 page1.htmlの内容をテキストエディタで見ると、100行のソースが表示されます。これが、このページのすべてになりますが、初心者のうちはすべてを理解できなくてOKです。しかし、基本的なことは、ここで説明しておきます。

 htmlファイルは、
<!DOCTYPE html><html lang="ja"> ではじまり、</html>で終わります。
 またその中に、<body>(31行目)~~</body>(99行目)に挟まれた部分があり、これが「本体」になります。

 このように半角のカッコ <> で囲まれた部分をタグと呼び、一般には、<ダグ名 >~</ダグ名>で囲みます。<>は、Web表示上特別な働きをしますので、この説明書で、勝手に機能しないように、すべて全角に置き換えて書いていますが、実際は半角のカッコで挟まれたもののことです。

 さて、本体<body>(31行目)までの上部にも、Webをデザインする上で重要なタグがたくさんありますが、この説明は次回以後にまわして、以下を説明しましょう。

 本体は、 <div class="xxxxx" >というタグをつかって、
 「ヘッダー」(33-44行目)「コンテンツ」(47-85行目)「サブメニュー」(87-93行目)「フッター」(95-97行目行目)の4つで構成されています。

 また、「コンテンツ」は、複数個の「コラム」(page1.htmlの中では4つ)で構成されており、第1回では、このうち

    <div class="column"> <!--begin コラム-->

で始まる、「コラム」の中だけを変更してみましょう。

写真サイズや位置の変更

画像説明

 コラムの中で写真を変更する方法は、簡単です。写真は、以下のタグでその位置と、大きさ、および写真のファイル名が記述されます。

このimgタグは、src=で示された名前の写真「page1-2.jpg」を横サイズ200pxで表示するという意味です。
 imagesフォルダにはすでに「page1-2.jpg」という名前の写真が保存されていますのでそれが表示されます。

 もしこれを別の写真に変更したいときは、名前の部分をその写真のファイル名に変更しても、写真そのものを「page1-2.jpg」という名前に変更してimagesフォルダに保存してもどちらでもOKです。

 ただし、Webで表示される写真は、かなり小さな横幅の大きさで十分です。カメラのメモリから入手した写真はファイルサイズが大きすぎます(最近は1枚1MByteを超えるものがほとんど)。写真を圧縮するツール(例えば「ペイント」でも可能)などを使って、横の長さが500px(ピクセル)以下、ファイルサイズが100KB以下になるようにして保存ください。


 さて、写真の表示サイズを変更するには、width=の値を他の数値に変更してください。ただし最大値は、670ですので、それ以上にすると表示の整合性がなくなります。
ちなみに670にすると、コラムの上部は写真で満たされ、文章は写真の下に回るようになっています。これはこれで便利ですね。

 また、imgRight(写真は右の意)の部分をimgLeft(写真は左の意.スペルを間違えないように注意)と書き換えると、写真はコラムの左側に移ります。写真のサイズに関する変更は、imgRightもimgLeftも、同じです。ちなみに width="0"とすると写真は表示されず、文章だけになりますが、写真を指定して、0サイズにすることは意味がないでしょう。このような文章だけのコラムの場合は、<div class="imgRight"> ~ </div>の行を削除すればいいのです。写真のないコラムの例を4節目に載せておきます。

テキスト内容の変更と確認

 テキストの部分は、<p> ~ </p>の部分です。
 ここの行間の文章を差し替えましょう(<p>と</p>は、消さないように)。

直接入力しても、別のファイルにあった文章をコピーしても、OKです。ただし、文章中の改行は、Webには反映されません。改行を入れたいときは、その行の最後に<br>(改行タグ)を埋め込みます。

▼では、やってみよう!

画像説明

 文章の変更と写真や写真サイズの変更方法がわかったら、実際にpage1.htmlを書き換えて自分のページを作ってみましょう。

 内容は、写真があったほうが面白いので、自己紹介でも私のおすすめでも、出身地紹介でも なんでもOKです(単なる練習ですので)。

 まずテーマを決め、コラムとして、3~5つぐらいにわけ、文章に対応する写真やイラスト(適切なものがフリー素材集など、例えば、こちら、にあります)や自分で撮った写真などを組み込み、文章を書き替えてみましょう。

(効率の良い作業)
 このとき、変更の様子がいつも確認できるといいですね。
 テキストエディタとブラウザの両方のソフトを同時に立ち上げておき、テキストエディタで修正したら、「上書き保存(ctrl-s)」し、ブラウザは、「最新の情報に更新(丸のようなマーク)」をクリックし確認するということを繰り返すと、効率がいいと思います。やってみてください。

次回は、色やデザインをきれいにする方法を考えましょう。