CSSサンプル

ここで紹介する文章は、静岡県立大学の石川准・国際関係学部教授の「ハイテク読書」の一部を掲載しています。著書の提供を快く許可してくださいました石川教授に感謝申し上げます。

CSS適用前のサンプル1です。

XHTMLソースコード

<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
<meta http-equiv="CONTENT-STYLE-TYPE" content="text/css" />
<title>３　情報バリアフリー</title>
</head>
<body>
<h1>３　情報バリアフリー</h1>
<p>インターネットにはテキスト情報がたくさんあります。個人や法人が提供する
ありとあらゆる種類の情報があり、検索エンジンにより検索も容易です。</p>
<p>視覚に障害のある人は音声ブラウザでホームページにアクセスし
テキスト情報を入手することができます。
しかし、なかには読めない情報もたくさんあります。
例えば、文字でなく画像として提供される情報は読めません。</p>
<p>そういった状況の中、情報バリアフリーへの要求が高まっています。</p>
<p>情報には、活字メディアにしかない情報、電子メディアにしかない情報、
どちらにもある情報、どちらにもない情報、があります。
書籍、雑誌、新聞などは、活字メディアが圧倒的に充実しています。
紙は非常に優れた表示装置です。紙と同じぐらい軽くて柔らかなディスプレイが
開発されないかぎり決してペーパーレス時代は来ないでしょう。
しかし、情報検索は電子メディアの独壇場です。</p>
<p><span class="page-normal">6</p>
<p>現状では、活字メディアへのアクセスはほぼＯＣＲしかありません。</p>
<p>出版社には電子テキストがありますが、電子テキストは
無防備なメディアですからコピーが容易です。
だから出版社も著者も出版権や著作権の侵害を心配します。</p>
<p>出版社によってはテキストファイルを提供してくれる場合もありますが、
いろいろと交渉や手続きが必要で、簡単には提供してくれません。
しかし中には電子図書を販売する出版社も若干あります。</p>
<p>著作権を尊重しつつ、電子テキストを必要としている人に供給する
社会的仕組みを構築する必要があります。</p>
<p>バリアフリー電子図書の標準化と電子図書を共有する仕組みの開発が望まれます。
アメリカではbookshare.orgというところがOCRで入力して作成したテキストファイルを、
Sigtuna DAR 3を使ってテキストだけのDAISYにし、
それに著作権保護の処理を施してネットワーク上に置いて交換する仕組みを作っています。
利用者は専用のリーダーソフトを使って読書しています。
日本でも同じような試みが始まるとよいと思います。</p>
<p><span class="page-normal">7</span></p>
</body>
</html>

上記サンプル1に横書きの一般的なCSSを適用したサンプル2です。

CSSソースコード

@charset "shift_jis";
body    {
        line-height:1.5em;
        letter-spacing:0.1em;
}
h1      {
        text-align:center;
}
p       {
        text-indent:1em;
}
p.page-normal   {
        display:none;
}

サンプル1に縦書きのCSSを適用したサンプル3です。

CSSソースコード

@charset "shift_jis";
                                                                                
body    {
        direction:rtl;
        overflow-x:scroll;
        overflow-y:auto;
        line-height:1.5em;
        letter-spacing:0.1em;
}
h1      {
        text-align:center;
}
div     {
        direction:ltr;
        writing-mode:tb-rl;
        font-family:monospace;
}
p       {
        text-indent:1em;
}
p.page-normal   {
        display:none;
}

先頭に戻る | ひとつ上の階層へ

CSSサンプル

CSS適用前

CSS適用後

縦書きCSS適用後