Currently browsing category

Webデザイン

HTML/CSS のみで作った、レスポンシブ+クリック対応の日本地図(フリー素材)

都道府県別にクリックできる(リンクが張ってある)、日本地図です。この分野は、画像とクリッカブルマップで作っている事が多いのですが、レスポンシブではクリッカブルマップは使用し辛く、スマホサイズまで縮小すると、狭い県を押しづらいという一面があります。

そこで、HTMLとCSSだけで構成された日本地図を公開します。

777pxまでは、見慣れた日本地図で表示します。
横幅777pxまでは、日本列島を表示します。
iPad mini など、小型のタブレットでは、地域別に切り分けた地図に切り替わります。
小型タブレットなど、501px〜776px までは地域別にまとまります。
スマホ版、都道府県のリスト表示
スマートフォンでは、リスト表示に切り替わります。

HTML/CSSを使って居る人がソースをみたら、簡単に理解して改変したりできると思います。

商用利用・再配布可、無料でご使用頂けます。

HTML内では、各都道府県にリンクを張れるよう、a タグがセットされています。ご自由に改変してお使い下さい。

ダウンロードは以下のボタンで可能です。各ファイルは intego VirusBarrier で検査済みです。安心してご利用下さい。

こちらからダウンロード

ChromeでCSS・borderによる線が印刷できない

Googleが配布するWebブラウザ「Chrome」で、CSSで指定した罫線が印刷できない場合があり、おそらくバグと思われます。WIndows / OS X(macOS)双方のバージョン 54.0.2840.98 以前のChromeで発現し、他のブラウザ(EDGE、safari、FireFox)では見られない現象です。(2016年11月現在)

boeder-style: solid 以外の場合に発現する

具体的には、印刷時のみCSSを適用するメディアクエリー @media print 内で指定した border-style や border による 線種の値が、solid 以外(dotted、dashed 等)の場合、プリンタで印刷しても印刷されず、印刷前のプレビューにも表示されません。

例えば、以下のような例です。

このようなコードで印刷用罫線をsfari、FireFox、EDGEで描画した場合、実際の例としては下のように印刷されます。

safari_border

ところが、同じページをChromeで印刷すると、下のようになり、罫線がいくつか消えてしまいます。1本だけの場合もあれば、複数本が消える場合があります。また、この現象はChromeを再起動しても完全には改善されません。

chrome_border

この現象が発現しているとき、chromeの印刷画面で用紙方向レイアウトを「横」にすると、消えてた線が表示されたり、別の罫線が消失することがあるのも特長です。(下図)

safari_border02

解決法は、線の種類を「solid」に指定すること

2016年11月現在、この現象の完璧な回避法が見つかりません。

検証したところ、CSSにおいて、border-style: solid; することでこの現象をひとまず回避できるようです。破線や点線での描画ができないのは、情報の重み付けに不便ですが、2016年11月現在では、この方法しかないようですね。