10年以上前にHTML/CSS関係の書籍を書いた経験があるのに、レスポンシブデザインのことを全く知らなかった話
- 2018.12.10
- CSS HTML
- 【自治体】石川県羽昨市, レスポンシブデザイン, 無断転載

2018年11月に、「フリー素材」をチラシなどに使う場合は、事前に使用条件をよく確認しよう&チラシなどに使えるフリー素材サイトリンク集という記事を書いた際に、静岡県裾野市が無断使用していたイメージ図に対して、著作権使用料145,800円を支払ったニュースを引用しました。
石川県羽昨(はくい)市でも同じような案件が発覚しています。
これ、見出しが「ネットのイラスト「無断使用」…35万円で和解」となっていますが、実際には賠償金約35万円に加え、イラスト使用料約17万円も支払って、和解した
ということなので、52万円を支払っていることになります。
ところで、このニュースを見て初めて羽昨市のWebサイトにアクセスしたのですが、メニュー部分がガッチリと固定されているデザインの自治体のサイトってあまり見ないなあと思いました。
パソコン上で見ると左右2カラムのレイアウトで、左のメニューカラムは上下スクロールに追従せず、固定されます。 ところが、ブラウザの縦幅が小さい状態でもメニューカラムは固定された状態のため、「くらし・手続き」「住まい・環境・安全」「健康・福祉・子育て」「教育・文化・スポーツ」「産業・ビジネス」「市政情報」の6つのカテゴリーを示すリンクが全て表示されない場合があります。

じゃあブラウザの横幅が小さい状態だと左右カラムがどうなるのか?と試してみると、一定の幅で突然スマートフォン用デザインに切り替わりました。 どういうCSSになっているのかなあと思ってhttps://www.city.hakui.lg.jp/theme/base/css/top.cssを覗いてみると、
@media print, screen and (min-width: 769px) {
.view-sp {
display: none !important;
}
}
@media screen and (max-width: 768px) {
.view-pc {
display: none !important;
}
}
という記述が。このCSSの記述を書き下すと、次のような感じです。
- 印刷する場合、またはスクリーンブラウザ(この場合ではパソコンまたはスマートフォンのブラウザ)で画面幅が769px以上の場合は、HTML上で
class="view-sp"
と指定されている部分を表示しない - スクリーンブラウザで画面幅が768px以下の場合は、HTML上で
class="view-pc"
と指定されている部分を表示しない


私がデザインやCSSをかじっていたのは10年以上前(メインサイトが休眠状態なので知らない方も多いかもしれませんが、HTML/CSSに関する執筆をしていたことがありました)なので、正直レスポンシブデザインについては不勉強なのですが、パソコン表示とスマートフォン表示を切り替える場合ってそういうやり方なんですね……。
レスポンシブWebデザインについて知っておきたいこと【作り方入門編】でも同じように画面幅でブレイクポイントを決めるとありますし、パソコンのブラウジングの時に画面幅を狭めることがあまり無かったので気付きませんでした。
というか、ここまで書いておいて気付きましたがこのweblog自体も画面幅を狭めるとそういう挙動になっていますね。どれだけ不勉強で研究心が無くなっているんだ……。
-
前の記事
全国空き家バンク推進機構(略称:ZAB)のせっかくの良ドメインが変更された話 2018.12.07
-
次の記事
平成31年(2019年)分 給与所得者の扶養控除申告書のデジタル出力方法と、所得の見積額の計算方法の紹介 2018.12.12