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

最終回 Webコンテストの応募にチャレンジしよう

 第1回から第5回までで説明してきたテンプレートを利用すると、初めての人でも、かなり体裁の良いWebページが短時間で制作できるようになります。それは、この講座で提供したテンプレートが、変更のしやすさ、見やすさ、共同開発の利便性 の観点から機能的にデザインされているからです。
 このテンプレートを利用して、いい作品を創作し、Webコンテストに提出してみましょう。

「全国中学高校Webコンテスト」とは

全国中学高校Webコンテスト
「全国中学高校Webコンテスト」は、生徒が3人から5人で一つのチームを組み、自分たちの興味のあるテーマで、Web教材作品を作り、その制作過程と出来栄えを競う、歴史と伝統のある全国レベルのコンテストです。

1995年、米国でスタートしたこのコンテストは、ThinkQuest(シンククエスト)という名称にて、国際的な教育プログラムとして全世界に広がり、日本では1998年から続いています。

作品の内容は、「Web教材」または「問題解決」の2つの区分があり、優秀な作品はファイナリストとして発表され、このサイトの教材ライブラリーに公開されます。中でも特に優秀な作品には、文部科学大臣賞、総務大臣賞、経済産業大臣賞、特別賞が授与されます。

詳細は以下をご覧ください。

全国中学高校Webコンテスト(公式サイト)
http://webcon.japias.jp/


効果的な表現のために(テンプレートのカスタマイズ)

 上記の応募作品の作成には、数週間(あるいは数か月)かけることができ、少しずつ内容を追加・改善したり、見やすくしたりすることが可能です。
 実際の審査では、Webの内容の充実に関する評価(数か月かけて改善されてきたことが前提になるので)が重点的で、デザインに関しては、統一性があれば、そんなに凝ることは必要ありません。それでも、テンプレートをそのまま利用するだけでは、作品が単調で同じように見えてしまいますので、色の変更やイラストの挿入、映像などを取り入れ、全体の構成をポリッシュアップさせる必要があるでしょう。

 以下のデザイン変更のためのテンプレートの修正・追加方法の解説の一部は、5回目までに説明したものと同じです。各ページでの説明と合わせて確認し、実際にやってみましょう。

▼背景色をかえる

各ページのヘッダー部にあるスタイルのうち body 内の background-color の記述を変更すると、各ページ毎に全体の背景色をかえることができます。

■テンプレートの変更例(白から薄黄色に変更する場合の記述)

body {width:900px;background-color:white;}  →  

          body {width:900px;background-color:lightyellow;}

詳しくは第2回「ページの色を変えてみよう」を確認下さい。


なお、コラムごとに背景の色をつけることも可能です。その場合の変更の仕方は次のようになります。

■例示:特定のコラムの背景色を薄桃色にしたい場合

<div class="column" style="background-color: #ffb6c1">
<p>
  ・
  ここには、テキストを書く
  ・
  ・
  ・
</p>
</div>

 ここで、色指定について#ffb6c1という16進数での書き方をしてみました。背景色を変える際に書いたように、色の名前(英単語)で示すことも可能です。その場合は lightpink となります。色名での指定はわかりやすいですが、指定できる色数が限られます。一方16進数での指定は微妙な背景色などまでも細かく指定可能となります。詳しくは「Web色見本 原色大辞典」等のWebページを参考にしてみてください。

■ブラウザでの表示

  ・
  ここには、テキストを書く
  ・
  ・
  ・

▼線の太さと色を変える

 線の色や太さを変更する場合もヘッダー部にあるスタイルのうち それぞれ border が定義する線の太さと色を変更することで、これが可能になります。

■テンプレートの変更例(線の太さを5pxから10pxに、線の色を緑から赤に変更する場合の記述)

h2 {
  margin-top:30px;
  padding: 3px 3px 0px 10px;
  color:green;
  border-left:solid 5px green;  → border-left:solid 10px red;

 }

詳しくは第4回「タグへのスタイル設定」を確認下さい。

▼1つのコラムに、複数個の画像を入れる

(1)画像を横に並べる場合
 写真を表示する<div>である <div class="imgLeft">~</div> を繰り返します。この場合、写真は指定されたサイズで左から順に配置されていきます。

■例示:<div class="imgLeft">を横に続けて3つ並べる
<div class="column"> <!--begin コラム-->

<div class="imgLeft">
<img src="images/page1-1.jpg" width="200" alt="画像説明" ></div>
<!--(写真左側)-->

<div class="imgLeft">
<img src="images/page1-2.jpg" width="200" alt="画像説明" ></div>
<!--(写真左側)-->

<div class="imgLeft">
<img src="images/page1-3.jpg" width="200" alt="画像説明" ></div>
<!--(写真左側)-->

<p style="clear:both"></p> </div>
<!--end コラム-->

 最後の行に赤字の一行 <p style="clear:both"></p> を必ず加えて下さい。これを加えないと、下に文字があった場合、右側に回り込んでしまいますので注意下さい。

■ブラウザ上の表示

画像説明
画像説明
画像説明


(2)一つのコラムに複数個の画像と説明を加えたい場合
 これは、よくある要望です。答えは簡単で、以下のように、青字の部分(これが写真と記事の本体の記述部分)をコピーして、複製するだけでいいのです。このとき、写真を右側に表示したければ、class="imgLeft"を、class="imgRight" に書き換えるだけです。
 このとき、2つの記事の間に、必ず <p style="clear:both"></p> を挿入してください。そうでないと全体のデザインがおかしくなってしまいます。

■例示:一つのコラムに複数個の画像と説明をもう一つ追加する

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

<div class="imgLeft">;
  <img src="images/page1-1.jpg" width="200" alt="画像説明" ></div><!--(写真左側)-->

<p>
  ここには、記事1を書く
  ・
</p>


<p style="clear:both"></p>

<div class="imgRight">
  <img src="images/page1-2.jpg" width="200" alt="画像説明" ></div><!--(写真右側)-->

<p>
  ここには、記事2を書く
  ・
</p>


</div>
<!--end コラム-->

■ブラウザ上の表示

画像説明

ここには、記事1を書く
  ・
  ・
  ・
  ・
  ・
  ・

画像説明

ここには、記事2を書く
  ・
  ・
  ・
  ・
  ・
  ・

この変更については、第1回「写真サイズや位置の変更」もあわせて確認下さい。

▼図や表を加える

 解説に図や表を加えるとよりわかりやすくなる場合があります。表については<table>というタグがあり、複雑な表現ができますが、構造が込み入っているので、HTMLで記述することは初心者にはお勧めできません。

 簡単な方法は、図や表を別のソフト(例えばエクセルなど)で作成し、ディスプレイの画面をキャプチャーして画像化し、写真と同様に扱うことです。Windowsでは、snippingToolという画面の任意の場所を画像(png)ファイルに切り取る基本ソフト(スクリーンショットといいます)があるので、それを使って表やグラフを画像化するといいでしょう。

 画像化された表やグラフは、縮小したりトリミングしたりた後、名前を付けて保存し、写真と同じように

<div class="imgLeft">
<img src="images/xxx.png" width="200" alt="画像説明" ></div><!--(写真左側)-->

で表示します。画像編集の方法は、第2回「写真縮小のアプリ」を確認下さい。

▼動画を加える

動画の利用は、第4回「少し高度なスタイル」内の「動画の表示」で説明しました。
 次のように、 <img> のかわりに<video>タグを使って動画を表示させます。

■動画を左側に表示させる場合

<div class="imgLeft">
  <video src="images/movie-kame.mp4" width="240" hight="180"
    type="video/mp4" controls="control">

   </video></div><!--(動画左側)-->


<p>
 ここには、解説を書く
  ・
  ・
  ・
</p>

■ブラウザでの表示

 ここには、解説を書く
  ・
  ・

最後に

 いかがでしたか。テキストとして読んでいると難しいようですが、実際に変更するのは、赤字の部分だけで、やってみると比較的簡単に様々な表現の変更ができ、魅力的で効果的なWebに改良できることがわかると思います。

 もちろん、コンテストで受賞するレベルの作品は、デザインにも内容にも十分の時間と検討を重ねたものばかりですので完成度が高いですが、この講座のテンプレートをカスタマイズするだけでも、入賞できるレベルの作品ができることは、間違いありません。要は、評価の対象は、作品の内容(何を調べ、どのように分かりやすく、まとめたのか)なのです。

皆さんも、ぜひチャレンジしてください。【完】