PythonとJavaScriptではじめるデータビジュアライゼーション

327

15.3　CSS スタイル指定

HTML

スケルトン（例

15-2

の「

3.

可視化要素のプレースホルダ」）は、

Nobel-viz

要素の階層

構造を決めていますが、見た目のサイズや位置は

style.css

ファイルで設定します。次の節では、

スタイルを設定する方法を説明し、一般的なスタイルについて考察します。

15.3

 

CSS

スタイル指定

本書では各グラフ要素のスタイル指定についてはそれぞれの章で扱います。この節では、残りの

CSS

（要素のコンテンツブロック（パネル）のサイズと位置の指定）を取り上げます。

サイズを決めるのは面倒な場合があります。近頃は多くの種類のデバイスがあり、スマートフォ

ン、タブレット、モバイルデバイスなどは「

Retina

（レティーナ）」

†

やフル

HD

（

1,920

×

1,080

）な

ど、解像度はデバイスによってそれぞれ異なります。大部分のモバイルデバイスはピンチズームで

グラフに合わせることができますが、そのような操作をしなくてもちょうど収まるサイズにするの

が最善です。最近では、デバイスの解像度は少なくとも

1,280

×

800

ピクセルはあると考えるのが

普通です。これを制約として使い、

Nobel-viz

の幅を

1,000

ピクセルにし、高さは最上部のユーザ

コントロールの

50

ピクセルを含めて

800

ピクセルにします。

まず、

body

セレクタでドキュメント全体に適用する全般的なスタイルを設定します。

sans-serif

（サンセリフ）フォント、オフホワイトの背景、リンク装飾を指定します。また、幅と余白も設定 ...