概要 ▶ Twitterのエラー画面。画面の作りがレスポンシブウェブデザインになっていて、横幅を変えると表示方法が変わっていて、今時のウェブデザインだなと感心しました。エラー画面もしっかり作り込んでいていいですね。
本ページはプロモーションが含まれている場合があります
本ページはプロモーションが含まれている場合があります
PCのTwitterがずっとこんなんなったまま…再起動しても変わらない(TωT)ｳﾙｳﾙ pic.twitter.com/Jtzjuljr2z
― 高橋たい＆みあ (@taitai_cute2010) September 3, 2013
Yahoo!のリアルタイム検索でも、17時30分頃に突出してTwitterでエラーが出ていることを見ることができます。
画像出典：「twitter エラー」の検索結果 - Yahoo!検索（リアルタイム）
Twitterのウェブ版のホームTLだけっぽくて、リプライの画面などは大丈夫だったみたいですが…。
ということで、Twitterのエラー画面をポストするだけというオチのない記事の第５弾です。
- 第１弾：思い立ってTwitterのエラー画面をアップした
- 第２弾：思い立ってTwitterのエラー画面をアップした(2)～くじらが出た（～ is over capacity）
- 第３弾：思い立ってTwitterのエラー画面をアップした(3)《技術的な不具合が発生しています》
- 第４弾：Twitterのエラー画面(4) 微妙な日本語の使い分けがあった『Twitterは処理能力の限界を超えています』
上記の続編です。
「技術的な問題が発生しています。ユーザー名を再度ご確認ください。」の下に各国語へのリンクなどがあり、画像があります。
と、ふと、画面の横幅を縮めていったらどうなるのか気になりました。
すると、下にあった大きな画像が小さくなって「技術的な問題が発生しています。」の上に画像が来ています。
表示デバイス・ブラウザーの画面幅によって、コンテンツの表示方法を変える手法「レスポンシブウェブデザイン」（レスポンシブWebデザイン）になっていました。
縦の長さを縮めていっても同じ現象が見られました。
縦の長さで反応するのは考えていなかったのでちょっとびっくり。
レスポンシブウェブデザインではCSSのメディアクエリーという「@media screen and (max-width: 768px)」といった画面の横幅（ここではwidth）で判定して、CSSの割り当てを変更することが多いのですが、縦の長さを指定している方ってどのくらいいらっしゃるんだろう？
というか、どんな要件なんだ？？ 思い当たる方がいたら教えて頂けると幸いです。
あと、横幅をスマートフォン並みに小さくしたらどうなるのかを見てみましたが、特に変わりませんでした。
以上です。相変わらずオチは無いです。
ということで、エラー画面もきちんとレスポンシブウェブデザインになっていて感心しましたわ。
それでは。