作者の山根一城さんは杉並区西荻南で山根折形礼法教室を主宰する師範でいらっしゃいます。
折形とは何か、最近の若い人は知りません。これは逆に狙い目でありまして、入門レベルの知識であっても、歳が若ければたいへん感心されます。感心されたら何の得があるのか? なんて質問をしているようではいけませんね。若い人は若い人同士だけで集まりがちですが、もったいない話です。
ご老公方が若い人のやりたいことを邪魔だてするのは、たいてい理解できないからです。若い人はこれを「老化現象」と決め付けますが、実際にはコミュニケーション不足に過ぎないことが多い。部活の先輩が何かと後輩にお節介を焼くように、人には不思議と年下の者のやることを支援したがる性質があって、意思疎通さえうまくいっていれば、むしろご老公方こそ若い人の最高の支援者となります。そうはいってもさあ……という話はともかくとしまして、さて、折形とは一体何か。
山根先生の解説をさらに噛み砕いて説明すれば、端的には品物やお金を贈る際の「包み方」に関する礼法のことです。折形は慣習的規則ではなく礼法なので、明快で応用範囲の広い思想と理論が存在します。それゆえ、現在まかり通っている既製品の熨斗袋や根拠のないマナーブック式の作法と異なり、包まれる品物と贈る者の心にあわせて自在に変化し、美しい「かたち」を実現します。
包装が先にあり、そこに中身を詰め込むのでは本末転倒というもの。折形に興味のある方は2月28日の NHK 総合「生活ホットモーニング」をご覧ください……って、もう放送が終わってしまいましたね。アドバイスが遅れて申し訳ありません。でもまだ間に合います! 明日3月2日の NHK 教育「おしゃれ工房」で山根先生による折形講座が放送されます。ただいまテキストが絶賛発売中……これも間に合わないかな。NHK のテキストはきれいで安価、いろいろ載っててお得な感じなので、放送終了後であっても読む価値ありますよ。
- 山根先生お勧めの折形解説書
- 折形レッスン―美しい日本の包み方（山根一城先生の新刊）
- 日本の折形(おりがた)―贈る心を形にかえて（礼法研究の第一人者であった美学者、故・山根章弘先生の研究を集大成した一冊）
『折形礼法』という６００年の歴史を持つ日本伝統の礼法を普及させたいと想い創設したHPです。手打ちタグで作成した為、デザインやアクセシビリティーの面でどうすればより見易くなるかご教授ください。自分では見えない客観的な視点で厳しく評価して頂きたいと思います。
私には主観的な評価しかできません、ということは掲示板にも書いた通りです。あらかじめご了承ください。
- はじめに
正直、参りました。趣味のサイトとしては十分に完成されており、とくに全体のレイアウトや画像の使い方など、堂に入ったものといえます。ナビゲーションの充実も素晴らしく、どこを直せというような致命的な欠点も見当たりません。
Yahoo!JAPAN 登録サイトだけに、Google 検索「折形」でも2位に登場。1位は日本折紙学会の秘傳千羽鶴折形なので、これに勝てというのはちょっと酷な話。少なくとも「折形」に興味のある方に対しては、きちんとアピールできる地位にあります。
以下、いくつかの指摘はいたしますけれども、たいへん完成度の高い、よくまとまった素晴らしいウェブサイトであって、折形文化を世に伝える場として、末永く続いてほしいと思っております。
- HTML とスタイルシートについて
私がアドバイスできることがあるとすれば、「どんなサイトを作るか」ではなく、「いかにして作るか」という点にほぼ限定されるだろうと思います。
まず、以下の再現案をご覧ください。
- 原本（折形『山根折形礼法』の転載版）
- 再現案
再現案とはいっても、いくつかの変更点があります。
まず、JavaScript は外しました。案内リストの上下スクロールは、個人的には悪くないと思いましたけれども、IE 独自の機能を無茶して利用するスクリプトだったので、文書型宣言などを行うと、IE でも動作しなくなってしまいます。このサイトには縦に何画面も長く続く文書が存在せず、なければないで不都合ないものと判断しました。見出しの文字をアニメーション表示するスクリプトも同様に動作範囲が狭く、またこちらはほとんど無意味な視覚効果ではないかと思いました。
次に、スクロールバーの表示をいじらないことにしました。スクロールバーの色を変更するスタイルシートがもともと IE 専用だったという点を抜きにしても、スクロールバーの色を白くして背景色と同化させてしまうことに私は賛成できません。スクロールバーは閲覧者に有意義な情報を提供しており、これを事実上、隠してしまうような装飾には積極的な意義が見出せません。おそらく見た目の問題で色を変更されたのでしょうけれども、それもあまり成功していないように思われました。
以下は細かい点になりますが、案内リストの背景色を透明とし、リスト項目の白背景のみ残しました。この意味は、本文領域の背景が白であり、それを囲むように逆コの字型の緑色の領域があるという全体のレイアウトを明確化することです。原本のデザインでは、左の緑帯と同じ幅を有する案内リストの白背景が、帯を寸断していました。これでは閲覧者に全体の構図を印象付けにくい。「白背景は本文領域」という形式を明確化するべきだと私は考え、帯がハッキリ見えるデザインとしました。
最上部のリード文が非常に読みづらかったので、濃灰の背景色に白文字としました。読みやすいけれども、パッと見、閲覧者には無視されるレイアウト・配色となるよう配慮しました。おそらく検索エンジン対策として入れている文字なのでしょう。だからわざと目立たないよう工夫されたのでしょうが、読みたい人には読めるようにしつつ、デザイン意図を概ね達成する方法もあるのです。
文章の改行スタイルも変更しています。1行単位で詩のようにリズムを取る文体を採用され、これを画像によって規定される本文領域の幅と対応させようとなさったから、文字サイズを固定せざるを得なくなったのです。段落単位で改行する文体を選択すれば、幅固定と可変の文字サイズを両立できます。そうすると読みにくくなるのではないか? という不安があったのでしょうが、再現案をご覧になってみて、いかがでしょう? 日本語の表現として、より自然なスタイルとなり、むしろ読みやすくなったと感じるのは私だけでしょうか?
画像とキャプションに枠線をつけたのは、段落単位の改行スタイルとの兼合いによります。キャプションが本文と入り混じってしまっては困るわけで、最も単純に、明確に両者を区別する方方として、枠線を採用したわけです。
原本では、表示領域を大きくして本文が全て表示されても、横スクロールバーが残ります。再現案では、横幅約800pxで横スクロールバーが消えます。タイトル画像をもう少し切り詰めることで750pxまで制限できるはずですが、今回は画像を流用しています。
- 原本の HTML ソース
<HTML XMLNS:t="urn:schemas-microsoft-com:time" lang="ja">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="description" content="山根折形礼法教室-｢折形｣（おりがた）、折形についてと折形の歴史、代表的な折形の紹介、山根折形礼法教室のご案内等を紹介しております。">
<meta name="keywords" content="山根,折形,礼法">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" href="/x/05/03/origata/style.css" type="text/css">
<TITLE>折形『山根折形礼法』</TITLE>
<base href="http://www.yamane-origata.com/">
<SCRIPT LANGUAGE="JavaScript" type="text/javascript" src="/x/05/03/origata/move.js"></SCRIPT>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY onload="setInterval('sc_tbl()',1000);" Style="margin:0;" text="#616161">
<span class="fs6">
｢折形｣（おりがた）、折形についてと折形の歴史、
代表的な折形の紹介、山根折形教室のセミナー等のご案内。</span>
<TABLE BORDER="0" cellspacing="0" cellpadding="0" WIDTH="100%" ALIGN="RIGHT" SUMMARY="main">
<TR>
<TD rowspan="14" valign="top">
<div style="position:relative;width:155;height:150;background-color:transparent;padding:0;border:0;outset;"
align="center">
<TABLE BORDER="1" bgcolor="#ffffff" bordercolor="#661f36" SUMMARY="menu">
<TR ALIGN="CENTER">
<TD><span class="fs12">■山根折形礼法教室の活動</span>
</TD>
</TR>
<TR ALIGN="CENTER">
<TD><A href="aboutorigata.html">■折形とは</A>
</TD>
</TR>
<TR ALIGN="CENTER">
<TD><A href="history.html">■折形の歴史</A>
</TD>
</TR>
<TR ALIGN="CENTER">
<TD><span class="fs12">■代表的な折形の紹介</span>
</TD>
</TR>
<TR ALIGN="CENTER">
<TD><A href="sakuhin1.html">┣伝統的な折形</A>
</TD>
</TR>
<TR ALIGN="CENTER">
<TD><A href="sakuhin2.html"> ┣儀礼・儀式用折形</A>
</TD>
</TR>
<TR ALIGN="CENTER">
<TD><A href="sakuhin3.html">┣贈進紙幣包み</A>
</TD>
</TR>
<TR ALIGN="CENTER">
<TD><A href="sakuhin4.html"> ┗ 祭事・儀式用飾り</A>
</TD>
</TR>
<TR ALIGN="CENTER">
<TD><A href="wasi.html">■折形に使う和紙</A>
</TD>
</TR>
<TR ALIGN="CENTER">
<TD><A href="goannai.html">■セミナー</A>
</TD>
</TR>
<TR ALIGN="CENTER">
<TD><A href="nittei.html">■お知らせ</A>
</TD>
</TR>
<TR ALIGN="CENTER">
<TD><A href="kousijin.html">■リンク集</A>
</TD>
</TR>
<TR ALIGN="CENTER">
<TD><A href="syuppanbutu.html">■サイトマップ</A>
</TD>
</TR>
<TR ALIGN="CENTER">
<TD><A href="otoiawase.html">■お問い合わせ</A>
</TD>
</TR>
</TABLE>
<t:animate id="tt1" attributeName="top" begin="indefinite" from="" to="" dur="1"
autoreverse="false" fill="freeze" decelerate="1" />
</div>
</TD>
<TD>
<img src="/x/05/03/origata/round01.gif" alt="*" height="80" width="10" border="0" oncontextmenu="return false;"></TD>
<TD COLSPAN="3" bgcolor="#ffffff">
<img src="/x/05/03/origata/top_banner02.jpg" ALT="山根折形礼法教室" border="0" align="left" oncontextmenu="return false;"></TD>
<td bgcolor="#ffffff" rowspan="8"><img src="white.gif" width="174" alt="*">
</td>
</TR>
<TR>
<TD bgcolor="#ffffff"><!--余白-->
</TD>
<TD COLSPAN="3">
<table cellSpacing="0" cellPadding="0" border="0" SUMMARY="title">
<tr>
<td width="2" height="10" bgcolor="#000000"></td>
<td bgcolor="#000000" width="564" height="10">
<font color="#FFFFFF"><strong>
<div style="width:100%;">
『折形』・（おりがた） と私どもの活動について
<SCRIPT language="JavaScript" type="text/javascript" src="t/x/05/03/origata/ransition.js">
</SCRIPT></div>
</strong></font>
</td>
<td bgcolor="#333333" width="12" height="10">
<img width="12" height="100%" src="/x/05/03/origata/Ctab000000.gif" oncontextmenu="return false;" alt="*"></td>
<td bgcolor="#666666" width="12" height="10">
<img width="12" height="100%" src="/x/05/03/origata/Ctab333333.gif" oncontextmenu="return false;" alt="*"></td>
<td width="12" height="20">
<img width="12" height="100%" src="/x/05/03/origata/Ctab666666.gif" oncontextmenu="return false;" alt="*"></td>
</tr></table></TD></TR>
<TR>
<TD bgcolor="#ffffff"><!--余白-->
</TD>
<TD COLSPAN="3" width="41%" bgcolor="#ffffff"> <br>
<TABLE cellSpacing="0" cellPadding="0" border="0" SUMMARY="contents"><TBODY>
<TR>
<TD colspan="2" bgcolor="#ffffff">
<p><b>私共の活動について</b><br><br></td></tr><tr><td>
「折形」（おりがた）とは６００年も昔から上級武家の間で行われ、<br>
秘伝として伝えられてきた<b>日本独自の「礼法」の一つ</b>でした。<br>
「もの」や「お金」を和紙で包む「包み方」の方式のことで、<br>
「折形の礼法」といいます。</p>
<p>江戸時代に入ると「折形」は一般社会にも行きわたり、<br>
昭和前期ごろまでは格式ある家では、品物やお金を贈るとき、<br>
純白の和紙に美しく折り包んで、直接手渡しておりました。<br>
四季折々の行事によっても、包む中身の品物によっても、<br>
一つ一つの仕上がりの形が変わり、<br>
<b>一目で何を包んでいるのかが判るのが「折形」の特長</b>です。</p>
<p>その仕上がりの形も、それを贈る行為も、<br>
どちらも日本の美を集約した美学だといえましょう。</p>
<p>しかしながら戦後、西欧の急速なライフスタイルの浸透、普及によって<br>
いつのまにか「折形礼法」は<br>
その形も心も日本の生活慣習の中から消失してしまい、<br>
既成の熨斗袋を単に購入するという安易なスタイルに<br>
取って代わってしまいました。<br>
根拠のない礼法や既製品の熨斗袋があふれ<br>
日本古来の素晴らしい礼法の基本原則が<br>
大きく乱れ混乱しているのが現状です。</p>
<p>山根折形礼法教室では、<b>日本古来の武家礼法本流の原則</b>に従った<br>
正しい折形をわかりやすく普及、啓発することに努めております。</p>
<p>これらの折形礼法の原則は礼法研究家、美学者として<br>
日本での第一人者であった山根折形礼法教場宗主 故 山根章弘氏の<br>
４０年以上にわたる研究成果の結果、<br>
文化史、歴史的な裏づけに基づいて折形の思想、<br>
哲学を集約したものであり、<br>
<b>流儀や流派を主張するものではありません。</b></p>
<p>私どもは、一人でも多くの方が、この素晴らしい日本文化を再認識され、<br>
日本古来の礼法の原則にのっとって、折り目正しく品物を折り包んで、<br>
現代の社会の中での人と人との関わり合いを<br>
美しく保ってゆくことを願うものです。</p>
山根折形礼法教室 主宰 山根一城
</TD>
<TD VALIGN="top">
<img src="/x/05/03/origata/toppic.gif" oncontextmenu="return false;" alt="木の花包み"><br>
木の花包み</TD></TR>
</TBODY></TABLE>
</td>
</TR>
<TR HEIGHT="75">
<TD bgcolor="#ffffff"><!--余白-->
</TD>
<TD COLSPAN="3" ALIGN="left" bgcolor="#ffffff">
</TD>
</TR>
<TR>
<TD bgcolor="#ffffff"><!--余白-->
</TD>
<TD width="33%" bgcolor="#ffffff">
</TD>
<TD width="33%" bgcolor="#ffffff">
</TD>
<TD width="34%" bgcolor="#ffffff">
</TD>
</TR>
<TR>
<TD bgcolor="#ffffff"><!--余白-->
</TD>
<TD bgcolor="#ffffff">
</TD>
<TD bgcolor="#ffffff">
</TD>
<TD bgcolor="#ffffff">
</TD>
</TR>
<TR HEIGHT="20">
<TD><img src="/x/05/03/origata/round02.gif" alt="*" height="100%" width="10" oncontextmenu="return false;">
</TD>
<TD colspan="3" bgcolor="#ffffff"><DIV ALIGN="CENTER">
<span class="fs12">山根折形教室の活動</span>┃
<A Href="aboutorigata.html">折形とは</A>┃
<A Href="history.html">折形の歴史</A>┃
<span class="fs12">代表的な折形の紹介</span>
<A Href="sakuhin1.html">1</A>
/<A Href="sakuhin2.html">2</A>
/<A Href="sakuhin3.html">3</A>
/<A Href="sakuhin4.html">4</A>┃
<a href="wasi.html">折形に使う和紙</a><br>
<A Href="goannai.html">セミナー</A>┃
<A Href="nittei.html">お知らせ</A>┃
<A Href="kousijin.html">リンク集</A>┃
<A Href="syuppanbutu.html">サイトマップ</A>┃
<A Href="otoiawase.html">お問い合わせ</A>┃
<br><i><font color="#666666">Copyright
(C) 2004 yamane-origata. All Rights Reserved.URL http://www.yamane-origata.com/</font></i><br>
<img src="/x/05/03/origata/counter.png" alt="カウンター" width="80" height="12">
</div>
</TD>
</TR>
<TR HEIGHT="20">
<TD>
</TD>
</TR>
</TABLE>
<BR>
</BODY>
</HTML>タグをひとつひとつ手で書いていらっしゃるそうですが、これは相当苦労されただろうと思いました。バリバリのテーブルレイアウトなのですけれども、例えば rowspan="14" とかですね、ふつうなら嫌になります。いったん紙に書いてみたりでもしないと、レイアウトのための行を14も把握できるものではありません。これほど苦労されていながら、完成形はむしろシンプルです。シンプルなデザインはシンプルに実現されるべきだと思います。
全体については再現案をじっくり検討していただくとして、以下、一つの例を挙げて概要を説明いたします。
小見出しのデザインに要した記述は、とくに凄まじい。該当部分を抜き出すと、以下の通り。
<table cellSpacing="0" cellPadding="0" border="0" SUMMARY="title">
<tr>
<td width="2" height="10" bgcolor="#000000"></td>
<td bgcolor="#000000" width="564" height="10">
<font color="#FFFFFF"><strong>
<div style="width:100%;">
『折形』・（おりがた） と私どもの活動について
<SCRIPT language="JavaScript" type="text/javascript" src="t/x/05/03/origata/ransition.js">
</SCRIPT></div>
</strong></font>
</td>
<td bgcolor="#333333" width="12" height="10">
<img width="12" height="100%" src="/x/05/03/origata/Ctab000000.gif" oncontextmenu="return false;" alt="*"></td>
<td bgcolor="#666666" width="12" height="10">
<img width="12" height="100%" src="/x/05/03/origata/Ctab333333.gif" oncontextmenu="return false;" alt="*"></td>
<td width="12" height="20">
<img width="12" height="100%" src="/x/05/03/origata/Ctab666666.gif" oncontextmenu="return false;" alt="*"></td>
</tr></table>1行5列のテーブルを使い、様々な W3C 非推奨の属性やインラインスタイルシート、font 要素などを駆使して装飾されています。なぜ見出しひとつに5列必要か? 1列目は td 要素への width 属性指定による余白作成、2列目が肝心の文字列、3～5列目は画像を配置＋幅固定によるグラデーション表現、という按配。
私なら、どうするか。
<h2>『折形』・（おりがた）と私どもの活動について</h2>
見出し要素は文書構造上、上位のものから順に h1 要素、h2 要素、……、h6 要素となります。山根さんのデザインでは最上位の見出しがサイト名となっているので、その次の小見出しは自動的に h2 要素と決めてよいでしょう。私の記述は、これで全てです。
……というのはもちろんジョークで、外部スタイルシートに若干の記述が必要になります。なぜインラインスタイルシートにしないかといえば、ひとつにはリニューアルの手間を削減するため（構造と表現を分離する必要があるから）。もし見た目だけの（＝本文やサイト構造自体に手を加えない）リニューアルは金輪際ありえないのだとしても、同じスタイルの小見出しはほぼサイト内の全文書に存在していますから、外部スタイルシートに記述をまとめた方が便利です。
ではその外部スタイルシートにどう書くか? 実際の再現案では CSS 記述の省力化のため分散している記述を一箇所にまとめると、以下のようになります。
h2
{margin:1em 20px; padding:0 5px; font:normal normal bold 120%/1.4 sans-serif; color:#fff; background:#000 url(h2.png) no-repeat right top;}単純明快。余白や文字色、背景色の指定は、外部スタイルシートを用いるだけでこんなに簡単になります。苦労されていたグラデーションの表現は、3つの画像を合成した画像を用意して、背景画像に指定することにより実現しています。わかってしまえば、「なーんだ」というアイデアです。
私は「テーブルレイアウトを使ってもよい」という立場ですが、何もこんなところでこんな風に使わなくてもいいのに、と思わされることは少なくありません。むしろ、そのような「テーブルレイアウト」の方がずっと多い。山根さんのウェブサイトのレイアウトであれば、テーブルレイアウトを使う必然性がありません。無用のテーブルレイアウトを避ければ、サイトの製作は、わかりやすく簡単になります。
- 原本の CSS
<style type="text/css">
<!--
.time{behavior: url(#default#time2);}
A{ padding: 0; border: 0; font-size: 12; font-family: Arial; text-decoration: none; }
A:hover{position:relative;top:1px;left:1px; color:#cda826;}
td { font-size: 11pt; line-height: 140%}
.title { font-size: 12pt; color: #CC3333}
.fs12 { font-size: 12px; }
.fs6 { font-size: 11px; color: #990033}
BODY{background-image:url("bg_tatami.jpg");background-repeat:repeat-y;}
a:link {color: #669900;}
a:visited {color: #e37252;}
html, body {
scrollbar-base-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-darkshadow-color: #669933;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #669933;
scrollbar-arrow-color: #336633;
}
</style>私の記法も相当にガチャガチャしている（もちろん私自身にとっては一番わかりやすく書きやすい記法なのですが他者にその優位性をうまく説明できない）ので、あまり他人にとやかくいえたものでもないのですが、もう少し整理された方がよいのではないかと思います。どこかからコピーアンドペーストしてきた記述なのでしょうけれども、まず記法を統一し、次に関連する記述を順に並べるべきです。a 要素へのスタイル指定が分断されているのは理解しがたいところです。
また、外部スタイルシートファイルに <style type="text/css"> <!-- --> </style> といった記述は書かないのが正しいので注意してください。HTML 文書の内容として配置された style 要素であれば <style type="text/css"> <!-- --> </style> などと書かねばなりませんが、HTML 文書の外にあるスタイルシートの中にそのような記述が必要ない（むしろそれはおかしい）ことは明白です。
- 再現案の HTML ソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-script-Type" content="text/javascript">
<meta http-equiv="content-style-Type" content="text/css">
<meta name="description" content="山根折形礼法教室-｢折形｣（おりがた）、折形についてと折形の歴史、代表的な折形の紹介、山根折形礼法教室のご案内等を紹介しております。">
<meta name="keywords" content="山根,折形,礼法">
<title>折形『山根折形礼法』</title>
<link rel="stylesheet" type="text/css" href="/x/05/03/origata/new.css" media="screen,tv">
<base href="http://www.yamane-origata.com/">
</head>
<body>
<p id="summary">｢折形｣（おりがた）、折形についてと折形の歴史、代表的な折形の紹介、山根折形教室のセミナー等のご案内。</p>
<ul class="nav">
<li>山根折形礼法教室</li>
<li><a href="aboutorigata.html">折形とは</a></li>
<li><a href="history.html">折形の歴史</a></li>
<li>代表的な折形の紹介
<ul>
<li><a href="sakuhin1.html">┣伝統的な折形</a></li>
<li><a href="sakuhin2.html">┣儀礼・儀式用折形</a></li>
<li><a href="sakuhin3.html">┣贈進紙幣包み</a></li>
<li><a href="sakuhin4.html">┗祭事・儀式用飾り</a></li>
</ul>
</li>
<li><a href="wasi.html">折形に使う和紙</a></li>
<li><a href="goannai.html">セミナー</a></li>
<li><a href="nittei.html">お知らせ</a></li>
<li><a href="kousijin.html">リンク集</a></li>
<li><a href="syuppanbutu.html">サイトマップ</a></li>
<li><a href="otoiawase.html">お問い合わせ</a></li>
</ul>
<div class="main">
<h1><img src="/x/05/03/origata/top_banner02.jpg" alt="山根折形礼法教室" width="620" height="57"></h1>
<h2>「折形」（おりがた）と私どもの活動について</h2>
<dl>
<dt><img src="/x/05/03/origata/toppic.gif" alt="木の花包み" width="119" height="357"></dt><dd>木の花包み</dd>
</dl>
<p>「折形」（おりがた）とは６００年も昔から上級武家の間で行われ、秘伝として伝えられてきた<em>日本独自の「礼法」の一つ</em>でした。「もの」や「お金」を和紙で包む「包み方」の方式のことで、「折形の礼法」といいます。</p>
<p>江戸時代に入ると「折形」は一般社会にも行きわたり、昭和前期ごろまでは格式ある家では、品物やお金を贈るとき、純白の和紙に美しく折り包んで、直接手渡しておりました。四季折々の行事によっても、包む中身の品物によっても、一つ一つの仕上がりの形が変わり、<em>一目で何を包んでいるのかが判るのが「折形」の特長</em>です。</p>
<p>その仕上がりの形も、それを贈る行為も、どちらも日本の美を集約した美学だといえましょう。</p>
<p>しかしながら戦後、西欧の急速なライフスタイルの浸透、普及によっていつのまにか「折形礼法」はその形も心も日本の生活慣習の中から消失してしまい、既成の熨斗袋を単に購入するという安易なスタイルに取って代わってしまいました。根拠のない礼法や既製品の熨斗袋があふれ日本古来の素晴らしい礼法の基本原則が大きく乱れ混乱しているのが現状です。</p>
<p>山根折形礼法教室では、<em>日本古来の武家礼法本流の原則</em>に従った正しい折形をわかりやすく普及、啓発することに努めております。</p>
<p>これらの折形礼法の原則は礼法研究家、美学者として日本での第一人者であった山根折形礼法教場宗主 故 山根章弘氏の４０年以上にわたる研究成果の結果、文化史、歴史的な裏づけに基づいて折形の思想、哲学を集約したものであり、<em>流儀や流派を主張するものではありません。</em></p>
<p>私どもは、一人でも多くの方が、この素晴らしい日本文化を再認識され、日本古来の礼法の原則にのっとって、折り目正しく品物を折り包んで、現代の社会の中での人と人との関わり合いを美しく保ってゆくことを願うものです。</p>
<address>山根折形礼法教室 主宰 山根一城</address>
<div class="footer">
<p>┃山根折形礼法教室┃<a href="aboutorigata.html">折形とは</a>┃<a href="history.html">折形の歴史</a>┃代表的な折形の紹介<a href="sakuhin1.html">1</a>/<a href="sakuhin2.html">2</a>/<a href="sakuhin3.html">3</a>/<a href="sakuhin4.html">4</a>┃<a href="wasi.html">折形に使う和紙</a>┃<br>
┃<a href="goannai.html">セミナー</a>┃<a href="nittei.html">お知らせ</a>┃<a href="kousijin.html">リンク集</a>┃<a href="syuppanbutu.html">サイトマップ</a>┃<a href="otoiawase.html">お問い合わせ</a>┃</p>
<p>Copyright (C) 2004 yamane-origata. All Rights Reserved.<br>URL http://www.yamane-origata.com/</p>
<p><img src="/x/05/03/origata/counter.png" alt="カウンター" width="80" height="12"></p>
</div>
</div>
</body>
</html>原本の半分の記述量となりました。単に短ければいいというものではありませんが、ムダを省いた結果、短くなったのであれば喜ばしいことのはずです。再現案は、概要、以下の構造を有しています。
<!DOCTYPE （略）>
<html lang="ja">
<head>
<meta （略）>
<title>折形『山根折形礼法』</title>
<link rel="stylesheet" （略）>
</head>
<body>
<p id="summary">リード文</p>
<ul class="nav">
<li>ナビゲーション</li>
</ul>
<div class="main">
<h1>サイト名（画像）</h1>
<h2>「折形」（おりがた）と私どもの活動について</h2>
<dl>
<dt>折形の画像</dt><dd>画像の説明</dd>
</dl>
<p>活動の説明</p>
<p>（中略）</p>
<p>画像の説明</p>
<address>山根一城</address>
<div class="footer">
<p>ナビゲーション</p>
<p>Copyright</p>
<p>カウンター</p>
</div>
</div>
</body>
</html>かなりわかりやすくなった、と思うのは私だけでしょうか? リード文、ナビゲーション、そして本文領域（div.main）からなる、単純な構成です。本文の末尾に再びナビゲーションが登場する（div.footer）のが変なところで、これは本文領域から追い出すべき部分かもしれません。私がそのようにしていないのは、結果としてのレイアウトから逆算して文書の構成を考えた名残です。白背景の領域は div.main としたわけです。これは邪道な方法かもしれませんが、一概に否定しきれない面があるかと思っています。
本文の前にナビゲーション、という文書構成にはいろいろな意見がありますが、私はアリだと思っています。自分自身の閲覧行動を振り返るに、本文はチラッと見出しを見ただけでページを立ち去ることが少なくない。本文を全部読まないとナビゲーションが登場しないのは、必ずしも閲覧者に優しくないと思っています。（参考："いろは"の先のCSS 第8回）
- 再現案の CSS
*
{margin:0; padding:0; font:normal normal normal 100%/1.4 Times,"Times New Roman","ＭＳ Ｐゴシック",Osaka; color:#616161; background:transparent; text-decoration:none; border:none;}
body
{padding:0 0 30px; background:#fff url(bg_tatami.jpg) repeat-y left top;}
p#summary,ul.nav *,div.footer *
{font-size:12px;}
p#summary,dd,div.footer
{text-align:center;}
p#summary
{margin:0 0 30px; padding:5px 20px 5px; line-height:1; color:#fff; background:#616161;}
ul.nav
{position:absolute; top:52px; left:3px; width:154px;}
ul.nav li
{margin:0 2px 2px; padding:2px 0 2px 18px; background:#fff url(listmark.png) no-repeat 6px 8px; list-style:none; border:1px solid #903;}
ul.nav li li
{margin:0; padding:0; background:none; border:none;}
div.main
{margin-left:160px; width:590px; background:#fff;}
h1,dt,dd,div.footer
{padding:10px 0;}
h1
{background:#fff url(header2.png) no-repeat left top;}
h2,p,address
{margin:1em 20px;}
h2,em
{font-weight:bold;}
h2
{font-size:120%; color:#fff; background:#000 url(h2.png) no-repeat right top;}
address
{text-align:right;}
dl
{width:141px; float:right;}
dt,dd
{border:1px solid #903;}
dt
{width:119px; margin:0 20px 0 10px; border-bottom:none;}
dd
{width:119px; margin:0 20px 10px 10px; border-top:none;}
div.footer
{background:#fff url(footer2.png) no-repeat left bottom;}
a
{color:#690;}
a:visited
{color:#e37252;}
a:hover
{color:#cda826;}スタイルシート初心者の山根さんには少し厳しい内容かと思います。とくに全体のレイアウト構成は理解し難いでしょう。当面は部分の装飾テクニックを参考にしていただければ十分ではないかと思います（例えば戦術の小見出しの装飾など）。
以下は当サイトの常連読者の方々向けの補足解説。
段組だけはテーブルレイアウトで実現してもよかったのですが、今回は非常に簡単なケースですから、スタイルシートで全部再現してみました。細かいところは解説しきれないので、各自ご検討いただきたいのですが、段組には position:absolute; を用いています。基本的に扱いづらい手法なのですが、今回の案内リストは文字サイズ固定ですし、本文領域の方が縦に長いことが保証されているなど、いくつか有利な条件が重なりましたので、採用してみました。（参考："いろは"の先のCSS 第2回 補足解説）
ちょっと注意していただきたいのが角丸部分の再現手法です。原本ではテーブルを分割して、「透明背景＋白い角丸画像のセル」と「白背景のセル」により実現していたわけですけれども、これをヒントにして background:transparent url(***) no-repeat left top; などとやっても、うまくいきません。WinIE6 では、初期読込状態において、内容領域の背景が透明になってしまいます（padding 領域の背景画像は表示される）。再読込しないと内容領域に背景画像が出ません。
「透明な背景色指定＋一部を透明化した背景画像」というのは非常に魅力的な手法なのですけれども、WinIE がダメなら使えませんね。残念です。
仕方ないので、背景色を白に指定して、
のような背景画像を角に配置しています。ここで問題となるのが、本文領域は文字サイズ可変としたので、左上はともかく左下の角では body 要素の背景画像と畳模様の摺り合わせができないことでしょう。困った私は、角丸画像を 10px×10px まで小さくし、ごまかしました。よほど注意して見ない限り違和感のない仕上がりになったと思いますが、いかがでしょうか?- 山根さんの現状
山根さんは外部スタイルシートを使ったり、複雑なテーブルレイアウトをほぼ文法ミスなしで実現できるほどの実力がありながら、スタイルシートを十分に活用できていない。何かというとテーブルに頼り、ソースを肥大化させていらっしゃいます。
この理由は、端的には「学習経路に不備があり、肝心なところがよく理解されていないため」でしょう。
HTML についていえば、そもそも HTML とはいかなるものか? がわかっていらっしゃらない。だから、見出しに h1 要素などを用いず、段落に p 要素が用いず、順不同リストに ul 要素が用いない。HTML をレイアウト指定言語のように思い違いされています。
スタイルシートについていえば、width, height, padding, border, margin といった CSS の基本中の基本をご存じない様子。CSS におけるボックスという考え方さえ理解されたなら、テーブルは劇的に簡略化され、1行2列のシンプルな姿になる（段組だけをテーブルで実現する形になる）はずです。さらにテーブルを全廃することも不可能でないことは、私が再現案で示した通りです。
再現案のソースがどれほどスッキリしているかをご理解いただけるならば、HTML とスタイルシートを勉強する意義は明らかです。お勧めの入門書もありますから、ぜひ勉強をお勧めしたいところ。
ただ、ひとつ大きな問題があります。サイトの構成上、既に完成された状態であるわけで、更新頻度はこれまで同様、今後も低いことが予想されますね。とすると、山根さんが勉強する意義は、じつは小さい。もし今、山根さんが学習意欲にあふれているのであればよいのですが、いろいろ苦労したけれど、こうしてサイトも完成したわけだし……と、一息ついている状況かもしれません。もしそうであれば、私はなんとアドバイスしたらよいか、悩ましいところです。
いくら複雑なテーブルレイアウトだといっても、文書をコピーして一部を改変するという手順であれば、じつは更新にはそれほど手がかかりません。スクラップアンドビルドをしないのであれば、お勉強にお金と労力を費やすよりも、更新に注力した方がいいのではないかと思うのです。つまり、現状維持でいいということになります。
- アクセシビリティ
誰か困っている人がいる! 何とかしなければ! というのは、努力するための、ひとつ大きな動機となります。
山根さんはサイトのアクセシビリティに不安があるとのことでしたが、運よく、ソースの記述順序が文書の構成にマッチしたものとなっており、音声系ブラウザからの閲覧には、さして問題がありません。装飾用の画像が img 要素の形で多用されていますが、それらの alt 属性の値は「*」など適当な記号になっており、音声系ブラウザの読み上げをうまく回避しています。
そもそも実際に音声系ブラウザの利用者がいるかといったらいないだろうし、もしいても数人でしかない。しかも致命的な問題はないレベル。だから、私はアクセシビリティを理由に現状維持ではダメだということができません。これでいいのではないか、というのが正直なところなのです。
- アクセシビリティ その2
文字サイズの固定についてはいろいろ批判もありましょうが、かの Yahoo!JAPAN において、ひどく小さな画像文字が重要な箇所で使用されており、また可変とはいえかなり小さな文字も平気で使われているのが現実なのであって、それで困る人が非常に多いなら抗議への対応で事務所がパンクしているであろう、ということは容易に想像がつきます。だいたいアクセシビリティというのは、うるさい人に限って閲覧者側で対応する方法を知っていたりするものです。ためにする批判が多い。
山根さんのサイトの場合、本文領域の文字サイズは大半の閲覧者にとって問題のない大きさ。案内リストの文字サイズは少し小さいかもしれませんが、Folio Vol.8 ほど小さな案内文字にも苦情は出ていないのが実情であって、Folio のような小さなサイトでは例として不適切と思われるのであれば、かの有名な富士通ウェブ・アクセシビリティ指針をご覧になってください。
The Possibilities are Infinite
という文字列の小さくて読みにくいことといったらない。検索
という文字も小さいですね。画像化文字は IE のユーザ補助を使っても拡大できないわけで、最悪です。ならばせめて大きな文字にしておけばいいものを、日本有数の知名度を誇るアクセシビリティ指針掲載サイトがこの体たらくなのであって、ようするに日本のアクセシビリティは超一流のプロでもこれくらいのところで妥協しているわけです。
日本の、と私は今書きましたが、アメリカなんてもっとひどいですからね。アクセシビリティ法があるとかいってみても、大統領府のウェブサイトをテキストブラウザで閲覧してみれば、そのひどさはすぐにわかります。
Welcome to the White House
が3回も出てくる。そして無意味な多重入れ子や複雑怪奇なテーブルレイアウトまである。なのに向こうでは、このウェブサイトが、アクセシビリティ法とやらの意図を汲んで製作された典型的な云々として紹介されているのです。アクセシビリティについて話すとき、どこまでも「理想論」を受け入れていくと、最終的に多数派の閲覧者の支持を打ち捨てる結果に陥りやすい。基本的には閲覧者は内容についてくるのであって、デザインについてくるのではないのですけれども、少なくともデザインについて好評と不評があるのは間違いない。不評だからって閲覧者が10分の1とか100分の1になることはないけれど、半分とか3分の1くらいにはなり得ます。だからどこかで折り合いをつけざるを得ない。
富士通やホワイトハウスが平気で重要なところに画像化文字などを使い、本文の文字サイズも小さくしていることから、アクセシビリティを理由としたデザイン的後退は最小限でよいことがわかります。こうしてみると、山根さんのサイトの文字サイズ固定を咎めるのは、現実問題として無理筋だと思いますね。テーブルレイアウトであることを理由にアクセシビリティの観点から批判するのも同様でしょう。
- 今後の更新と展開について
折形のウェブサイトとして有名どころといえば折形デザイン研究所ですが、2003年11月から年表が更新されていないのが寂しいですね。たいていこの手のサイトというのは、いったん完成してしまうとそれきり放り出すことになりがち。新刊が出るとか、教室や講座の案内を更新するとか、それくらいになってしまう。
それが悪いというわけではなく、むしろ無理に更新しようしようと思っても、心が重くなるだけです。教室の生徒さんらとの交流の場にでもできたらいいのでしょうが、これもそうそううまくいくものではありません。私が多変量解析を学んだ小林龍一先生のまるばコミュニティも、先生お一人の発言ばかり並んでいるのが現状です。小林先生、ご無沙汰しています。書き込もうにも話題がなくって……。すみません。新年の挨拶くらいするべきだと思うのですが、不人情な話です。
インターネットというと、世界に開かれた云々ということがよくいわれるわけです。しかし実際には、言葉の壁もありますし、何より、人の縁はそうそう広がっていくものではない。東京の家を出てどんどん歩いて行けば箱根の山越えて名古屋、京都、大阪へ通じている、という程度の話とじつはそれほど違いません。
ここで「可能性」をどこまで信じるかという話が出てきます。何でも信じて頑張ればいいというものではないはずで、各人の判断が問われます。ページ数の都合で本に収録できなかった折形の情報を全部ウェブで公開しよう! とか、折形をやっている人間の等身大の素描として日記をつけていこう! といったあたりがすぐに思い浮かぶ積極策ですが、逆に新刊とテレビ出演と生徒募集の案内だけしていく消極策もアリです。
どんな道を選んでも後悔はつきものと割切って、お好きな道を歩まれることを望みます。以上です。