10年以上前にHTML/CSS関係の書籍を書いた経験があるのに、レスポンシブデザインのことを全く知らなかった話

2018年11月に、「フリー素材」をチラシなどに使う場合は、事前に使用条件をよく確認しよう＆チラシなどに使えるフリー素材サイトリンク集という記事を書いた際に、静岡県裾野市が無断使用していたイメージ図に対して、著作権使用料145,800円を支払ったニュースを引用しました。

www.yomiuri.co.jp

これ、見出しが「ネットのイラスト「無断使用」…３５万円で和解」となっていますが、実際には賠償金約３５万円に加え、イラスト使用料約１７万円も支払って、和解したということなので、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自体も画面幅を狭めるとそういう挙動になっていますね。どれだけ不勉強で研究心が無くなっているんだ……。