ブログのユニバーサル・デザインなどというのを教えたりしているのだけど、記事投稿でマークアップ言語を使え、ページ全体のソースもテンプレートである程度カスタマイズ出来るbloggerはどちらかというとお勧め。
授業の資料として、よく使われるマークアップ言語をここでもご紹介。
段落(<p>)
文書は段落より成り立つ。そのセンテンスの長さや要点と話法、それぞれ癖はあるだろうけど、段落分けの区切りがないと読みづらいし、判りづらい。
見出し(<h*>)
ある程度まとまった文書を眺めると見出し分けする事で判りやすくなる場合がある。がしかし、無理に見出し分けつけると混乱招く事もある。
文書をまとめる際に語る順番をポイント毎にまとめ、そのポイントのタイトルを付けてやる感覚が一番判りやすいも。
住所録など作る際に、どのように分類するか、親戚、知人、仕事上などで分け、更に地域別に整理するなど、自分の頭の整理を見出し分けを利用し、文書整理する感覚が一番ベストかと。
リスト(<ul>)
番号無しリスト(<ul>)と番号ありリスト(<ol>)があるけれども、リスト項目(<li>)で現す事でわかりやすさが増すのであれば、使うべきで、段落とリストをうまく使い分ける事が大切。
ただ、あまりに大きなリスト数の場合は小分けして見せるのも配慮のひとつだし、その場合、なんのリストなのか判るように見出しをつけてやると親切。
<h2>北海道</h2>
<ul>
<li>札幌市<li>
</ul>
<h2>東北</h2>
<ul>
<li>青森市<li>
<li>秋田市<li>
<li>岩手市<li>
<li>仙台市<li>
<li>山形市<li>
<li>福島市<li>
</ul>
囲み(<div>)
文書のまとまりの範囲を指定する際に使うもので、デザインがこの囲みをベースに行われると整理された文書情報を提供できる。
デザイン指定はスタイルシートを用いる場合、(<div id="main" class="top">)など、その位置のみのデザイン指定のid属性か、同ページで繰り返し使われるclass属性を使い分けるのがこつ。
リンク(<a>)
関連する情報を繋ぐリンクを張る場合、使う物で、上のマークアップの中でしか使えない
情報先へ飛ぶ場合は<a href="[飛び先アドレス]">リンク先</a>などと記述し、飛び先がページの中の場合は<a name="top" id="top">そして</a>などと記述する。
用語解説や補足、あるいは裏付け、関連項目などうまく使えば、活用度が増す。よく使われている「ここをクリック」などは飛び先の情報が不明確なので、使ってはいけないとされているし、同じ用語で、違う飛び先を指定するのは、利用者の混乱を招くともされている。
画像(<img>)
最も手軽に利用される画像のマークアップは<img src="画像のあるアドレス" alt="画像が表示されない時の代わりのテキスト" width="画像幅" height="画像高さ">で記述するのだけれど、画像の大きさは指定する事で読み込み遅い環境でもその大きさを確保する役目を果たすけれども、必ず記述というわけではない。
むしろ大切なのはalt属性で画像の代わりとなるテキストが必要ない時でもalt=""と記載する。代わりとなるテキストは画像イメージをそのままテキストにする必要はなく、むしろ文脈が通じるようにalt属性を使うのが大切。バナーなど画像イメージのみのリンクの場合はalt属性に必ずテキストを書かねばならない。
画像イメージを伝えたい場合はtitle属性を活用し、画像イメージの情報を付加する事も出来る。
<p>明日は
です。<p>
<p>明日は<img src="http://www.phoenix-c.or.jp/~takayan/img/sun.gif"
alt="晴れ" title="お日様" width="47" height="30" />です。<p>
テンプレートのカスタマイズはTemplate タグを参考にすると判りやすい。
[Amazon.com Search : Yasuzo Masumura]
[Amazon.co.uk Search : Yasuzo Masumura]
[Amazon.ca Search : Yasuzo Masumura]
[Amazon.fr Search : Yasuzo Masumura]
[Amazon.de Search : Yasuzo Masumura]
[Amazon.co.jp Search : Yasuzo Masumura]
