事件は会議室で起こっているんじゃない、警視庁ホームページで起こっているんだ！

前回は神奈川県警のホームページがダサいという話だったが、今回はちょっとだけ触れた警視庁のホームページを検証してみる。

問題点・HTML編

その1：推奨環境が異様に古い

IE9、Safari5がベースラインとなっている。いずれも10年以上前であり、この時点で警視庁のWebページに対する意識の低さが垣間見れる。今は亡きFlashについての情報も載っているし（更新日時が2020年12月なので、Flash廃止に関する情報の更新があった気がするんだけれど）…故に以降の問題があると言っても過言では無い。

その2：HTML4.01を使っている

なんと、令和4年になってもまだdoctypeがHTML4.01である。HTML5すら過去のものとなって久しいのに。ただ、styleでメディアクエリなどを利用したりしているので、可能な限り新しくしようとしている部分はある？　class="slider_wp"とあるからWordPressで作っているみたいだけれど（CSSは4Uwebだが、2009年のものなので昔使っていたものの居抜き？）、バージョン更新ができてないんだろうなあ。

しかし、推奨環境であるIE9の段階でHTML5対応は進んでいるので、何故すでにロートルなHTML4でコードを作ったのかは謎である。せめてXHTMLにしようよ。

その3：<meta name="viewport"> が2回も設定されている

設定自体は<meta name="viewport" content="width=device-width,initial-scale=1.0"> なので問題無いが、なぜ多重定義されているのかは不明である。「大事なことなので」というやつか？

その4：jQueryのバージョンが古い

1.8.2である。今はバージョン3.6.0が最新であるが、バージョン1の最終版である1.12.4ですらない。警視庁はセキュリティ意識をちゃんと持っているのだろうか？　そりゃあ遠隔操作事件で(ry

その5：スペーサーGIFが使われている

もはや過去の遺物であるスペーサーを利用しているだけでなく、<a>要素にidやname（今や非推奨）を使うなど、古いページの痕跡を感じさせる。値が大文字だし。

Tabでナビゲーションする際も、余計な場所にフォーカスが移動するため、何も知らないユーザーには混乱しか生まない。

また、ヘッダー（LSHTMLじゃないので<header>要素が使えない！）には、わざわざ「サイトメニューここまで」というのを示すスペーサーGIFが設定されており、トホホである。セマンティックHTMLさえあればすべて解決するのに！

その6：過剰なclearfix

clearfix（もちろんcontent: "."とやり方が古い）も、今やflexやgridなどを使えば不要なものであるが、ヘッダー#headbgでは、左右に要素を配置するわけでもないものにclearfixをかけており、単にコードの無駄である。

また、過剰な入れ子が発生しているうえに、それぞれの要素にclearfixをかけているなど、コード自体に手慣れていない感が満ちている¹。デザイン的にはちゃんと外部に発注しているのは分かるけど、なんでこんなつたないコーディングなの？

その7：idの重複

PC用検索フォームとスマフォ用検索フォームで検索キーワード要素のidが重複している（ちなみにid="kensaku"）。これはうっかりやりがちなミスなので我々も気を付けたい。

もっとも、データ量的には同じ要素をレスポンシブで表示を切り分けるのがベターであるが。

その8：ボタンライクリンクのコードが奇々怪々

なんと、<a>要素の周りを3つの<div>が囲んでいる。それぞれ下、上、<a>を囲む形でスタイリングされており、特に最後のやつは省略できる！　デザイナーはスタイルを作って、コードが適当である。透明な背景もついているし（当然データの無駄！）。

その9：新着情報とお知らせでマークアップが一貫していない

新着情報は<ul>を使ったリストであり、お知らせは<div>内に<p>を使う形式だ。当然前者の方がベターだ。わざわざマークアップを変える必要はあったのだろうか？

問題点・CSS編

その1：要素の連結がある

たとえば、div#head1bgという指定があるが、これではリファクタリングの際にid="head1bg"という要素のセマンティクスに基づく最適化ができなくなってしまう。このような書き方はいたずらに詳細度を高めるだけなので、改めるべきである。

その2：検索画面のfont-familyがメイリオ

Macのデフォルトに入っている日本語フォントが全く指定されておらず、考慮が足りていない。

その3：メイン画像の横幅が大きい

百歩譲って、レスポンシヴデザインを採用していないのは認めよう。しかしなんで横に画像がはみ出てるんだ？　しかも幅が1440pxだ。おかげで小さい画面だとせっかくの画像が隠れてしまうではないか！

良い点

フォントサイズを決め打ちしていないので、ブラウザのフォントサイズ変更にも柔軟に対応できる。割と見過ごされている問題で、これからのWebではきっちり対応する（もしくはあえて避ける）必要がある。しかし、横幅がpx指定なので、デザインが破綻する可能性は高い。できればremを使ったページ作りに変更していきたい。

まとめ

神奈川県警よりも面白みが無い記事になった。CMSを使って作っているらしく、正直jQueryとHTMLのフォーマットを最新化してセマンティックに作り直し、不要な<div>囲いを外すくらいしか改善点を見いだせない。古臭いけど、あんまりデザインを変えても混乱するだけだしなあ。

1. レイアウト的に境界線は全幅必要だけど、中身は幅を狭めたいという場合の致し方ない（どうせならCSSで解決できないかな）<div>の入れ子は存在する。本来は<hr>を使うべきなんだろうけど。 ↩