東海若手セラミスト懇話会
若セラ Web サイトのデザインの実装
若セラ Web ページ標準スタイル，見出しや本文などの使い方
How to Use Headings, Body and so on

［Web デザインの実装］

［若セラ Web デザイン］

［東海若手セラミスト懇話会］

見出し

基本レイアウト用のスタイルシート default.css では，見出し用タグのスタイルとして

<h1> 〜 </h1> ：明朝系，太字，文字サイズ 140 % ，中央揃え
<h2> 〜 </h2> ：ゴシック系，太字，文字サイズ 110 % ，左余白 5%
<h3> 〜 </h3> ：ゴシック系，太字，文字サイズ 100 % ，左余白 10%
<h4> 〜 </h4> ：明朝系，太字，文字サイズ 100 % ，左余白 15%
<h5> 〜 </h5> ：明朝系，イタリック，文字サイズ 100 % ，左余白 20%
<h6> 〜 </h6> ：明朝系，イタリック，文字サイズ 100 % ，左余白 25%

と指定してあります。

<h2> </h2> から <h6> </h6> に至るまで 自動的に少しずつ左余白を増やして， 階層がわかりやすくなるようにしています。 ただし，実際の Web ページでは原則的に <h4>〜</h4> までしか， 本来の意味での見出しとしては使わないものとします。 <h5> 〜 </h5> と <h6> 〜 </h6> は本文よりも大きな左余白をつけており， 本文についての見出しというよりも， 本文の下の階層に対する見出しという意味合いを持たせているつもりです。

これ以上細かい見出しを使わなければいけないようなら， むしろ別のページを新しく作った方が良いでしょう。 右余白はいずれもウィンドウ幅に対して 5% としています。

見出しの表示のすぐ上に，左余白が終わる位置からはじまる横罫線をつけてやれば内容の区切りがわかりやすくなるでしょう。 このためには見出しのところで，例えば

<hr style="margin-left:10%;margin-right:5%">
<h3 > 見出し < /h3>

とします。罫線の左余白の大きさは，見出しの左余白にあわせます。

フォントの種類に関しては， 一般的に普及しているブラウザの初期設定では対応する表示が得られない場合が多いようです。 ブラウザを適切に設定すれば意図通りのレイアウトが得られるかもしれませんが， ふつうのユーザの多くは，初期設定のままでブラウザを使っていると思われます。Web ブラウザの初期設定で表示したときにそこそこの見栄えがするようにしておくことは重要だと思います。

本文

Web ページの本文は <p> </p> で挟まれた１つの段落， または複数の段落からなるものとします。

<p> </p> で挟んでも字下げ（インデント）をしない設定にしてあるので， 字下げが必要なら全角スペースを入れてください。 また少し段落の間の隙間を広げる設定にしてあります。

本文の修飾

本文の一部を修飾する方法の代表的なものには，以下のようなものがあります。

<strong> と </strong> で挟む → 強調文字（太字）で表示
_と で挟む → _{下付き添字}を表示
^と で挟む → ^{上付き添字}を表示
<span style="color:red"> と </span > で挟む → 色を変更 したテキストを表示
<span style="font-size:70%" > と </span> で挟む → サイズを変更したテキストを表示

<span style="..."> と </span> で挟む方法で，多様な表現が可能になります。

リンクの使用

他のページへのリンクをつけられることが HTML の特徴ですが， 基本レイアウトでは既に頭の部分に上位階層へのリンクをつけているので， 新しく作る Web ページの本文中に無理にリンクをつける必要はないかもしれません。

もちろん必要があれば任意の文字列を <a href="ファイル名"> と </a> で挟んで， リンクを設定することができます。 ファイル名を指定する場合には

絶対パス指定（例）：

  <a href="http://www.atyc.org/index.html"> ... </a>

相対パス指定（例）：

<a href="../index.html" >...</a>

という２通りの方法があります。 Web ページの作成者がリンクの動作を確認するためには， Web サーバ上のデータファイルの構成と同じ構成を 自分のパソコンの上につくるのがわかりやすいやり方です。 このためには Web サイトを構成するファイルについては相対パス指定を使うことが必要となります。

リンク先のページをブラウザの別のウィンドウで開くようにするには，

<a href="./xxx.html" target="_blank">...</a>

のようにします。 この動作は嫌われることもあるようですが，現在表示しているウィンドウと新しく表示するウィンドウの内容とを比較させたい場合には効果的だと思います。

画像の挿入

画像を挿入するには

<img src="画像ファイル名" width="ピクセル幅" height="ピクセル高さ" alt="代替文字列">

と書きます。 ピクセル幅とピクセル高さを指定した方がブラウザでの表示が高速になると言われていましたが，最近では必ずしもそうなるとは限らないとも言われています。 代替文字列の記述は視覚障害者に対応するために必須とされます。

小さい画像 "img/x_s.jpg" をクリックすると元の画像 "img/x.jpg" が表示されるようにするには，

<a href="img/x.jpg"> <img src="img/x_s.jpg" width="幅" height="高さ" alt="代替文字列"> </a>

とします。

2006年03月12日