h.sato – ページ 13 – Solホームページ

はじめに

Sol5-0.11で新たに実装しました機能を使うと、Sol5標準の表示仕様を大幅に変更することが可能です。その一例として、目の悪い方向けに表示文字列を大きくする方法を解説します。この拡大文字表示のSol5は、Web会議などでのプレゼンテーションにも利用することができます。

[備考] Sol5-0.13.0 （2022.3.17 公開）で画面ズーム機能が実装されました。単に文字サイズを変更するだけであれば、本稿の方法より、画面ズームを利用する方がはるかに簡単です。しかし、CSSを使った画面表示変更テンプレート作成の一例として記事自体は残すことにしました。

解説は不要で結果だけを利用したいという方は、以下のテンプレート・ファイルをダウンロードしてご利用ください。これは表示文字列を大きくするCSSを組み込んだSol5書類です。ダウンロードファイルはSol5書類をzipで圧縮しています。解凍してからお使いください。この書類は上書き保存禁止設定のテンプレートになっています。このテンプレートを読み込んで、書類を作成し、別名を付けて保存するようにしてください。なお、このテンプレートはSol5-0.11.0以降用です。それ以前のSolでは使えませんので、ご注意ください。

　　large-chars-template.zip

Sol5標準表示のHTMLとCSSの出力

Sol5-0.11以降では、画面に表示されている内容に対応するHTMLとCSSをダウンロードする機能が組み込まれています。メニュー「その他/Sol5のスタイルについて」で表示される解説を御覧ください。この中の「Sol5自身のスタイルの変更」の中に「現在のHTMLとCSSの確認」の説明があります。

この解説に従って、この解説自身のHTMLとCSSをダウンロードしてみてください。ダウンロードされたHTMLファイルをMicrosoft Edgeで開くと図１のようになります。見かけはSol5の画面と全く同じであることを確認してください。

図１通常のブラウザで表示されたSol5書類内容

HTMLとCSS内容の確認

ブラウザ上で確認したいトピックの文字列の上で右クリックし、コンテキストメニューの「開発者ツールで調査する」（Chromeでは「検証」）を選びます。図２では例として「太字（タグ <b>…</b>）」のトピック文字列上で右クリックした例を表示しています。

図２ブラウザ上でコンテキストメニューを表示する

メニューを選ぶと図３のように開発者ツールの画面が表示されます。

図３開発者ツール画面

開発者ツール画面では左側（要素タブのとき）にHTMLの構成が表示され、右側の計算済みタブのところに、左で選ばれたHTML要素に適用されているCSSの一覧が表示されます。

Sol５のHTML構造

HTMLとCSSの関係の詳細に触れる前にSol5画面のHTMLの構造を概観しておきましょう。図４はSol５のHTMLの一部を図式化したものです。

　　　図４　Sol5のHTML構造

Solのマニュアルでトピックと呼んでいるものは、図の紫色で示されたdiv.solTopic（solTopicというクラスのdiv要素）です。div.solTopicはタグ文字を格納するdiv.solTagと本文を格納するdiv.solBodyで構成されています。

div.solTopicは、それと１対１に対応するdiv.solBlockに収録されています。div.solBlockには、div.solTopicとその子トピックに対応するdiv.solBlock（複数可）が収録されています。このようにdiv.solBlockは入れ子構造を持つことで、Solの階層構造を表現しています。

HTML要素とそれに適用されるスタイル

ここで図３の開発者ツール画面に戻りましょう。上で述べたHTML構造は開発者ツール画面の左側をよくみれば分かることです。<div class=”solBlock” data-level=”1″>…</div>がdiv.solBlockのことです。data-xxxxxという属性は、プログラマが自由に設定できるHTML属性です。Sol５ではこれを利用して階層の深さ（レベル番号）を設定しています。Sol5では、このレベル番号に応じて、フォント、文字サイズ、文字色を設定しています。

開発者ツール画面の右側では、HTML要素のIDやクラスごとに適用されているプロパティが表示され、そのプロパティが定義されているCSSファイル上の行番号が書かれています。

Sol5のトピックレベルに応じたスタイル定義

先にダウンロードしたCSSファイル（現バージョンでは sol5-0.css）をテキストエディタで開くと、Sol5のスタイル定義のすべてを見ることができます。これをみるとその91～101行にレベルに応じたスタイル定義がかかれていることが分かります。そこを抜き出したものがリスト１です。

リスト１　トピックレベルに応じたスタイル定義

div.solTopic { font-size: 10px; }
div.solBlock[data-level="0"] > div.solTopic { font-size: 14px; font-weight: bold; color: blue; }
div.solBlock[data-level="1"] > div.solTopic { font-size: 14px; font-weight: bold; }
div.solBlock[data-level="2"] > div.solTopic { font-size: 14px; color: maroon; }
div.solBlock[data-level="3"] > div.solTopic { font-size: 14px; }
div.solBlock[data-level="4"] > div.solTopic { font-size: 14px; color: navy; }
div.solBlock[data-level="5"] > div.solTopic { font-size: 13px; }
div.solBlock[data-level="6"] > div.solTopic { font-size: 13px; color: navy; }
div.solBlock[data-level="7"] > div.solTopic { font-size: 11px; }
div.solBlock[data-level="8"] > div.solTopic { font-size: 11px; color: navy; }
div.solBlock[data-level="9"] > div.solTopic { font-size: 11px; color: navy; }

文字サイズに関係するスタイル定義

今回のテーマである文字サイズの変更に関係するスタイルは、上で述べたレベル別スタイル定義にあるfont-sizeの変更が主になります。ただしfont-sizeを大幅に変更するときは、同時に１行の高さであるline-heightも変更しておく必要があります。

Sol5の場合、本文だけでなく、タグ記号（△や☆）も文字ですので、div.solTagのfont-size, line-height, widthも変更する必要があります。

また、div.solBodyと下位のdiv.solBlockは、div.solTagの幅だけ右にずれています。これはそれぞれに設定するmargin-leftのサイズで指定しています。

以上をまとめると、文字サイズを大きくするためのCSSの変更は、リスト２のようになります。

リスト２　文字サイズを大きくするスタイルの上書き定義

div.solTopic { font-size: 20px; line-height: 34px;}
div.solBlock[data-level="0"] > div.solTopic { font-size: 25px; }
div.solBlock[data-level="1"] > div.solTopic { font-size: 25px; }
div.solBlock[data-level="2"] > div.solTopic { font-size: 25px; }
div.solBlock[data-level="3"] > div.solTopic { font-size: 25px; }
div.solBlock[data-level="4"] > div.solTopic { font-size: 25px; }
div.solBlock[data-level="5"] > div.solTopic { font-size: 23px; }
div.solBlock[data-level="6"] > div.solTopic { font-size: 23px; }
div.solBlock[data-level="7"] > div.solTopic { font-size: 21px; }
div.solBlock[data-level="8"] > div.solTopic { font-size: 21px; }
div.solBlock[data-level="9"] > div.solTopic { font-size: 21px; }
div.solTag { font-size: 24px; line-height: 34px; width: 32px; }
div.solBody { min-height: 30px; margin-left: 32px; }
div.solBlock { min-height: 30px; margin-left: 32px; }
div.solBlock.closed { height: 34px; }
div#solDocument { margin-left: -25px; }

本稿の冒頭に記述したテンプレートファイルは、このリスト２の内容を書類CSSに収録したSol5書類です。

おわりに

少し細かい技術的な話になりましたが、以上のようにHTMLとCSSの関係を知り、ブラウザの開発者ツールの活用方法が分かれば、かなり細かい所まで表示をカスタマイズすることができることがご理解いただけたのではないかと思います。

リスト２による文字サイズ変更は、私が短時間で適当に作成したものです。多分実際の利用者はもっと細かい変更要望があるのではないでしょうか？上のようにして仕組みが分かれば、ご自身で細かい修正ができるのではないかと思います。

また、このHTMLとCSSに関する話は、Sol5固有の話ではなく、今日のホームページ技術に共通するものです。これを機会にホームページ開発等でもこれらの知識を活用していただければ幸いです。

（補足）Sol5の開発に使用しています JavaFX の WebView には、ズーム機能が備わっています。これを使えば、CSSを変更しなくても文字の拡大・縮小ができるはずです。しかし、Sol5は平板なホームページではなく、やや複雑な構造をもっていますので、一律の拡大・縮小でうまく表示できるかどうか、良く試してみないといけません。将来の課題としたいと思います。（2022.1.21 記）

投稿者: h.sato

Sol5-0.11.3を公開しました

Sol5-0.11.2を公開しました

表示文字サイズを変更する方法