つづき交流ステーション区民レポーターが行く! ホームページビルダー講座 >スキルアップ講座

初心者講座と同じ時期に、すでに各プロジェクトで製作をしているスタッフを対象に、スキルアップ講座を行いました。ホームページビルダーのメニューを使ってページを作れるようになったものの、タグの使い方やファイルのまとめ方がよく分からない、という質問が製作ボランティアの間で出てきましたので、それらの疑問に答える形で講座を進めました。

ホームページの構文

ホームページのタグで重要なものが、文章の見出しを表す<H1>〜</H1>などのタグです。一見、文字を太くしたりサイズを変えているだけのように見えますが、このタグでくくった文字は普通の文字と全く役割が違います。検索エンジンのクロール(自動的に検索対象となることばを探す情報処理のこと)や、視覚障害者の方々のためにホームページの文章を読み上げてくれるソフトの処理では、この見出しを優先的に読んでいくことになっています。なぜなら、雑誌や新聞をお読みになって分かる通り、見出しというのは本文の内容を簡潔にまとめており、それを読むだけで大体の内容がつかめるものだからです。本文は、見出しを読んでさらに詳しい内容が知りたい時に選んで読めばよいのです。


同様にTABLE・P・DIVなどの文章構造や文字配置を規定するタグも、適切に使って初めてその効果を発揮するのです。ですから、ホームページ作りに少し慣れてきたら、文章や写真をどの部分に、どんな順番で並べたら訪問者が読みやすいかということを意識して作ると、読みやすいために訪問者がリピーターとなってくれたり、検索エンジンにかかりやすくなるという効果が出せるようになってきます。

Webアクセシビリティ

どんな環境の方にもホームページの情報がきちんと伝わるようにすること―それをアクセシビリティと言います。世の中に流通する情報の多くがホームページに掲載されるようになってきて、その情報にアクセスする人々の状態や環境も多様になって来たことから、この理念が重要視されるようになってきました。スキルアップ講座では、これを実際のページ作りに取り入れるということはどういうことなのかを明らかにすることも一つの目的でした。

スタイルシート

最近、ホームページのレイアウトや文字修飾の情報をHTMLタグとは別の記述方式で書く「スタイルシート」がよく使われるようになってきました。HTMLファイルについては、Cascading Style Sheets(CSS)という言語で書くことができ、これを使うとHTMLタグでいちいちレイアウト情報を指定しなくても、タグごとにまとめて一括で指定できるので大変便利です。また、ホームページの構文とレイアウト情報を切り離せるので、アクセシビリティの理念にもかなっている製作方法なのです。

たとえば、このページのスタイルシートを変更してみます。

スタイルシートを変更したページ(新しいページが開きます)

次に、スタイルシートをあえて外してみます。

スタイルシートを外したページ(新しいページが開きます)

ブラウザーソフトの設定や種類によっては、スタイルシートが読み込めないこともあるので、そういう時はこういう見え方になります。そして、スタイルシートがなくてもきちんと文章を順番に読めることが、アクセシビリティにかなった作り方、と言えるのです。


どうです、おもしろいでしょう。参加した皆さんにこれを見せると「わーおもしろい」「知らなかった〜」と絶賛(?)されました。また、このホームページビルダー講座のページ全体も、同じスタイルシートを使ってレイアウトの統一感を出しています。どのページも同じ位置に右側のリンクエリアができているのがお分かりになりますか?受講者の皆さんの感想ページもぜひ読んで下さい。

まとめ

講師のLukeもまだ勉強中なのであまり上手に作れませんが、製作の皆さんと一緒に学んでいきたいと思います。このように、一人一人が得意なことを分かち合っておたがいのスキルを磨くことが、一番身につくし楽しいと思います。この記事を読んでいるホームページに関心のある方も、ぜひ、私たちと活動しませんか。連絡先はここです。どうぞ気軽に参加し、一緒に都筑区の楽しいところ、いいところをレポートしましょう。お問い合せお待ちしております。

(講師・ページ製作:Luke 写真:akiko)